Наши наработки.

Инструкция как публиковать новую запись. Философия. Для Кураторов Хранителей Йоги.

Современная логика донесения знаний йоги сейчас такая:

Первое. У КАЖДОГО МАТЕРИАЛА СВОЯ РУБРИКА С НОМЕРОМ. Читается лекция на камеру для ютюба и тут же выкладывается на канал. На сайте  опенйога ру есть пронумерованные рубрики . Это эталонное название для всех видов и разделов йоги на других ресурсах и при переводе на английский. Согласно этим разделам создаются плейлисты в ютюбе , с теми же номерами и названиями. Без этой унификации наступает полный хаос ,поэтому следует строго придерживаться номеров и названий , как на сайте опенйога ру. Если нет нужного раздела надо сообщить об этом старшим кураторам и придумать.

Второе. ДОБАВЛЯЕМ ЮТЮБ ВИДЕО. После разрешения в ютюбе надо создать новую запись на сайте например опенйога ру . Для этого заходим в консоль сайта. Ищем пункт "Запись" выбираем добавить новую. Также открываем ютюб канал открытой йоги ищем нужное видео. Копируем название и вставляем как название страницы. Затем копируем адесную ссылку на видео ютюба . Нажимаем "поделиться" копируем адресс , затем заходим на страницу сайта опенйоги нажимаем "+", "плюсик" , выбираем в меню вставка с ютюба и добавляем адрес. У нас стоит плагин и он сам делает картинку для видео . Он берет ее с ютюба . Но если есть более подходящая картинка , то можно заменить .

Третье. РАСШИФРОВКА ВИДЕО. Добавляем аудио расшифровку с ютюба на страницу в сайт. Так как видео с ютюба может потеряться и тогда страница вообще окажеться пустой и все знание йоги будет потерено , надо сохранить текст с видео. Раньше это было очень трудно и долго . Теперь немного облегчилось, так как ютюб сам делает расшифровку аудио.

Можно скопировать и вмсавить в страницу сайта. Правдо там все будет не точно . Он это хоть чтото . В дальнейшев по этому тексту можно будет понять о чем видео если оно потеряется.
Чтобы получить временную расшифровку с ютюба. надо открыть видео найти сбоку три точки.  Нажать на них . затем нажать на "Показать текст видео" и аккуратно скопировать вместе с временными метками. Для этого можно использовать мышку . Другой способ когда вы нажмете мышкой на текст в самим верху. Затем удерживайте нажатой кнопку Shift (Кнопка с  Жирной стрелкой вверх) при этом нажимаете на обычную кнопку перемещения со стрелкой вниз . Нажимаете пока весь текст не станет выделен.
Затем откройте программу блокнот на компьютере и вставьте туда скопированный текст. И затем скопируйте этот текст уже из блокнота чтобы вставить под видео на странице сайта. Если текст не пропустить через блокнот , то он скопирует много мусорного невидимого кода и все получиться некрасиво и смешано.

Текст нужно добавлять на страницу  также для SEO СЕО оптимизации, так как это уникальный текст , поисковые системы любят уникальные тексты. Познее можно будет из расшифровки видео сделать полноценный читаемый текст. Как только появиться на это ресурс сил. До этого текст нужен для СЕО продвижения сайта.

Итак скопируйте текст с блокнота , зайдите на страницу сайта нажмите плюс и вставьте как "Абзац". Получиться длинный текст. Например: 

Расшифровка видео

0:00

ура ура друзья я вадим open йога это у нас начало сезона летний школа йога йога
0:08
школы опыт yoga class точка ком вся информация несколько слов про йога школу
0:13

Четвертое. РУБРИКА  Выберете нужную Рубрику в настройках странице и поставте галочку. Если этого не сделать то все будет в куче в какойто одной рубрике. Если не знаете в какую рубрику разместить , то без стеснения спросите  старших кураторов. Они подскажут или создадут нужную рубреку. Без этого будет Хаос!
Если не ведите разделов , то ищите шестеренку справа вверху . Нажмите на нее. Появятся настройки страницы.

