Правильная настройка темы Semantika от GoodvinPress

Тема WordPress SimpatikaПривет!

Юзаю на всех своих wordpress сайтах исключительно темы от GoodvinPress

Крайняя — Simpatika

Что привлекает в Гудвин.Пресс — техподдержка, дизайн, широкий функционал. Рекомендую.
Решите брать Simpatika — вот перечень настроек. Пишу с избытком, так как не все мои настройки вам подойдут, но вдруг...

Установка темы

Всё как обычно, но так как тема поставляется с дочерней темой, то сначала ставим родительскую тему и НЕ активируем её.

Затем ставим дочернюю тему и АКТИВИРУЕМ ЕЁ.

Установка плагинов

В теме есть установщик обязательных и рекомендуемых плагинов. Предлагает сразу ставить только те, которых у вас ещё нет. То есть если у вас блог уже был и вы меняете тему и ранее уже были установлены плагины, которые есть в Simpatika, то их тема не будет предлагать устанавливать.

Настройка темы

Сброс настроек

Прежде всего: Если до установки Simpatika у вас уже была установлена какая-либо тема от goodwinpress, сбросьте настройки Simpatika, чтобы опции старой темы не попали в новую.

Заходим поочередно в каждый из этих 6 разделов настроек

и жмём сюда

Общее

Шапка

Шапка темы настраивается в Общих. Я пока оставил текстовую.

 

Рекомендую подзаголовок вбить капсом, т.е. заглавными

Кстати, вот этот спойлер прилагается к теме. В числе прочих украшательств — подсветки, аккордеонов, кнопок, разделителей и тому подобного.

Вопрос на будущее

Хотелось бы, чтобы можно было между слов вставлять более одного пробела, так как слова слишком близко друг к другу. Сливаются. На мой взгляд. Задам вопрос Алексею.

Можно вместо текста поставить изображение-логотип. Рекомендуемый размер 300*150 px.

Можно попробовать поставить фон шапки бесконечной лентой. Для этого в файле style.css дочерней темы

файл style.css дочерней темы

Именно дочерней!

Добавить строчки

.header {background: url('XXXXX') repeat !important}
.menunav {background: #fff}

и в первом селекторе вместо иксов указать адрес картинки, которую требуется разместить в фоне.

Почему рекомендуемая ширина логотипа 300px? Потому что логотип это не просто картинка, это фон контейнера заголовка h1 на главной, и если сделать ее шире, то такой логотип будет обрезаться на определенном количестве мобильных устройств, например, размером экрана 320 или ниже.

Поэтому здесь можно вместо текста поставить обычную картинку, а заголовок h1 перенести из шапки под меню. Для этого нужно скопировать index.php из родительской темы в дочернюю. Открыть index.php и под строчкой

<?php $titan = TitanFramework::getInstance( 'gpress' );?>

поставить такой код

<div class="container gp-clearfix">

<h1>Заголовок</h1>
</div>

Потом задать свои стили для заголовка, например, цвет или выравнивание по ширине.

После этого открыть файл logo-text.php удалить все, что там есть, и на пустое место добавить

<div class="logo textlogo">

<img src="XXXXXX" alt="">
</div><!-- end logo textlogo -->

где вместо иксов разместить адрес нужной картинки.

Файл logo-text.php находится в папке files родительской темы. Не уверен, что дочерняя тема поддержит у себя создание копии этой папки. Всё таки дочерняя тема имеет свои ограничения. Но попробовать сделать всё это в дочерней теме — имеет смысл.

Счетчики

Если меняете тему и на сайте установлены счетчики, то придется их коды снова скопировать и поставить в соответствующих полях раздела Общий. Я раз забыл и был в панике, когда увидел, что в Яндекс.Метрике трафик рухнул. Он не рухнул. Это просто счетчик не поставил.

Размер шрифта

Размер шрифта через панель настроек в теме не меняется. Автор говорит, что это ресурсоемкая штука. Поэтому можно заменить руками в коде.

Кстати, стандартный шрифт темы 17px.

Не путать с пунктами (pt)!

Таблица соотношения пикселей и пунктов здесь...


Как спрятать под спойлер изображение

  1. Вставить обычным образом изображение в статью.
  2. Перейти в режим «Текст» и вырезать код изображения.
  3. Вставить шорткод спойлера.

шорт-код спойлераВместо «Заголовок спойлера» вписать заголовок. Вместо «Текст спойлера» вставить код изображения.

Для того, чтобы изменить размер основного шрифта темы, нужно в файле style.css дочерней темы добавить селектор (строчку) body{font-size:17px} и вместо 17 поставить 16 или 18, как захочется.

Вообще пару лет назад считалось, что самый правильный размер шрифта = 16px. Но, видимо, время идет и вот... :-)

Главная

Здесь 10 видов представлений. Универсальный и мной применяемый №7. Для  остальных нужно тотально делать привязки Изображений к записи. Хотя это в любом случае придется делать, если захотите использовать такие фишки как Карусель, Похожие записи и Новые статьи

Карусель #1

Карусель в теме Simpatika

Похожие записи #2

