Сайт можно посмотреть тут: ecotoys.sergdudko.tk разработка его успешно заброшена, в силу отсутствия телодвижений со стороны «заказчика».
Собственно была у меня идея сделать другу сайт, он делает бизиборды(это такие развивающие детские игрушки).
Изначально я накидал ему весьма легковесный вариант, который представляет из себя лэндинг и включает:
1. Галерея с фото, т.к. писал я её самостоятельно — предусмотрел два варианта:
- Вытягивает фотки из папки на диске, если для фото нет миниатюры, автоматически её генерирует. Если миниатюра есть — просто выводит её.
- Вытягивает миниатюры из альбома вконтакте(тут есть проблема, если фото разного формата, т.е. соотношение сторон должно быть одинаковым, иначе выглядит некрасиво)
2. Форма обратной связи, использует класс для работы с удаленным почтовым сервером и отправляет почту на его ящик.
3. Отзывы, здесь простая форма комментариев из вконтакте
3. Гугл карта с местонахождением.
Все это счастье обложил swipebox на jquery, приклеил два варианта галереи на js (для мобильных устройств, чтобы можно было листать пальцем, соответственно php определяет тип устройства и отдает нужные скрипты).
Все вышло забавно, но не особо профессионально. От друга я не особо дождался комментариев по доработке. Тут в нашей стране разрешили ремесленникам иметь интернет-магазин, плюс я столкнулся с парой проблем по оптимизации под мобильные девайсы и успешно это дело забросил.
Эту архаичную дичь можно глянуть тут: тестовый ecotoys.by
Прошло некоторое время и эта тема снова пришла мне в голову. На этот раз я решил не геморроится, а запилить все на готовом движке. Т.к. из готовых движков у меня вот этот блог крутится на wordpress, а больше ничего я пока не ковырял, на wordpressе же и остановился.
Итак:
- скачал свежий релиз
- распаковал его на своем vps
- настроил веб-сервер
- настроил субдомен ecotoys.sergdudko.tk на яндексе(там у меня dns-хостинг)
- проверил что субдомен вообще открывается
- дал права на запись wordpress(т.к. без этих прав движок не хочет ни только устанавливаться с веб-морды, но и обновлять плагины/темы/и т.д.), на php дал права на исполнение
- создал отдельную базу данных и пользователя с правами только на эту базу
- ну и собственно установил wordpress
Первое с чего я начал это подобрал наиболее подходящую тему с уже прикрученным плагином woocommerce, т.е. в перспективе с возможностью развернуть интернет-магазин(сейчас об этом речь не идет). Потыркал её на всех имеющихся девайсах — решил что ок(в действительности потыркал я её не одну). Выбор пал на StoreOne.
Т.к. на теме я ограничиваться не собрался, естественно сразу создал ей дочку.
Дочерняя тема создается в путем создания папки в wp-content/themes/ с файлом style.css. В общем состав файла(расписывать смысла не вижу, все интуитивно понятно):
/* Theme Name: ecotoys.sergdudko.tk Theme URI: http://ecotoys.by Author: Name Surname Author URI: https://sergdudko.tk/ Description: Дочерняя тема storeone Template: storeone Version: 0.1.0 */ @import url("../storeone/style.css");
последняя строчка импортирует стили из родительской темы. Собственно на этом дочерняя тема уже готова, но она пока ничего не делает. Для начала применим её в админке и попробуем настроить интерфейс штатными средствами.
Собственно штатными средствами я загрузил favicon, логотип, удалил часть лишнего «мусора» и на этом все закончилось. Вот что вышло:
Следующим делом я добавил гугл аналитику и яндекс метрику, подключил комментарии вконтакте(в перспективе работать собирался с ними, т.к. этот вариант другу очень понравился). Для этого в создал function.php в дочерней теме и добавил туда следующий код:
function wptuts_scripts_basic() { wp_register_script( 'google_analytics', 'https://www.googletagmanager.com/gtag/js?id=UA-83723724-2', '', '0.0.1' ); wp_enqueue_script( 'google_analytics' ); wp_register_script( 'google_analytics_my', get_stylesheet_directory_uri() . '/js/g_analytics_my.js', 'google_analytics', '0.0.1' ); wp_enqueue_script( 'google_analytics_my' ); wp_register_script( 'yandex_metrics', get_stylesheet_directory_uri() . '/js/y_metrics.js', '', '0.0.1' ); wp_enqueue_script( 'yandex_metrics' ); wp_register_script( 'vk_comments', 'https://vk.com/js/api/openapi.js?149', '', '0.0.1' ); wp_enqueue_script( 'vk_comments' ); wp_register_script( 'vk_comments_my', get_stylesheet_directory_uri() . '/js/vk_comments.js', 'vk_comments', '0.0.1' ); wp_enqueue_script( 'vk_comments_my' ); } add_action( 'wp_enqueue_scripts', 'wptuts_scripts_basic' ); function delete_junk_from_header() { //remove_action( 'wp_head', 'feed_links', 2 ); // Удаляет ссылки RSS-лент записи и комментариев remove_action( 'wp_head', 'feed_links_extra', 3 ); // Удаляет ссылки RSS-лент категорий и архивов remove_action( 'wp_head', 'rsd_link' ); // Удаляет RSD ссылку для удаленной публикации remove_action( 'wp_head', 'wlwmanifest_link' ); // Удаляет ссылку Windows для Live Writer remove_action( 'wp_head', 'wp_shortlink_wp_head', 10, 0); // Удаляет короткую ссылку remove_action( 'wp_head', 'wp_generator' ); // Удаляет информацию о версии WordPress remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 ); // Удаляет ссылки на предыдущую и следующую статьи // отключение WordPress REST API remove_action( 'wp_head', 'rest_output_link_wp_head' ); remove_action( 'wp_head', 'wp_oembed_add_discovery_links' ); remove_action( 'template_redirect', 'rest_output_link_header', 11, 0 ); } add_filter( 'after_setup_theme', 'delete_junk_from_header' );
Создал папку js, куда добавил три скрипта:
g_analytics_my.js
window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-83723724-2');
vk_comments.js
VK.init({apiId: 6209764, onlyWidgets: true});
y_metrics.js
(function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter46169382 = new Ya.Metrika({ id:46169382, clickmap:true, trackLinks:true, accurateTrackBounce:true }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks");
Яндекс метрика также требует пиксель, поэтому, вспоминая прошлый опыт, решил подменить подвал темы. Тем более я не собирался пиарить автора темы собственными доработками. Т.е. разработчика сайта неплохо бы поменять на себя.
<?php /** * The template for displaying the footer. * * Contains the closing of the #content div and all content after. * * @link https://developer.wordpress.org/themes/basics/template-files/#template-partials * * @package storeone */ ?> </div><!-- #content --> <!-- Footer Start --> <footer class="site-footer footer" role="contentinfo"> <div class="container-fluid footer-widgets"> <div class="container"> <div class="row bgs-footer"> <?php $footer_widget = array( 'name' => esc_html__( 'Footer Widget Area', 'storeone' ), 'id' => 'footer-widget-area', 'description' => esc_html__( 'footer widget area', 'storeone' ), 'before_widget' => '<div id="%1$s" class="col-md-3 col-sm-6 widget footer-widget">', 'after_widget' => '</div>', 'before_title' => '<div class="widget-heading"><h3 class="widget-title">', 'after_title' => '</h3></div>', ); if ( is_active_sidebar( 'footer-widget-area' ) ) { dynamic_sidebar( 'footer-widget-area'); }else{ the_widget('WP_Widget_Calendar', 'title='.esc_attr__('Calendar', 'storeone'), $footer_widget); } ?> </div> </div> </div> <div class="conatainer-fluid footer-bar"> <div class="container"> <div class="col-md-4 col-sm-4 footer-copy"> <p>© <?php echo esc_html(date_i18n(__('Y', 'storeone'))).' '; bloginfo( 'name' ); ?> | <?php printf( esc_html__( 'Create by %1$s', 'storeone' ), '<a href="'.esc_url('mailto:admin@sergdudko.tk').'" rel="designer">Name Surname</a>' ); ?></p> </div> <div class="col-md-8 col-sm-8 footer-right"> <?php storeone_get_social_block(); ?> </div> </div> </div> </footer> <!-- Footer End --> </div><!-- .wrapper --> <head> <div><img src="https://mc.yandex.ru/watch/46169382" style="position:absolute; left:-9999px;" alt="" /></div> </head> <?php wp_footer(); ?> </body> </html>
А заодно сразу подтер лишние блоки внизу. Следующим делом нужно было добавить контакты. В оригинальной теме при добавлении телефона светится Call us, что ни в какие рамки не лезет. Путем некоторого геморроя, я нашел что данный текст задается в функции storeone_settings_control в скрипте inc/customizer.php родительской темы и регистрируется в wp командой add_action(‘customize_register’, ‘storeone_settings_control’). Геморрой заключался всего лишь в поиске по содержимому файлов, чем меня выручил grep в linux, т.е. команда:
grep -iRI "текст" /путь/
У меня принцип по возможности не менять исходники, поэтому я не нашел ничего умнее как подгрузить собственный dudko_customizer.php в function.php моей темы, добавив в последнюю одну строчку:
require 'dudko_customizer.php';
Далее я создал dudko_customizer.php, но тут есть проблема. В php нельзя переопределить функцию, а на нее довольно много ссылок(подменять половину файлов темы не кошерно как-то), я пошел другим путем. В dudko_customizer.php я сначала отменил регистрацию customize_register:
remove_action('customize_register', 'storeone_settings_control');
Далее создал свою функцию storeone_settings_control_dudko с аналогичным составом и зарегистрировал ее как customize_register:
add_action('customize_register', 'storeone_settings_control_dudko');
Убедившись, что все работает добавил такой код(по аналогии с остальными параметрами темы):
$wp_customize->add_setting('storeone_top_phone2', array( 'type' => 'theme_mod', 'capability' => 'edit_theme_options', 'transport' => 'refresh', 'sanitize_callback' => 'sanitize_text_field', )); $wp_customize->add_control('storeone_top_phone2', array( 'type' => 'text', 'priority' => 200, 'section' => 'storeone_contacts_section', 'label' => __('Дмитрий', 'storeone'), )); $wp_customize->add_setting('storeone_top_phone3', array( 'type' => 'theme_mod', 'capability' => 'edit_theme_options', 'transport' => 'refresh', 'sanitize_callback' => 'sanitize_text_field', )); $wp_customize->add_control('storeone_top_phone3', array( 'type' => 'text', 'priority' => 200, 'section' => 'storeone_contacts_section', 'label' => __('Анна', 'storeone'), ));
Переактивировал тему и проверил, что данные параметры доступны в соответствующем разделе(storeone_contacts_section):
Все получилось, можно выпить кофе. Хотя нет, ведь зарегистрировать мало, нужно еще вывести наши «контакты». Вывод происходит в шапке header.php. Значит придется подменить и его. Копирую вышеуказанный скрипт в дочернюю тему и добавляю в класс contact-info такой код(по аналогии):
<?php $top_phone2 = get_theme_mod('storeone_top_phone2'); if(!empty($top_phone2)): ?> <div class="call-info"> <a href="callto:<?php echo esc_attr($top_phone2); ?>" class="info-link call-us-link"><i class="fa fa-phone"></i> <?php esc_html_e('Дмитрий:','storeone'); ?> <?php echo esc_html($top_phone2); ?> </a> </div> <?php endif; ?> <?php $top_phone3 = get_theme_mod('storeone_top_phone3'); if(!empty($top_phone3)): ?> <div class="call-info"> <a href="callto:<?php echo esc_attr($top_phone3); ?>" class="info-link call-us-link"><i class="fa fa-phone"></i> <?php esc_html_e('Анна:','storeone'); ?> <?php echo esc_html($top_phone3); ?> </a> </div> <?php endif; ?>
Переактивировал тему и наши контакты уже отображаются (на всякий случай лучше каждый раз переактивировать, но если изменяется состав файлов, без добавления новых, то должно работать и так).
Фон правда был гадко синий и текст белый. Вот этим я дальше и занялся. В файл style.css внес соответствующие правки цвета:
.header-middle { background-color: #FFFF9F; } .header-topbar { background-color: #67AB2B; } .info-banner .info-link { color: #469400; }
Т.е. меняем цвет шапки на бледно-желтый, цвет верхнего бара(с соцсетями) на зеленый и текст на зеленый.
Вышло примерно так, за исключением кнопки вконтакте (её в теме нет):
Этой кнопочкой далее я и занялся. Указанным выше поиском по содержимому файлов я отыскал, что соцсети регистрируются в уже известной нам функции storeone_settings_control_dudko (теперь уже моей), в нее я добавил соцсеть вконтакте, путем добавления кода(по аналогии):
$wp_customize->add_setting('storeone_social_link_vkontakte', array( 'type' => 'theme_mod', 'capability' => 'edit_theme_options', 'transport' => 'refresh', 'sanitize_callback' => 'storeone_sanitize_url', )); $wp_customize->add_control('storeone_social_link_vkontakte', array( 'type' => 'url', 'priority' => 200, 'section' => 'storeone_socials_section', 'label' => __('VK Page URL', 'storeone'), ));
Сохранил, пошел смотреть, появилось ли поле(как писал выше, переактивировать тему в данном случае не обязательно). Поле появилось:
Теперь нужно вывести нашу соцсеть в список. А вот тут встала загвоздка. Поиск по содержимому выдал мне кучу всего. В итоге я нашел, что вывод списка соцсетей происходит в скрипте inc/function.php. Я создал файл dudko_function.php, сделал на него запрос в корневом function.php:
require 'dudko_function.php';
проверил, все ок. Скопировал содержимое inc/function.php родительской темы в мой dudko_function.php и словил ошибку 500. Все логично, код не валидный. Не валидный, потому что я переопределил функцию, а так делать нельзя. Сменил название функции, но ошибка не прошла. Не знаю кто писал тот говнокод, в котором закрывающие теги расположены в другом файле. В общем путем включения мозга и некоторых экспериментов я выдрал из inc/function.php верхнюю часть, закрыл после } тегом ?>, и добавил(опять же по аналогии туда вк):
<?php /* определяем собственную функцию storeone_get_social_block_dudko, вместо функции родительской темы storeone_get_social_block (см inc/function.php) и добавляем свою by Name Surname PS: там говногод еще тот.*/ function storeone_get_social_block_dudko() { $open_new_tab = (get_theme_mod('storeone_social_new_tab', true)) ? 'target="_blank"' : ''; $link_facebook = get_theme_mod('storeone_social_link_facebook'); $link_google = get_theme_mod('storeone_social_link_google'); $link_youtube = get_theme_mod('storeone_social_link_youtube'); $link_twitter = get_theme_mod('storeone_social_link_twitter'); $link_linkedin = get_theme_mod('storeone_social_link_linkedin'); $link_instagram = get_theme_mod('storeone_social_link_instagram'); $link_vkontakte = get_theme_mod('storeone_social_link_vkontakte'); $is_all_empty = true; ?> <ul class="bgs-social"> <?php if (!empty($link_facebook)): $is_all_empty = false;?> <li><a href="<?php echo esc_url($link_facebook); ?>" <?php echo esc_attr($open_new_tab); ?>><i class="fa fa-facebook"></i></a></li> <?php endif;?> <?php if (!empty($link_google)): $is_all_empty = false;?> <li><a href="<?php echo esc_url($link_google); ?>" <?php echo esc_attr($open_new_tab); ?>><i class="fa fa-google-plus"></i></a></li> <?php endif;?> <?php if (!empty($link_youtube)): $is_all_empty = false;?> <li><a href="<?php echo esc_url($link_youtube); ?>" <?php echo esc_attr($open_new_tab); ?>><i class="fa fa-twitter"></i></a></li> <?php endif;?> <?php if (!empty($link_twitter)): $is_all_empty = false;?> <li><a href="<?php echo esc_url($link_twitter); ?>" <?php echo esc_attr($open_new_tab); ?>><i class="fa fa-youtube"></i></a></li> <?php endif;?> <?php if (!empty($link_instagram)): $is_all_empty = false;?> <li><a href="<?php echo esc_url($link_instagram); ?>" <?php echo esc_attr($open_new_tab); ?>><i class="fa fa-instagram"></i></a></li> <?php endif;?> <?php if (!empty($link_linkedin)): $is_all_empty = false;?> <li><a href="<?php echo esc_url($link_linkedin); ?>" <?php echo esc_attr($open_new_tab); ?>><i class="fa fa-linkedin"></i></a></li> <?php endif;?> <?php if (!empty($link_vkontakte)): $is_all_empty = false;?> <li><a href="<?php echo esc_url($link_vkontakte); ?>" <?php echo esc_attr($open_new_tab); ?>><i class="fa fa-vkontakte"></i></a></li> <?php endif;?> <?php if ($is_all_empty && current_user_can('edit_theme_options')): ?> <li class="empty-slinks"><a href="<?php echo esc_url(admin_url('customize.php')); ?>" target="_blank"><i class="fa fa-info"></i> <?php esc_html_e('Add/Edit Social Links in Customizer', 'storeone');?> </a> </li> <?php endif;?> </ul> <?php } ?>
Проверил и поймал что ошибки 500 уже нет, но ничего не изменилось. Вспомнил, где лопухнулся (я же изменил наименование функции, соответственно нужно изменить и её вызов). Опять же поиском по содержимому нашел что она вызвается в footer.php и header.php. Тем лучше, новых подмен файлов делать не нужно. В них и поменял storeone_get_social_block() на storeone_get_social_block_dudko().
Проверил, вроде заработало. Вот только у вк — пустой белый квадрат (прям как конкурс у дизайнеров xD). Опять же поископ по файлам я нашел, что символы соцсетей определяются в css/font-awesome.css, а сам шрифт в fonts/FontAwesome.otf. Пришлось его скачать и заинсталлить на комп. Нашел значек вк U+F189. По аналогии с css/font-awesome.css описал класс в моем style.css:
.fa-vkontakte:before { content: "\f189"; } .fa-vkontakte-square:before { content: "\f189"; }
И увидел наконец нормальный значок вконтакте. В связи с тем, что интернет-магазин пока не актуален, а даже если и будет — количество номенклатуры минимально, то функция поиска на сайте явно лишняя. Поэтому закомментируем её в нашем header.php. Чтобы при необходимости поиск можно было включить, закомментировал только вызов соответствующей функции:
<div class="col-md-6 search-container"> <?php /* if(storeone_is_wc()){ get_template_part('searchform-product'); }else{ get_search_form(); } */ ?> </div>
Итак, шапка готова:
Далее решил заняться слайдером, для чего пошел переводить официальную документацию. Собственно как обычно, ничего не соответствует. Более того слайдер через интерфейс в принципе не возможно было поменять, пока не установил плагин StoreOne Extension. Вот после установки плагина в интерфейсе появились недостающие плюшки:
Добавил слайд в Home slide, но ничего не изменилось. Прошелся по Shop и Blog, они пустые. Интересный расклад. В меню, описанном в документации вообще такой ссылки нет. Методом тыка обнаружил, что на главное все же слайдер блога. А заодно выключил слайдер в магазине.
Немного работы в фотошопе и слайдер готов:
Правда есть одно но, кнопки не вписываются в концепцию дизайна, нужно сменить их стиль. Что ж, не беда — вернемся к style.css:
.owl-next, .owl-prev { background-color: #469400; } .owl-dot { background: #469400; }
Ну и текста слишком много, убавил:
Прикинул и пришел к выводу, что от правого меню нужно избавится. Если просто удалить все элементы, то тема выводит стандартные компоненты wordpress(типа календаря, архивов и т.д.), мне это не нужно. Чтобы избавится от него, создам в моей теме пустой скрипт sidebar.php, он затрет аналогичный в теме родителя (там ничего важного нет). Хотя сайдбар исчез, наш слайдер не стал шире. Путем очередного геморроя с поиском по тексту всех теоретически возможных классов и айдишников нашел, что сайдбар задается в css/bootstrap.css (как и размер слайдера). Поэтому внесем в наш style.css поправочку:
.col-md-9 { width: 100%; }
Для класса сайдбара .col-md-3 вносить изменения не нужно (выяснено опытным путем), т.к. данному классу принадлежит еще пару объектов, а наш даже не создается.
Теперь исправим цвет верхнего меню на тот, что бы соответствовал общей концепции, для чего добавим в style.css:
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover { color: #fff; background-color: #469400; }
По той же причине поменяем цвета в подвале:
.site-footer.footer { background-color: #FFFF9F; } .site-footer .footer-bar { background-color: #469400; }
Далее установил модуль WooCommerce для интернет магазина, в итоге получил что-то вроде этого:
Добавил страничку «Как к нам доехать?» с кодом:
<iframe id="maps_for_tradepoint_page" style="border: 0;overflow:hidden;" src="/wp-content/themes/by_dudko/maps.php" width="100%" height="700" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
Которая вытягивает в фрейм страницу maps.php из каталога с моей темой. А в сам maps.php прописал фрейм на гугмапс:
<?php require "../../../wp-config.php"; $transfer = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME); if ($transfer->connect_errno) { header("Content-type: text/txt; charset=UTF-8"); echo "Не удалось подключиться к MySQL:".$transfer->connect_error; exit; } $transfer->query("SET NAMES ".DB_CHARSET); $result = $transfer->query("SELECT * FROM `wp_ecotoysoptions` WHERE `option_name` = 'woocommerce_store_city' OR `option_name` = 'woocommerce_store_address'"); while($row = $result->fetch_assoc()){ $myarray[$row['option_name']] = $row['option_value']; } $result->close; $transfer->close; $apimaps = 'AIzaSyCG7cagKQdesDFFD5sdfsfYpYM7sj_XM7-Xc11Ez6wk'; //api key для google maps embed $address = 'Республика Беларусь, '.$myarray['woocommerce_store_city'].', '.$myarray['woocommerce_store_address']; //адрес для определения по карте ?> <?php echo '<iframe id="maps_for_tradepoint_page" style="border: 0;border-radius: 10px;overflow:hidden;" src="https://www.google.com/maps/embed/v1/place?key='.$apimaps.'&q='.urlencode($address).'"" frameborder="0" width="100%" height="680" allowfullscreen="allowfullscreen"></iframe>'; ?>
Для автоматизации приклеил данные из БД woocommerce (строка город и адрес1).
Установил плагин галереи «NextGEN Галерея» и создал страничку с описанием, что же такое бизиборд и галереей. Упорядочил остальные страницы:
И тут я решил, что пора бы отдохнуть… а то кодить с 12:00 до 2:00, т.е. 14 часов с перерывами(сюда же включим время написания этой статьи), как-то напряжно:-)
На свежую голову решил, что страничка блога то нам и не нужна и переназначил главную на страницу магазина:
И переместил слайдер в раздел магазин (предварительно включив его там) :
Продолжим, кнопочка «добавить в корзину у нас не того цвета, заменим его в style.css (вообще я поменял весь этот цвет в классах связанных с woocommerce в родительском style.css):
.woocommerce .add_to_cart_button { background-color: #469400 !important; } .woocommerce ul.products li.product .onsale { color: #469400; } .woocommerce .cart .button, .woocommerce a.button.alt { background-color: #469400 !important; } .woocommerce .widget_price_filter .ui-slider .ui-slider-range { background-color: #469400; } .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button { background-color: #469400; } .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover { background-color: #469400; } .woocommerce div.product .woocommerce-tabs ul.tabs li.active { background-color: #469400; border: 1px solid #469400; }
Кнопки поменялись, сам текст я решил что пойдет и синим:
Собственно поменялись они практически везде:
Однако, вот эта синяя полоска меня эстетически смущала.
Нашел в коде её цвет, однако почему-то поиск по файлам результата не дал:
Логичный вывод, что полоска эта тянется не из темы, увеличил диапазон поиска и нашел кучу всего в файле
/plugins/woocommerce/assets/css/woocommerce.css, изъял нужный класс .woocommerce-info:
И попробовал подменить его в style.css:
.woocommerce-info{ border-top-color:#469400; } .woocommerce-info::before{ color:#469400; }
Желаемый результат был достигнут (заодно сменил цвет значка под полоской):
По аналогии поступил с остальными классами. Прошелся по всем страничкам и нашел еще косячок в дизайне тут:
Поправил его:
.cart-btn { border: 1px solid #469400; border-bottom: 2px solid #469400; color: #469400; } .sweep-to-right:before, .sweep-to-left:before { background: #469400; }
А потом решил поменять заодно и цвет текста. Параллельно словил еще аналогичные косячки в «оценке товара» и меню(которое видно только на узком экране, это тоже поправил:
a, a:hover, a:focus { color: #469400; } .menu .dropdown-menu { border-top: 1px solid #469400; } .navbar-default .navbar-toggle{ border-color: #469400; } .navbar-default .navbar-toggle .icon-bar{ background-color: #469400; }
Ну вот теперь с цветами вроде бы все ок. Остались еще косяки с переводом в трех местах (вроде как):
— домашняя страничка не красиво называется
— итого на корзине, да и сам значок корзины унылый
— в самой корзине
Для начала сделал красивую корзинку, для чего в style.css добавил:
.fa-shopping-cart:before{ color:#469400; } .mini-item-count { background-color:#FFFF9F; color:#469400; } .mini-cart-total{ color:#ec0c0c; } .mini-cart-title{ color:#469400; } .woocommerce-mini-cart__total{ color:#469400; }
Вот результат:
Проверил сайт с мобилки и понял, что слайдер темы абсолютно не оптимизирован, да и не нужен. Решил его отключить для мобильных девайсов. Для этого скопировал woocommerce.php (скрипт страницы магазина) в свою тему и там было условие вывода слайдера:
if(is_shop() && !is_search()){ get_template_part('template-parts/slider-shop'); }
Я добавил к нему стандартную зацепку wordpress на проверку мобильных девайсов:
if(is_shop() && !is_search() && !wp_is_mobile()){ get_template_part('template-parts/slider-shop'); }
Результат был очевидным, с мобильного слайдер не загружался (как и весь блок). Однако плыли товары:
Чтобы исправить ситуацию добавил в уже созданный woocommerce.php уменьшение данной кнопки до 75% для мобильных девайсов:
if(wp_is_mobile()){ echo '<head><style type="text/css"> .add_to_cart_button{ -webkit-transform-origin: 0px 0px; -moz-transform-origin: 0px 0px; -ms-transform-origin: 0px 0px; -o-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform:scale(0.75); -moz-transform:scale(0.75); -ms-transform:scale(0.75); -o-transform:scale(0.75); transform:scale(0.75) } </style></head>'; }
А вот и результат:
Сам перевод лежит в /wp-content/languages/plugins/woocommerce-ru_RU.mo , он компилируется программой из .po файла. Компилятор можно скачать например тут: http://www.poedit.net/download.php. Po-файл лежит рядом /wp-content/languages/plugins/woocommerce-ru_RU.po.
Пока разбирался нашел еще косяк перевода:
На всякий случай решил настроить бэкап через плагин BackWPup, проверенный мной на этом самом блоге. Настройки не особо юзер френдли, но работает отлично. Сделал бэкап. Теперь вроде бы все, можно заняться переводом. Скачал файл woocommerce-ru_RU.po , отредактировал, но ничего не заработало. Точнее увидел по части текста глюк в виде нескольких секунд отображения нужного текста, а потом смена языка, часть же текста и вовсе не перевелась. Методом тыка нашел еще одну локализацию в теме /wp-content/themes/storeone/languages/fr_FR.po, но русского то там нет. попробовал залить файл с парой наименований на русском и они таки заработали. Видимо придется переводить всю локализацию. Поматерился русским народным, ведь там тысяча строк. НО красота требует жертв, заодно подтяну английский, который не никогда не изучал. Скачал fr_FR.po, нагуглил сайт https://localise.biz/free/poeditor и откорректировал локализацию, там же скачал сразу скомпилированный mo-файл. Переименовал fr_FR.po в ru_RU.po (ну и mo по аналогии). Залил в тему родителя. Вроде заработало. Попробовал залить в мою тему, ничего не работает. решил сделать лайфхак на php. В дочерней теме в созданной папке languages залито 2 файла ru_RU.po и ru_RU.mo, при открытии страницы запускается файл function.php, добавил туда проверку на существование этих локализаций в теме родителя и, если локализаций нет — копирование из дочерней темы в родительскую:
function copy_localization($filename){ if(!file_exists( get_theme_root().'/storeone/languages/'.$filename)){ copy(get_theme_root().'/by_dudko/languages/'.$filename, get_theme_root().'/storeone/languages/'.$filename); return; } return; } copy_localization('ru_RU.po'); copy_localization('ru_RU.mo');
Результатом остался доволен, перевел не только пользовательский интерфейс:
Но и большую часть административного:
Осталось закинуть screenshot.png в нашу тему, чтобы она в интерфейсе выглядела красиво, для чего сделал скрин (4х3) и задал ему соответствующее название:
Вид темы после заливки скриншота:
Ну и вот результат:
Основная настройка закончена, остальное останется в рамках конфиденциальности.