Пятое. И ЧЕЛОВЕКО ЧИТАЕМЫЙ УРЛ. Надо также в настройках сделать человеко четаемый постоянный урл. Если вы не сделаете это сами то вордпресс возмет заглавие страницы и транслитерирует ( то есть заменит русские буквы на латинские) и вставит как урл. Это не очень хорошо. Лучше сделать его самом осмысленнымю. Надо открыть Гугл переводчик здесь https://translate.google.ru/?hl=ru&tab=TT  перевести там название записи . Этот перевод вставить как урл страницы.

Шестое. ОЧЕРЕДНОСТЬ ПУБЛИКАЦИЙ. Надо строго следить чтобы каждый день на сайте появлялось новая публикация. недопускаеться что в один день много , а потом неделя пусто. Если много есть материала сразу, то нужно надстроить чтобы он постепенно появлялся на сайте . То есть вы готовите сразу много материала , а потом с помощью настройки "Опубликовать и дата" настраиваете будущую дату публикации. То есть вы там пишете будущею дату и сохраняете . Как дата наступит материал станет видимым на сайте , а до этого только вы его будите видеть.

Седьмое. КАЖДЫЙ ДЕНЬ НОВЫЙ ИЛИ СТАРЫЙ МАТЕРИАЛ. Главное не обмануть ожидания читателей , что каждый день на сайте будет новый материал. Иначе у них не будет привычки каждый день посещать наш сайт. Они забудут о нем и уйдут на какие нибудь сомнительные сайты и получат вред для себя. Как чистую еду надо есть каждый день хоть немного, так и информационную еду надо есть каждый день без перерыва. Куратор Хранитель йоги должен помнить , что в его руках ментальное здоровье людей.
Если нет нового материала , то надо взять любой интересный старый материал и в настройках поставить галочку "Прикрепить наверх блога" , тогда он появиться как новый на верху главной страницы. И так надо делать каждый  день когда нет нового материал. У нас тысячи страниц и очень полезно напоминать людям о них.

Восьмое. МЕНЯЕМ ИЛИ ДОБАВЛЯЕМ ВИДЕО НА СТАРЫХ СТРАНИЦАХ. На старых страницах видео вставлено через ифрейм .

Вот пример <iframe width="560" height="315" src="https://www.youtube.com/embed/7e3V1DR802Y" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>.

Вначале тег <iframe. Сейчас от этого все отказываются по причине СЕО Оптимизации, Безапасности, Медленной скорости загрузки. Поэтому на старых страницах имеет смысл заменить его на обычную вставку ютюба.
Если код с ифреймом прописан на странице сайта  в настройках "Отрывок" Написать отрывок ( необязательно), то видео и текст будут видны на главной странице , что некрасиво и очень тормазит скорость загрузки , поэтому поле "Отрывок" надо оставлять пустым. 
На некоторых старых записях виде размещено с нащего хранилища selectel.ru/  и там нет такого же видео с ютюба . Поэтому надо следить как только видео зальют на ютюб . то вставить его в старую запись вверху.   

Девятое. СЕО ОПТИМИЗАЦИЯ. В самом низу под текстов записи есть встроиный плагин Yoast SEO он анализирует насколько хорошо подходит наша запись для поисковых систем таких как гугл и, яндекс и других . Просмотрите его рекомендации, некоторые будут полезны. Некоторые не актульны. Сео оптимизачия очень важна чтобы люди быстрее и проше нашли материалы по йоге через поисковые системы. Это важно для помощи людям.   

Десятое. БИТВА ЗА СКОРОСТЬ. Сейчас идет не шуточная битва в мире за уменьшения веса первой загружаемой страницы любого сайта. Чтобы вес стримился к 100-200-300 киллобайт. Жмут и урезают буквально Все! По байту выкидывают. Чтобы скорость загрузки была минимальнга. Это деньги! Это рейтинг сайта в выдачи гуглом и яндексом.
Поэтому банерная реклама предмет особой критики и внимания. 1.Надо сокрашать размер банера. Чем меньше тем легче сжать. По ширине 300. По высоте возможно стремиться к 80.
2. Надо предельно сжимать, на сайте https://compressor.io/ с потерями. Это кнопка  LOOSY. Там есть еще кнопка  LOOSYLESS. Но большенство пользователей не видят разницу между алгоритмами сжатия.  


Шаги как с нуля настраивать сайт.

