КАК НАЧАТЬ и РАЗВИВАТЬ СВОЙ НЕБОЛЬШОЙ БИЗНЕС с БОЛЬШОЙ ПРИБЫЛЬЮ
Привет!
Юзаю на всех своих wordpress сайтах исключительно темы от GoodvinPress
Крайняя — Simpatika
Что привлекает в Гудвин.Пресс — техподдержка, дизайн, широкий функционал. Рекомендую.
Решите брать Simpatika — вот перечень настроек. Пишу с избытком, так как не все мои настройки вам подойдут, но вдруг...
Содержание
Всё как обычно, но так как тема поставляется с дочерней темой, то сначала ставим родительскую тему и НЕ активируем её.
Затем ставим дочернюю тему и АКТИВИРУЕМ ЕЁ.
В теме есть установщик обязательных и рекомендуемых плагинов. Предлагает сразу ставить только те, которых у вас ещё нет. То есть если у вас блог уже был и вы меняете тему и ранее уже были установлены плагины, которые есть в Simpatika, то их тема не будет предлагать устанавливать.
Прежде всего: Если до установки Simpatika у вас уже была установлена какая-либо тема от goodwinpress, сбросьте настройки Simpatika, чтобы опции старой темы не попали в новую.
Заходим поочередно в каждый из этих 6 разделов настроек
Шапка темы настраивается в Общих. Я пока оставил текстовую.
Рекомендую подзаголовок вбить капсом, т.е. заглавными
Кстати, вот этот спойлер прилагается к теме. В числе прочих украшательств — подсветки, аккордеонов, кнопок, разделителей и тому подобного.
Можно вместо текста поставить изображение-логотип. Рекомендуемый размер 300*150 px.
Можно попробовать поставить фон шапки бесконечной лентой. Для этого в файле 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)!
Вместо «Заголовок спойлера» вписать заголовок. Вместо «Текст спойлера» вставить код изображения.
Для того, чтобы изменить размер основного шрифта темы, нужно в файле style.css дочерней темы добавить селектор (строчку) body{font-size:17px} и вместо 17 поставить 16 или 18, как захочется.
Вообще пару лет назад считалось, что самый правильный размер шрифта = 16px. Но, видимо, время идет и вот...
Здесь 10 видов представлений. Универсальный и мной применяемый №7. Для остальных нужно тотально делать привязки Изображений к записи. Хотя это в любом случае придется делать, если захотите использовать такие фишки как Карусель, Похожие записи и Новые статьи
Конечно, без всего этого можно обойтись, но тогда потеряете в SEO.
Выбирайте Карусель. Она компактнее и информативнее, чем слайдеры
Цвет ссылок лучше делайте стандартным #0645ad
Под курсором #fc5d5d
Хорошо бы после нажатия ссылку делать цветом #551A8E , но в Сделай сам такой настройки нет.
Цвет шрифта оставляйте по умолчанию #4c4c4c.
С остальным можно варьировать под свой дизайн, но аккуратно. Чтобы не получилось безвкусицы.
Разные сервисы указывают разные места установки своих кодов. Например, Malerlite требует установку своего кода Java-сниппет трекера перед закрывающим тегом </head>, который находится в файле head.php
Сервис Envibox указывает местом установки своего кода перед закрывающим тегом </body>. Это файл footer.php
Так как Simpatika имеет дочернюю тему, то нужно файлы header.php и footer.php скопировать из родительской темы в корень дочерней темы. И там уже установить в эти файлы соответствующие коды сервисов.
Сервис Mailerlite позволяет запускать всплывающее окно подписной формы кнопкой. Криво, правда, позволяет. Через onclick. А редактор WordPress не дает работать этой функции. Просто вырезает её.
Кстати, раньше Mailerlite поддерживал и даже позволял создавать в своем интерфейсе кнопки, которые работали без onclick. Портится помаленьку сервис.
Ладно. Вобщем, кнопки, которые запускают всплывающие окна форм, нужно ставить в статьи.
Для этого также нужно скопировать из родительской темы в дочернюю файл single.php и вставить в него в нужное место кнопку. Имейте в виду, что в этом случае кнопка будет в каждой записи блога. Это подходит для кнопок типа «Хочу сразу узнавать о новых публикациях».
За вывод кнопки вверх отвечает код
<!--noindex--><a id="backtop" href="#top">↑</a><!--/noindex-->
в файле footer.php
Cтрелка в нем выводится кодом ↑
Поэтому вместо ↑ нужно указать ссылку на картинку стрелки. Например, вот так
<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 явно выигрывает
Но это легко поправить. В дочерней теме в style.css внизу добавить строчку
@media only screen and (max-width:600px){
и под ней поставить селектор
.container {width:100%}
Всё. Вот так стало
Уже лучше, хотя ещё есть над чем поработать. Но это уже не самой темы касается.
Настраивайте точно так как тут указано
«Чистые страницы» это страницы без шапки и подвала. Нужны для создания на них лендингов или посадочных страниц с помощью 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}
Увеличил font-size до 14 и в конце строки добавил text-align: left
То есть эта шапка будет показываться только на мобильных устройствах.
Что за такая шапка и для чего она нужна
В файле 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 копируем сюда
Автор темы решил их убрать. Причина —
смайлы (эмодзи) появились в версии 4.2 и выводят в шапке сайта несколько ссылок на скрипт и файл стилей. Это формирует лишние запросы, поэтому в целях ускорения работы сайта, эти эмодзи в данной теме заблокированы.
Ну чтож. Когда речь идет о доске объявлений, корпоративном сайте мегагиперкорпорации, где нет места эмоциям, то с автором можно и согласиться.
Но блог — это такой живой формат. Поэтому пусть лучше на миллисекунды сайт дольше открывается, но смайлики должны быть.
Чтобы вернуть их, следует открыть файл темы functions.php , в его нижней части найти и удалить код
// убираем emoje remove_action( 'wp_head', 'print_emoji_detection_script', 7 ); remove_action( 'admin_print_scripts', 'print_emoji_detection_script' ); remove_action( 'wp_print_styles', 'print_emoji_styles' ); remove_action( 'admin_print_styles', 'print_emoji_styles' );
Тема Simpatika — это лучшая тема, которую я когда-либо юзал. Обращаю внимание — в статье только про настройки. Возможностей и фишек в теме гораздо больше. Подробности смотрите на сайте GoodvinPress
Это всё. Если что-то новое будет появляться — просто буду добавлять в эту же статью.