Похожие записи в теме Simpatika

Новые статьи #3

Новые статьи в теме Simpatika

Конечно, без всего этого можно обойтись, но тогда потеряете в SEO.

Медиа

Выбирайте Карусель. Она компактнее и информативнее, чем слайдеры

Сделай сам

Цвет ссылок лучше делайте стандартным #0645ad

Под курсором #fc5d5d

Хорошо бы после нажатия ссылку делать цветом #551A8E , но в Сделай сам такой настройки нет.

Цвет шрифта оставляйте по умолчанию #4c4c4c.

С остальным можно варьировать под свой дизайн, но аккуратно. Чтобы не получилось  безвкусицы.

Коды сервисов

Разные сервисы указывают разные места установки своих кодов. Например, Malerlite требует установку своего кода Java-сниппет трекера перед закрывающим тегом </head>, который находится в файле head.php

Сервис Envibox указывает местом установки своего кода перед закрывающим тегом </body>. Это файл footer.php

Так как Simpatika имеет дочернюю тему, то нужно файлы header.php и footer.php скопировать из родительской темы в корень дочерней темы. И там уже установить в эти файлы соответствующие коды сервисов.

Сервис Mailerlite позволяет запускать всплывающее окно подписной формы кнопкой. Криво, правда, позволяет. Через onclick. А редактор WordPress не дает работать этой функции. Просто вырезает её.

Вопрос на будущее

Как победить редактор WP, чтобы оставлял onclick

Кстати, раньше Mailerlite поддерживал и даже позволял создавать в своем интерфейсе кнопки, которые работали без onclick. Портится помаленьку сервис.

Ладно. Вобщем, кнопки, которые запускают всплывающие окна форм, нужно ставить в статьи.

Для этого также нужно скопировать из родительской темы в дочернюю файл single.php и вставить в него в нужное место кнопку. Имейте в виду, что в этом случае кнопка будет в каждой записи блога. Это подходит для кнопок типа «Хочу сразу узнавать о новых публикациях».

Стрелка «ВВЕРХ»

За вывод кнопки вверх отвечает код

<!--noindex--><a id="backtop" href="#top">&#8593;</a><!--/noindex-->

в файле footer.php

Cтрелка в нем выводится кодом &#8593;

Поэтому вместо &#8593 нужно указать ссылку на картинку стрелки. Например, вот так

<a id="backtop" href="#top"><img src="https://www.fitosauna.ru/modules/mod_scrolltop/tmpl/images/6.png"></a>

Может оказаться, что красный фон стрелки, которая изначально установлена в теме, будет больше, чем новая стрелка. То есть будет выглядывать из-под неё. Чтобы убрать этот фон в файл style.css нужно добавить селектор

#backtop {background: none !important}

 Как поставить активную ссылку в виджет Об авторе

Тема Simpatika имеет свой оригинальный виджет Об авторе. Его явный недостаток — нет активной ссылки. Не для всех будет достаточным пары слов об авторе. Мало ли, вдруг автор ведет в блоге бизнес и продает что-то. Прежде чем ему заплатить, неплохо было бы узнать, что за «фрукт». :-)

Так вот, чтобы установить ссылку в виджет можно пойти двумя путями.

Первый путь — сделать всё в дочерней теме

Шаг 1

Для этого копируем в папку admin дочерней темы файл about-me-widget.php из папки admin родительской темы.

Находим в нём код

<div class="gp-about-me-img"><?php if($image): ?><img src="<?php echo esc_url($image); ?>" alt=""><?php endif; ?></div>

<div class="gp-about-me-name"><?php echo $gp_name; ?></div>
<div class="gp-about-me-text"><?php echo $text; ?></div>

строчку

<div class="gp-about-me-text"><?php echo $text; ?></div>

заменяем на

<div class="gp-about-me-text"><?php echo $text; ?><br /><a href="#">текст ссылки</a></div>

где вместо решетки нужно указать адрес нужной страницы. А вместо «текст ссылки» вписать нужный анкор.

Шаг 2

В этом же файле строку номер 2