ФИЛОСОФИЯ ШАБЛОНА. Не гнатся за современщеной, но меняться пари обективных изменений жизни. Например массовость мобильных телефонов.
Вот наши  мысли . Мы используем шаблон Power Magazin Version: 2.0.1

Last updated: September 15, 2020

Active Installations: 1 000+

PHP Version: 7.0 or higher

Мы допилили его под свои нужды . Но это редкий шаблон его редко обновляют . 2 года назад последний раз .Это риски.

Использовать шаблон по умолчанию 2022 еще большие риски . Дизайнеры там эксперементируют. Опыт показывает многое не приживается . Ставку на них делать опасно.
Выход найти самый массовый и самый обновляемый шаблон и самый древней шаблон. Эти 3 критерия по выбору того прототипа который надо выпиливать под свои нужды.  Это хоть какая то гарантия что он проживет еще столько же сколько жил. На сайте wordpress.org есть рейтинг шаблонов: https://wordpress.org/themes/
Отбрасываем те что по умолчанию выходят каждый год, типа 2022,2021, 2020,2019, итд.
Остается:
Hello Elementor,
Version: 2.6.1
Last updated: July 11, 2022
Active Installations: 1+ million
WordPress Version: 4.7 or higher
PHP Version: 5.6 or higher
более 1 мил , обновление 1 месяц назад версия 2.6.1.
Astra
Version: 3.9.1
Last updated: July 25, 2022
Active Installations: 1+ million
WordPress Version: 5.3 or higher
PHP Version: 5.3 or higher
все тоже версия 3.9.1.

OceanWP
Version: 3.3.3
Last updated: June 14, 2022
Active Installations: 700 000+
WordPress Version: 5.6 or higher
PHP Version: 7.2 or higher
700000 установок 1 месяц назад. версия 3.3.3.

Neve 300000 установок. обновление 1 месяц назад. вер 3.3.4.
Kadence 100000 установок .обновление . версия 1.1.25.

Дальше критерий отбора следующий. Это наличие двух версий . для телефона и двух колоночная версия для компьютера. Для чего нужна 2 колоночная версия для компьютера? Ведь все массово переходят на телефоны? ответ мы уже сделали эту ошибку когда оставили 1 колонку. И на треть срезали размещения нашей рекламы и объявлений среди самой нужной аудитории.  Соотношение просмотров телефон к компьютеру 70% к 30% . Уже здесь видно что нужны две версии. но самое главное человек у которого есть компьютер стоит на более высокой социальной и интелектуальной ступени и более предпочтителен для трудно понимаемых знаний. Это наше смутное ощущение , которое похоже работает.

2022-08-03 НАЧИНАЕМ ПЕРЕХОДИТЬ НА ШАБЛОН АСТРА. По всем показателям наиболее подходит этот шаблон для наших целей.

1. Настройка дополнительного CSS чтобы компактно выглядели записи на главной странице.

Сами стили можно найти через настройки темы - Дополнительные стили. Если в двух словах, то я использовал подход css grid. Он позволяет задать любое количество колонок и определить какой блок сколько места в них будет занимать.

Если будет желание разобраться с этим подходом, у меня есть плейлист с разбором данной технологии https://www.youtube.com/watch?v=01SzD20gJUU&list=PLiZoB8JBsdzk7yebGLJSgZiGXty6YDPBD

Код сиэсэс для шаблона Астра 2022-08-03. Делает название и картинку рядом , а не под друг под другом. Еще размер названия 16px.

.post-content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 2fr 10px 1fr;
    grid-template-columns: 2fr 1fr;
    grid-gap: 0 10px;
}

.post-content > .post-thumb {
    -ms-grid-column: 2;
    -ms-grid-column-span: 1;
    grid-column: 2 / span 1;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1 / span 2;
    margin-bottom: 0;
}

@media (min-width: 767px) {
    .post-content {
        -ms-grid-columns: minmax(70px, 250px) 20px 1fr;
        grid-template-columns: minmax(70px, 250px) 1fr;
        grid-gap: 0 20px;
    }
    .post-content > .post-thumb {
        -ms-grid-column: 1;
        -ms-grid-column-span: 1;
        grid-column: 1 / span 1;
    }
}

@media (max-width: 700px) {
    .entry-title {
        font-size: 16px;
    }
}

