Профессиональный совет от Артёма Дёмина:

Мы можем доступиться до элементов меню по имени/названию. И тогда можно изменить их вид и содержание. Код для флажков в верхнем меню:

/* flags */
a.nav-link[title='En']{
    content: url(https://writingagame.com/img/icons/flag_us01.jpg);
	width: 40px;
	padding-top: 12px;
}
a.nav-link[title='Ru']{
    content: url(https://writingagame.com/img/icons/flag_ru01.jpg);
	width: 40px;
	padding-top: 12px;
}

Dashboard -> Appearance -> Customize -> Additional CSS, добавляем вышеприведенный код, Publish.

Результат:

Да, сам бы никогда не догадался…

2. Footer

Футер в моем случае был великоват:

Мои попытки найти где его настроить – провалились.

Профессиональный совет от Артёма Дёмина:

Этот футер генерируется WordPress-ом автоматически, и настроек нет. Но можно его “спрятать” и добавить вместо него свой собственный.

Dashboard -> Appearance -> Customize -> Additional CSS, добавляем код:

/* footer */
.site-info {display: none;} /* hides original footer */
.site-footer {text-align: center;}
.site-footer:before { /* placing content before hidden footer */
	content: "Copyright © WritingAGame.com";
	color:grey;
}

Publish.

Результат:

Я думал найти соответствующий CSS style/class с твердым намерением закастомизировать его до основания (не только шрифт), но опять оказалось, что профессионалы решают такие вопросы по-другому.

Профессиональный совет от Артёма Дёмина:

1. Для таких целей люди обычно используют плагины. Их огромный выбор в

Dashboard -> Plugins -> Add New

В моем случае наиболее подходящим оказался “SyntaxHighlighter Evolved”.

Установил. Активировал.

Теперь у моего Block Editor-а дополнительная функция: не только “<> Code”, но еще и “<> SyntaxHighlighter Code”.

Результат:

Только 1 проблема – он не scrollable по вертикали.

• ТОЛЬКО ЕСЛИ это тоже Вас раздражает, то вот решение:

a: Надо подправить их CSS на Вашем сервере (Additional CSS для этого работать не будет). Файл:

../public_html/wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css

Найдите строку .syntaxhighlighter

Замените overflow настройки на overflow: visible !important;

• В будущем, в случае апдэта плагина придется это сделать заново…
• или можно поменять версию в ../public_html/wp-content/plugins/syntaxhighlighter/syntaxhighlighter.php файле на, скажем, 33.6.0

b: Теперь идем в Dashboard -> Appearance -> Customize -> Additional CSS

и добавляем

/*scroll*/
.wp-block-syntaxhighlighter-code{
	border: 1px solid silver;
	max-height:400px;
	overflow:auto!important;
}

Publish.

Результат:

Но это еще не все.

2. Чтобы он не “декодировал” спец-символы (которых в примерах кода хватает), надо добавить дополнительную функцию в Dashboard -> Appearance -> Theme Editor:

Открываем справа Theme Functions.

Добавляем следующий код в конец файла:

function kagg_syntaxhighlighter_precode( $code, $atts, $tag ) {
if ( 'code' === $tag ) {
$code = wp_specialchars_decode( $code );
}
return $code;
}
add_filter( 'syntaxhighlighter_precode', 'kagg_syntaxhighlighter_precode', 10, 3 );
add_filter( 'run_wptexturize', '__return_false' );

И – Update File

3. Другой полезный плагин – Antispam Bee – бесплатный и эффективный.

Было бы логично предположить, что надо добавить еще какой-то custom CSS, типа

.single-post {
max-width: 800;
}

Но нет, не сработало. Видимо, WordPress не так уж прост… По крайней мере для меня…

Профессиональный совет от Артёма Дёмина:

Мы можем задать максимальную ширину для ВСЕХ страниц КРОМЕ главной.

По умолчанию пост будет сдвинут влево. Если хотим его по центру (а мы хотим), то нужно задать margins.

Идем в Dashboard -> Appearance -> Customize -> Additional CSS

и добавляем

.site-main {
max-width: 700px;
margin-left: auto;
margin-right: auto;
}
.home .site-main {
max-width: 100%;
}

Затем – Publish.

Теперь:

2. Размер колонок на главной странице

Главная (home) страница в моем шаблоне была разбита на 3 колонки (максимум для самого широкого разрешения). Колонки, соответственно, были достаточно широкими. 5 колонок было бы гармоничнее. Я подозревал, что число колонок или максимальная ширина колонки – просто еще один параметр в CSS. И снова оказался неправ.

Профессиональный совет от Артёма Дёмина:

Здесь мы имеем дело с адаптивным дизайном, который активирует разные лэйауты в зависимости от разрешения экрана. Значит, нам надо 5 разных лэйаутов для разного числа колонок. Каждый лэйаут должен указывать когда его активировать (при каком диапазоне ширины экрана). Код такой:

/* columns N */
@media (min-width: 300px) and (max-width: 600px) {
.card-columns {
-moz-column-count: 1;
column-count: 1; }
}
@media (min-width: 600px) and (max-width: 900px) {
.card-columns {
-moz-column-count: 2;
column-count: 2; }
}
@media (min-width: 900px) and (max-width: 1200px) {
.card-columns {
-moz-column-count: 3;
column-count: 3; }
}
@media (min-width: 1200px) and (max-width: 1500px) {
.card-columns {
-moz-column-count: 4;
column-count: 4; }
}
@media (min-width: 1500px) {
.card-columns {
-moz-column-count: 5;
column-count: 5; }
}

Добавляем этот код в Dashboard -> Appearance -> Customize -> Additional CSS

Publish

До:

После:

• Если используете правый side bar, то можно ограничить его размер так:

/*right side-bar*/
@media (min-width: 1600px) {
	.col-xxl-2.widget-area {
		max-width: 250px; 
		font-size: small;
  		border-left: 3px solid orange;
	} 
}

3. Delimiters (разделители) между постами

Чтобы сделать границы между секциями позаметнее, я еще добавил:

/*delimiters*/
hr {
  border-top: 3px solid orange;
}
hr.wp-block-separator {
  border-top: 3px solid orange;
}
.card {
	border-bottom: 3px solid orange;
}

• hr.wp-block-separator – это hr внутри поста.
• .card – аннотация поста на главной странице.

Теперь:

Я очень рад, что мой шаблон (Nirmala) НЕ генерирует thumbnails (иконки) из картинок в посте автоматом, постольку они (иконки) не в каждом посте нужны. Всегда можно добавить так называемый “featured image” чтобы сгенерировалась иконка.

Однако, когда featured image добавлен, WordPress автоматом вставляет его еще и в начало поста, НЕ там где я хотел бы его видеть. Если б было надо, я б и сам его туда вставил, как и все другие картинки. Мои попытки найти соответствующую настройку успехом не увенчались. Выяснилось, что набор настроек ограничен базовым набором от самогО WordPress-а, плюс то что автор шаблона решил сделать настраиваемым. Я даже нашел файл theme.css на сервере, который, видимо, за все это и отвечает. Но как найти конкретную строку??

Но у профессионалов собственные методы.

Профессиональный совет от IndoCreativeMedia (авторов Nirmal-ы):

Чтобы настроить тему, лучше не писать код напрямую в style.css, или Вы будете терять свой код при каждом апдэйте.

Перейдите в Dashboard -> Appearance -> Customize

Используйте секцию Additional CSS.

Чтобы убрать ‘featured image’ из тела поста, добавьте следующий css код в Custom CSS:

.single-post .wp-post-image {
display: none!important;
}

• Не пропустите точку в .single-post.

Publish.

До:

• Сверху – автоматически вставленный “featured image”.

После:

Больше нет!

2. Рамки картинок

Поскольку в моем случае большинство картинок – это скриншоты на белом фоне, то часто трудно сказать, где картина, а где текст. Рамки были бы замечательным выходом. Но только они (рамки) нужны только внутри постов.

Решение: добавить следующий код в Custom CSS:

#single-wrapper img {
    border: 5px solid silver;
}

Затем – Publish.

Вы можете увидеть рамки прям на этой же странице.

Во-первых, нам понадобятся домейн имя и хостинг. После этого можно озадачиться и движком. Вариантов навалом. Для таких сайтов как этот, типа блога, WordPress – признанный стандарт, так что я недолго колебался.

Мой хостинг, DailyRazor.com, по моему запросу добавил WordPress Manager в мою cPanel. Manager лишних вопросов не задавал, и мой новый WordPress сайт легко и быстро был уже “в эфире”:

Это (сверху) – первый скриншот с этого сайта.

Инсталлер дал логин инфо, и я залогинился. На первый взгляд, интерфейс вроде понятный. Я решил начать с:

Побродив по куче впечатляющих примеров, наткнулся на тему “Nirmala” от IndoCreativeMedia. Прекрасный лаконичный дизайн, именно то что мне и надо:

Установил. Активировал.

Установил Homepage Settings-> Your homepage displays -> Your latest posts.

Достаточно легко и быстро сделал первый пост. И после этого я ВСТРЯЛ:

• Не могу поменять ширину постов (слишком широкие)
• Не могу задать thumbnail картинку для поста на главной странице. Добавление “featured image” также врезает его в начале тела поста (не там где мне надо).
• Не могу сделать рамки к картинкам
• Приходится именно аплодить картинки вместо простого “img src”.
• НЕ МОГУ ДАЖЕ ПРОСТО СКОПИРОВАТЬ ТЕКСТ ИЗ WORD-а не поломав шрифт.

Мда… Для настройки WordPress-овских шаблонов надо быть профессионалом (включая PHP и CSS). Проблема – КАК найти что править, и ГДЕ??

В итоге с чем-то разобрался и сам, типа как копировать из Ворда не ломая шрифт, или как использовать “img src” вместо аплода (оказалось, что в WordPress-е МОЖНО вставлять custom HTML).

Но с остальным… Похоже, без профессиональной помощи не обойтись…