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

ФИЛОСОФИЯ ШАБЛОНА. Не гнатся за современщеной, но меняться пари обективных изменений жизни. Например массовость мобильных телефонов.
Вот наши  мысли . Мы используем шаблон 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>

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


Last modified: Wednesday, 26 October 2022, 8:22 PM