2022-08-11.Дополнительный код , чтобы не слипались кнопки в шаблоне Астра. (Вроде сработол, но вопрос с браузером Duckduckgo где по старому еще вроде слипаются.)


.wp-container-1 {
    --wp--style--block-gap: 0;
    margin-top: -10px;
    margin-left: -10px;
}
.wp-container-1 > .wp-block-button {
    margin-left: 10px;
    margin-top: 10px;   
}
2022-08-11. Дополнительный код в шаблоне астра чтобы ширина кнопнки была нужной велечины например здесь 130 точек.

.wp-block-button__link {
    width: 130px;
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2022-08-16 Доп код сиэсэс для Астра шаблона . Скопиован с доп кода шаблона Повер Магазин. Чтобы делать кнопки в плагине эд Инсертер.

.custom-menu-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 25px;
    margin-top: -10px;
    margin-left: -10px;
}
.custom-menu-group > a {
    margin-left: 10px;
    margin-top: 10px;
}

@media (min-width: 700px) {
    .custom-menu-group {
        justify-content: center;
    }
}

.main-link {
    text-align: center;
    background-color: #cf2e2e;
    color: white;
    padding: 0 15px;
    border-radius: 15px;
    width: 130px;
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-link:hover, .main-link:active {
    color: white;
    background-color: #ee2e2e;
}
.main-link:visited {
    color: white;
}

  1. ДИЗАЙН ПОД МОБИЛЬНЫЙ, КОМПЬЮТЕР ВТОРИЧЕН! Все все смотрят с телефона. Породумываем все под него , видео , меню, рекламу. Возможный пример сайт zerohedge.com минимум отвлекающего.
  2. НЕТ ГАМБУРГЕРУ В МЕНЮ! Это смерть. Народ годами ходит на сайт по телефону и не заглядывает в гамбургер. Все что не видно с первого взгдяда за 3 секунды , того нет!
    Вместо гамбургера используем html, css.

    HTML Для вордпресс

код html  и вставляем в плагин Ad inserter который должен уже быть установлен на сайт. В 1 закладку. галочка покахзать на главной странице, перед записями.
вверху . ставим . на главной странице ,включить перед записями. Миша создал код для кнопок меню Есть видео по этому со скайпа от 07062022.

. html вставляем в эд инсертер в 1 закладку.

Как добавить новую кнопку в меню?

Ответ: в эд инсертере копируем <a href="https://openyoga.ru/2013/04/11/1041/" class="main-link">О Нас</a>

и вставляем ниже . Затем меняем гиперссылку и текст в кнопке.


HTML Для MOODLE
делаем "Пояснение" на главной странице курсов переходим в хтмл и вставляем код.

HTML код для меню антигамбургер.

<div class="custom-menu-group">
  <a href="https://openyoga.ru/2013/04/11/1041/" class="main-link">О Нас</a>
  <a href="https://openyoga.ru/vidyrasdely/" class="main-link">60 Видов Йоги</a>
  <a href="http://openyogaclass.com/kurs/mod/resource/view.php?id=53456" class="main-link">Занятия</a>
</div>.


CSS код для меню антигамбургер для Вордпреесс.

Код CSS вставляем в Тему вордпресса в которой работаем. Ищем Дополнительные стили.
(Вот адресс для сайта опенйога.ру: https://openyoga.ru/wp-admin/customize.php?theme=magazine-power&return=%2Fwp-admin%2Fthemes.php)
CSS код для меню антигамбургер для MOODLE
В начало
    Администрирование
    Внешний вид
    Темы
    Boost
\ Вкладка "Расширеные настройки"\     Исходный SCSS
Добавляем сиэсэс код без коментариев после другого кода который там уже возможно установлен для другого.

23.06.22 выявлег баг смешной в сиэсэс. .когда вставляли код сиэсэс то вставили с коментариями , чего нельзя делать. Там проблема была в комментарии. В сss нельзя использовать комментарии в принципе, а в препроцессоре scss, который использует муддл, можно, но по-другому. Формально <!-- --> это комментарий только для html. И он сломал часть стилей, потому был такой эффект.

16.06.22. исправил сиЭСЭС нашел способ чтобы на телефоне было не 2 колонки а 3. В классе сиэсэс .main-link изменил ширину со 100 до 95 пиксел. width: 95px;
Еще уменьшил отступление с 15 до 10  т.е. padding: 0 10px; Влезло больше букв меню и стало 3 колонки.

НОВЫЙ КОД СИЭСЭС 240622. Это стили кнопок меню для openyoga.ru

.custom-menu-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 25px;
    margin-top: -10px;
    margin-left: -10px;
}
.custom-menu-group > a {
    margin-left: 10px;
    margin-top: 10px;
}

@media (min-width: 700px) {
    .custom-menu-group {
        justify-content: center;
    }
}

.main-link {
    text-align: center;
    background-color: #cf2e2e;
    color: white;
    padding: 0 10px;
    border-radius: 15px;
    width: 130px;
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-link:hover, .main-link:active {
    color: white;
    background-color: #ee2e2e;
}
.main-link:visited {
    color: white;
}

 ЗАВЕРШЕНИЕ КОДА 230622. Это стили кнопок меню для openyoga.ru openyogaclass.com




НОВЫЙ КОД 140622. Это стили кнопок меню для openyoga.ru

.custom-menu-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 25px;
    margin-top: -10px;
    margin-left: -10px;
}
.custom-menu-group > a {
    margin-left: 10px;
    margin-top: 10px;
}

@media (min-width: 700px) {
    .custom-menu-group {
        justify-content: center;
    }
}

.main-link {
    text-align: center;
    background-color: #cf2e2e;
    color: white;
    padding: 0 15px;
    border-radius: 15px;
    width: 130px;
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-link:hover, .main-link:active {
    color: white;
    background-color: #ee2e2e;
}
.main-link:visited {
    color: white;
}

16.06.22. А изменилось следующее: раньше для flex-контейнера стояло свойство gap, которая задавало отступы. Оно относительно новое, просто и отлично работает. Для поддержки старых версий браузеров оно не подходит, и поэтому я его удалил. Вместо этого отступы управляются обычными маржинами - сверху и слева от элементов (margin-left, margin-top). А чтобы это было незметно, у родительского флекс контейнера компенсируются эти маржины в отрицательную сторону.


 СТАРЫЙ КОД 13.06.22. Кнопки могут слипаться. Это стили кнопок меню для openyoga.ru

.custom-menu-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 25px;
}
@media (min-width: 700px) {
    .custom-menu-group {
        justify-content: center;
    }
}

.main-link {
    text-align: center;
    background-color: #cf2e2e;
    color: white;
    padding: 0 15px;
    border-radius: 15px;
    width: 130px;
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.main-link:hover, .main-link:active {
    color: white;
    background-color: #ee2e2e;
}

 ЗАВЕРШЕНИЕ КОДА 130622. Это стили кнопок меню для openyoga.ru

Как добавить новую кнопку в меню?

Ответ: в эд инсертере копируем <a href="https://openyoga.ru/2013/04/11/1041/" class="main-link">О Нас</a>

и вставляем ниже . Затем меняем гиперссылку и текст в кнопке.


3. ПЛАГИН ТРАНСЛИТЕРАЦИИ. НЕТ JOGE! Плагин Cyr-To-Lat Внимание там не правильная транслитерация буквы "Йй". Там "J j". Надо поменять на "Yy". Чтобы слово йога было yoga, а не joga!

Преобразует не-латинские символы в ярлыках записей, страниц и рубрик в латинские. Полезно для создания человекопонятных URL (ЧПУ). Основано на оригинальном плагине Rus-To-Lat от Антона Скоробогатова.

Версия 5.3.0 | Автор: Сергей Бирюков, Михаил Кобзарёв, Игорь Гергель | Детали



 
 



5. ПЛАГИН ВСТАВКА ЮТЮБ ВМЕСТО КАРТИНКИ НА ГЛАВНОЙ СТРАНИЦЕ.  Плагин Featured Video Plus.  У нас тема поувер магазин. Там нельзя просто вставить видео , чтобы оно было на главной странице как картинка. Точнее есть обходной способ это если с ютюба вы скопируете iframe

 с видео , а затем найдете окно "Описание " при создании записи и вставите код туда . Тогда видео как миниатьрка появиться. Но это не очень хороший способ. Во первых и фрейм не безопасен его не любят на сайтах. Во вторых для вставки и фрейма нужен компьютер , т.к. С телефона это очень трудно сделать. А все работают с телефона.

Поэтому пока используем этот плагин. Может есть лучше.

Изображение видео как картинки на главной странице:

В плагине есть поле Featured Video

Настройки: Размер изображения , Средний и большой  300. Маленький 150.

 


6. ОБЩИЕ НАСТРОЙКИ ВОРДПРЕСС. Формат даты 2022-06-10 Формат времени 00:06 . 

Меняем почту на свою . Вкладка Административный Email. Письмо с подтверждением на 99% попадет в спам .Надо искать в папке СПАМ нового почтового ящика.

Настройки \Чтение\На страницах блога отображать не более\ ставим 25 или более.

Разрешить оставлять комментарии к новым записям. Убираем галочку. В коментариях спам. Отключаем его.
Настройки постоянных ссылок. ВАЖНО! Ставим галочку "Название записи https://openyoga.ru/sample-post/". Это чтобы был нормальный читемый УРЛ страницы на латинице , без слова " Категории" и дат. Это важно для СЕО поисковой оптимизации сайта.

7. НАСТРОЙКИ ТЕМЫ POWER MAGAZIN. а.Внешний вид\ Настройки\Theme option\ Dreadcrumb Options\Home Text\ Вставить Главная вместо Home Header Option поставить 4 верхнии галочки. Нижние 2 не ставить.
б. Внешний вид\ Настройки\Theme option\Blog Options \ Read More Text -Убираем "Читать доальше" ,оставляем пустое поле. Также в
Excerpt Length меняем число слов в описании . Вопрос на сколько , надо эксперементировать. Пробуем 2 . Чтобы вошел счетчик посещений и и значек читать дальше.
в. Внешний вид\ Настройки\Theme option\Layout Options\ Global Layout- Right Sitebar
Archive Layout - Post Expert
Image in Archive- Medium (300x300)
Image Alignment in Archive - Left
Image in Single Post/Page - Medium (300x300)
Image Alignment in Single Post/Page - Center
г. Внешний вид\ Настройки\Theme option\Author Bio Options - можно убрать автора , если не важно.

8.ПЛАГИН ЯНДЕКС МЕТРИКА. Берем официальный плагин , а не другие . Там надо вставить номер счетчика.

9. КАРТИНКА ПОСТА ИЗ ЮТЮБА. Когда вставляем видео с ютюба в пост , то нет картинки на главной странице и ее приходиться отдельно вставлять, это долго бывает найти и сжать нужную картинку . Поэтому плагин Automatic Featured Images from YouTube / Vimeo очень все ускоряет  . Сам делает картинку из видео ютюба .
Раньше на блоге https://blog.itempuniversity.com/ была тема BlogstreamВерсия: 1.0.2 там видео в ютюбе вставленное в запись выводилось на главную страницу . , но потом поменяли тему на Magazine PowerВерсия: 1.1.2 с этим плагином . При этом на главной странице исчезли видео . Чтобы вместо них появилась картинка надо зайти в запись и обновить страницу. Но работет это похоже только в браузере гугл хром.

10.НАИВАЖНЕЙШЕЕ ДОПИЛИВАНИЕ СИЭСЭС ТЕМЫ POWER MAGAZIN. Чтобы главная страница выглядела компактно как сайт зерохейдж нужен дополнительный сиэсэс. Миша выпилил вот он:2022-07-06

body {color: #111;}
.entry-content-wrapper {
    max-width:800px;
    margin: auto;
}
.site-header {
    padding: 0!important;
}
.header-social {float:left;}
.magazine_power_widget_social ul li a[href*="vk.com"]:before {content: '\f189'}
.magazine_power_widget_social ul li a[href*="vk.com"]:hover {background:#4a76a8;}
.magazine_power_widget_social ul li a[href*="ok.ru"]:before {content: '\f263'}
.magazine_power_widget_social ul li a[href*="ok.ru"]:hover {background:orange;}
.main-navigation ul li.menu-item-has-children > a::after, .main-navigation ul li.page_item_has_children > a::after {content:'\27AB'}
.comment-navigation .nav-next a::after, .posts-navigation .nav-next a::after, .post-navigation .nav-next a::after {content: "\21D2";}
.comment-navigation .nav-previous a::before, .posts-navigation .nav-previous a::before, .post-navigation .nav-previous a::before {content:"\21D0"}
.entry-title a {
    text-decoration: none !important;
}
.menu-item > a[href*="login.php"] {
    text-decoration: underline;
    font-weight: bolder;
}
/*.menu-item > a[href*="login.php"]::after{
    content:'\263B';
    font-size: 22px;
    position: absolute;
    right: 2px;
    top: 9px;
    margin-left:0;
    margin-right:0;
}*/

/* @media only screen and (max-width: 599px) {
    #page {
        margin-top:0
    }
} */
@media only screen and (max-width: 550px) {
    html {
        padding-top: 0;
    }
    a.custom-logo-link {
        display: none;
       
    }
    .logged-in .mobile-nav-wrap {
        top: 0;
        position: sticky;
    }
    .blog article.post img {
        width: 100px;
        height: 70px;
        object-fit: cover;
        object-position: center;
        float:left;
        margin-right:5px;
        margin-bottom: 5px;
    }
    .byline, .comments-link, .cat-links, .tags-links {
        display: none!important;
    }
    .container {
        padding: 0;
    }
    article.post {
        padding-bottom:0;
    }
    .entry-title {
        line-height: 1.1;
        margin-bottom: 0;
    }
    .entry-meta {
        margin-bottom: 0;
    }
    a.read-more {
        display: none;
        margin-top: 2px;
        line-height:1.5;
        width: 100%;
        text-align: center;
    }
    p {
        line-height: 1.3;
        font-size: 14px;
        margin-bottom: 5px;
    }
    .site-branding, .widget img {
        max-width: calc(100% - 30px) !important;
        margin: auto;
        display: block;
    }
    .custom-logo-link img {
        width: 150px;
    }
    .widget {
        margin: 0;
    }
    #content {
        padding-top:0;
    }
    .entry-footer > span {
        line-height: 1
    }
}
.wp-block-media-text>figure>img {width: auto; display: block; margin: auto;}

.wp-block-table tr {
    display: flex;
    flex-direction: column;ФИЛОСОФИЯ ШАБЛОНА.
}
.wp-block-table iframe {
    height: 150px !important;
    width: 300px !important;
}
@media (min-width: 600px) {
    .wp-block-table tr {
        flex-direction: row;
    }
        .wp-block-table iframe {
        max-width: unset;
    }
}

.wp-block-table td, .wp-block-table th {
    border: none !important;
}
img.alignright {
    width: 300px;
    max-width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
}
@media only screen and (max-width: 550px) {
    .blog article.post img {
        float: right;
    }
}

.custom-menu-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 25px;
    margin-top: -10px;
    margin-left: -10px;
}
.custom-menu-group > a {
    margin-left: 10px;
    margin-top: 10px;
}

@media (min-width: 700px) {
    .custom-menu-group {
        justify-content: center;
    }
}

.main-link {
    text-align: center;
    background-color: #cf2e2e;
    color: white;
    padding: 0 10px;
    border-radius: 15px;
    width: 130px;
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-link:hover, .main-link:active {
    color: white;
    background-color: #ee2e2e;
}
.main-link:visited {
    color: white;
}

2022-07-01 Чтобы не подчеркивались названия записей на главной странице надо изменить сиэсэс. Некоторые стили могут наследоваться с темы, как в данном случае - для всех ссылок было указано правило с подчеркиванием при наведении и нажатии. Это легко изменить, добавив соответствующее правило text-decoration: none; для ссылок в состоянии :hover и :active .Вот код:

.entry-title a {

    text-decoration: none !important;
}

2022-07-06 Надо закоментировать часть кода , чтобы вверху на телефоне не обрезались новые материалы которые опубликованы недавно . Вот код

 /* @media only screen and (max-width: 599px) {
    #page {
        margin-top:0
    }
} */

11. УБРАТЬ ЛИШНЕЕ ВНУТРИ. В консоли при добавлении записи в таблице выводятся много лишних колонок .Неудобно искать нужные записи. Надо вверху справа найти кнопку "Настройка экрана" и убрать не нужные галочки ненужных колонок.


12. ОТКЛЮЧАТЬ ЧЛЕНСТВО. УДАЛИТЬ СПАМ ПОЛЬЗОВАТЕЛЕЙ. 2022-07-07. Спамовские пользователи тысячами регистрируются. Настройки \Обшии\Членство-Убрать галочку . Плагин для удаления тысяч спам аккаунтов https://wpschool.ru/bulk-user-removal/    Bulk Delete



13. ROBOT.TXT. Чтобы поисковики индексировали нужное и пропускали не нужное нужен файл robot.txt разместить в корневую дерикторию сайта. Или можно использовать плагин Youst seo \ Инструменты\Групповой редактор ( https://openyoga.ru/wp-admin/admin.php?page=wpseo_tools&tool=file-editor) и там вставить нужный файл, это проще.
Как составлять файл робот. тхт хорошо написан на сайте https://wp-kama.ru/id_803/pishem-pravilnyiy-robotstxt-dlya-wordpress.html
Вот пример от туда:

User-agent: *                   # Создаем секцию правил для роботов. * значит для всех
								# роботов. Чтобы указать секцию правил для отдельного
								# робота, вместо * укажите его имя: GoogleBot, Yandex.
Disallow: /cgi-bin              # Стандартная папка на хостинге.
Disallow: /wp-admin/            # Закрываем админку.
Allow: /wp-admin/admin-ajax.php # Откроем аякс.
Disallow: /?                    # Все параметры запроса на главной.
Disallow: *?s=                  # Поиск.
Disallow: *&s=                  # Поиск.
Disallow: /search               # Поиск.
Disallow: /author/              # Архив автора.
Disallow: */embed$              # Все встраивания.
Disallow: */xmlrpc.php          # Файл WordPress API
Disallow: *utm*=                # Ссылки с utm-метками
Disallow: *openstat=            # Ссылки с метками openstat

14. РАЗГРАНИЧИВАТЬ ПРАВА НА САЙТЕ. Не давать права админа всем. Только тем кто разбирается в вордпрессе. Иначе сломают сайт. Основная роль это "автор".

Вот пример на сайте в настройках в полях Адрес WordPress (URL)     Адрес сайта (URL) вместо адреса сайта вписали другое слова, после чего на сайт нельзя было зайти он перебрасывал на другой не существующий адрес . Исправить удалось только после того как  Добавили вот эти две строки в файл wp-config.php:

define('WP_HOME','https://blog.openyogaclass.com');
define('WP_SITEURL','https://blog.openyogaclass.com');

Теперь через админку нельзя будет помменять адрес вообще.

Но этой проблемы не было бы если бы права были бы ограничены для тех кто не понимает всей важности каждой настройки сайта. Легче продумать права доступа , чем потом чанить сайт.

15. СКОРОСТЬ ЗАГРУЗКИ САЙТА. В будущем можно сделать. Статья, как подключить CDN кэш к вордпрессу: https://kb.selectel.ru/docs/networks-services/cdn/wordpress_with_cdn/     С помощью selectel
Это довольно быстро всё делается с помощью selectel. Благодаря CDN можно значительно ускорить загрузку картинок, css, js файлов для пользователей из отдаленных регионов России и других стран

16. RSS это супер технология подгружать материа из одного сайта ютюба телеграма, на другой сайт в вордпресс.
В гутенберге ищем кнопку RSS вставляем код фида  и все! Для ютюба код трудно искать там первая часть такая: https://www.youtube.com/feeds/videos.xml?channel_id=  , вторую часть надо выцарапывать из страницы сайта с ютюб каналом, это ай ди канала channelId Вот здесь инструкция как искать ид канала ютюба https://www.white-windows.ru/kak-uznat-id-kanala-na-youtube/

Получается например так: https://www.youtube.com/feeds/videos.xml?channel_id=UCgbYFIqP_L2t3ABML0O9Tmg
Это надо вставлять для ютюба. Для других сайтов проще.


Сайта. Продвижение seo. Wordpress. Философия поиска и IT

  1. Изучайте IT. Порадуйте Йога Махатм! Тренды развития Вселенной. Меняться или не надо?

 


Вне Кармичное Знание Йога Махатм и SEO оптимизация продвижении йога сайта с нуля. Подводные камни.


Последнее изменение: пятница, 24 марта 2023, 19:45