class About_Me_Widget extends WP_Widget {

заменить на

class About_Me_Widget2 extends WP_Widget {

Строку номер 6

about-me-widget,

заменить на

'about-me-widget2,

Строку номер 100

register_widget( 'About_Me_Widget' );

заменить на

register_widget( 'About_Me_Widget2' );

Шаг 3

Скопировать из родительской темы в корень дочерней файл functions.php

В нем, над закрывающим

?>

ставим строчку

require_once( 'admin/about-me-widget.php' );

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

Но у меня не пошло. После добавления строки require_once ( 'admin/about-me-widget.php' ); в function.php сайт «глох». То есть становился недоступен. Поэтому я решил, что

Второй путь — сделать в родительской теме

Для этого понадобилось в файле about-me-widget.php , который находится в папке аdmin, изменить 1 строку согласно указаниями Шага 1 . Всё заработало, активная ссылка в виджете появилась. Единственное неудобство — при обновлении темы это придется делать ещё раз.

Изменение ширины записей

Сразу оговорюсь, что в десктопном варианте никаких НО у темы не нашел. Всё идеально.

С мобильным есть одна проблема.

Вот, тут

всё ОК. Это лента или главная блога. Тут такое решение полей – охват блока анонса статьи — великолепно. Отличный дизайн!

А вот заходим в запись или статью и эти же отступы жестко съедают дефицитную ширину.

Настройка полей темы в записях

Эстетически в статье плюса от этих полей нет. Он есть, когда поля со всех сторон. Но это на главной. А тут только ширину «съели».


Настройка отступов полей в теме

Вот, посмотрите, как выглядела страница на wp-product



Настройка полей темы

А вот то же самое место на Simpatika


wp-product явно выигрывает

Но это легко поправить. В дочерней теме в style.css внизу добавить строчку

@media only screen and (max-width:600px){

и под ней поставить селектор

.container {width:100%}

Всё. Вот так стало

Уже лучше, хотя ещё есть над чем поработать. Но это уже не самой темы касается. :-)

Настройка плагина Подсчет просмотров

Настраивайте точно так как тут указано

Настройка плагина Подсчет просмотров

Перейдите на страницу плагина:

Настройка Post Views Counter

Настройка вкладки General:

Настройка Post Views Counter

Настройка вкладки Display:

Настройка Post Views Counter вкладка Display

Настройка «чистой страницы»

«Чистые страницы» это страницы без шапки и подвала. Нужны для создания на них лендингов или посадочных страниц с помощью WPBakery Page Builder (бывший Visual Composer).

Изначально тема не хотела на чистой странице отображать результат от WPBakery Page Builder. Обратился к Алексею. Вот так он решил проблему:

В style.css дочерней темы добавил строку

.page-template-blank-page {background:#fff}

Назначение — делает фон чистой страницы белым.

А в blank-page.php родительской темы вместо

<?php the_content(); ?>

сделал

<?php

if ( have_posts() ) : while ( have_posts() ) : the_post();   ?>

<?php the_content(); ?>

<?php endwhile;

else : ?>

<p><?php _e( 'Не найдено', 'gpress' ); ?></p>
<?php endif; ?>

Настройка подписями под изображениями

Иногда нужно подробно подписывать изображения. Получается в 2-3 строки. Подписи по умолчанию отцентрованы. И плюс мелковаты. Всего 12 px. При том, что основной шрифт 17 px.

Исправление — в файл style.css родительской темы изменил строку 450 —

.wp-caption-text{font-size:14px;line-height:17px;padding:7px 5px;color:#999; text-align: left}

Настройка мобильной шапки

То есть эта шапка будет показываться только на мобильных устройствах.
Что за такая шапка и для чего она нужна


Мобильная шапка на WordPress

Вот на этом сайте вот такая шапка. Это нормально



Мобильная шапка на WordPress

А вот тут есть такой ИМ



Мобильная шапка на WordPress

И к нему «пристегнут» WP блог. Было бы не очень логично, чтобы у него была не похожая шапка.


В файле header.php в дочерней теме находим строки

</head>
<body <?php body_class(); ?>>

ПЕРЕД ними вставляем

<link rel="stylesheet" href="/blog/wp-content/themes/simpatika-child-theme/ildus.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

А после

</head>
<body <?php body_class(); ?>>

вставляем код

<!-- ИГ. Мобильная шапка -->
<div style="display: none" class="mobile-shapka">

<a href="#mobilemenu"><span class="fa fa-bars" aria-hidden="true"></span></a>

<a class="tel-m-sh" href="tel:88005050506"><img src="/images/design/call2.png"></a>

<a class="mlogo" href="/"><img src="/images/design/mobile-logo.png"></a>

<a class="cart-m-sh" href="/korzina"><img src="/images/design/cart2.png"></a>

<img class="lupa-m-sh" src="/images/design/lupa2.png">

</div>

<a style="display: none" href="#" class="spoiler-trigger"></a>

<div class="spoiler-block" style="display: none">

<form id="searchform" method="get" action="/blog/index.php">
<input type="text" value="Поиск по сайту" name="s" id="s" onfocus="if (this.value == 'Поиск по сайту') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск по сайту';}">
<input type="submit" id="searchsubmit" value="Поиск">
</form>

</div>
<script>
jQuery(document).on('click','.spoiler-trigger',function(e){e.preventDefault();jQuery(this).toggleClass('active');jQuery(this).parent().find('.spoiler-block').first().slideToggle(300);})
</script>
<!-- /ИГ. Мобильная шапка -->

Файл ildus.css копируем сюда

Мобильная шапка файл css

Резюме

Тема Simpatika — это лучшая тема, которую я когда-либо юзал. Обращаю внимание — в статье только про настройки. Возможностей и фишек в теме гораздо больше. Подробности смотрите на сайте GoodvinPress

Это всё. Если что-то новое будет появляться — просто буду добавлять в эту же статью.

Предыдущая запись Настройка плагина Subscribe to comments reloaded
Следующая запись Mailerlite Лишние запятые в теме сообщения. Решено

Ваш комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Чтобы отправить комментарий, разрешите сбор ваших персональных данных .
Пользовательское соглашение