Кошерная кастомизация wordpress или нехрен лезть в чужие исходники.

Началось все с того что я заинсталил wordpress некошерным образом. Ну в смысле скачал исходники с wordpress.org, залил по ftp хостеру через WinSCP, через него же выставил права на запись и выполнение(оказывается права на выполнение у 000webhost.com не обязательное требование), настроил MySQL и собственно заинсталил. Можно было конечно просто с веб-интерфейса хостера сделать пару кликов, но так ведь не интересно.

Т.к. с вордпрессом не работал, решил начать с визуальной настройки. Установил тему, установил плагин для бэкапа(если вы не первый день в it, то без бэкапа никуда нельзя).
Прошелся по стандартным настройкам темы, сделал под себя.
Что не устроило сразу: хотелось отчетов в гугл аналитику и яндекс метрику, не долго думая в корне вордпресса нашел index.php(с пониманием того, что при обновлении все придется руками переделывать) забомбил туда соответствующие коды(берутся полностью с гугла и яндекса соответственно и вставляются копипастом), все ок — отчеты пошли.
Следующим делом обнаружил отсутствие favicon, все в тот же index.php добавил соответствующий линк:

<link rel="icon" href="favicon.ico" type="image/x-icon" />

Иконка сайта появилась. К концу статьи я ее через визуальный интерфейс переустановил.

Написал первую статью и опять проблема, картинка в статье маловата, при создании линка тупо открывается jpeg файл. Можно конечно поискать плагин, но это не наш путь
нагуглил решение, по нему и сделал, с той лишь разницей что footer.php и style.css был изменен в теме. Ну и не нашел я атрибутов в загрузчике картинок, пришлось руками добавлять атрибут rel=»simplebox».
Картинки заработали.

Следующим шагом было то, что мне в этом самом подвале(footer.php) не понравилась реклама темы и wordpress. Я лишнее стер и добавил свое, в footer.php темы. На этом этапе я решил по-максимум мучить исходники темы и поминимум исходники ядра.

Далее мне не понравились комментарии в wordpresse. Точнее сказать что в блоге, который не особо популярен никто регистрироваться и писать не будет, а разрешить комментарии вообще от всех — так себе идея.Я решил привязать комментарии vk. для этого понадобилось внести корректировку в index.php в корне wordpress(а именно добавить два скрипта):

<script type="text/javascript" src="https://vk.com/js/api/openapi.js?149"></script>
<script language="JavaScript">
    VK.init({apiId: ********, onlyWidgets: true});
</script>

И отредактировать файл comments.php в папке с темой под себя:

<br>
<div id="comments" class="comments-area">
 
 <!-- Put this div tag to the place, where the Comments block will be -->
<div id="vk_comments"></div>
<script type="text/javascript">
VK.Widgets.Comments("vk_comments", {limit: 20, attach: "*"});
</script>
 
</div><!-- #comments -->

Комментарии заработали

Далее мне не понравилось что слишком много места занимают исходники, решил спрятать их под спойлер. Подключил jquery и закинул js в index.php(в корне wordpress) скрипт:

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.spoiler-body').hide()
            jQuery('.spoiler-head').click(function(){
              jQuery(this).toggleClass("folded").toggleClass("unfolded").next().toggle()
        })
    });
</script>

Добавил в style.css:

.spoiler-wrap {
	border: 1px solid #3b6d3d;
	background: #e9ffd0;
}
.spoiler-head {
	margin-left: 5px;
	padding: 5px 15px;
	font-size: 12px;
	line-height: 25px;
	cursor: pointer;
}
.folded {
	display: block;
	padding-left: 15px;
	background: url(images/plus.gif) no-repeat left center;
}
.unfolded {
	display: block;
	padding-left: 15px;
	background: url(images/minus.gif) no-repeat left center;
}
.spoiler-body {
	padding: 5px;
	border-top: 1px solid #3b6d3d;
	background: #f4fef3;
}

И в functions.php темы добавил:

function hyper_spoiler($atts, $content) {
	if (!isset($atts["name"])) {$sp_name = 'Показать';}
	else {$sp_name = $atts["name"];}
	return '<div class="spoiler-wrap">
		<div class="spoiler-head folded">'.$sp_name.'</div>
		<div class="spoiler-body">'.$content.'</div>
	</div>';
}
add_shortcode('spoiler', 'hyper_spoiler');

Проверил теги [spoiler][/spoiler] заработали.

Меня все же дико смущало то что уже и ядро покоцано мной(index.php, всякие папки и файлы в корне) и тема. к тому же тема предложила обновить версию. Решил я с этим разобраться. Погуглив немного нашел десяток мануалов как создать тему(ни о чем собственно, т.к. создавать ее я не собирался), пару полезных и вот что собрал по крупицам:
Для создания темы(потомка) на основе другой темы(родителя, ооп во всей красе) необходимо создать папку с любым названием в каталоге /wp-content/themes/, в созданной папке создать style.css с обязательным содержимым:

/*
Theme Name: здесь имя темы
Theme URI: здесь урл(любой)
Author: Siarhei Dudko
Author URI: https://sergdudko.tk/
Description: описание
Template: название папки с темой родителем
Version: версия
*/

В нашей папке файлы с одинаковыми именами(такими же как у темы родителя) замещают файлы темы родителя. При этом файлы из нашей темы(потомка) будут загружены в первую очередь(это имеет огромное значение при работе скриптов, которые могут просто не увидеть соответствующий класс в DOM). Также стоит отметить, что замещаются не все файлы, не замещается functions.php(сначала загружается наш, затем темы родителя. Т.о. мы можем дополнить функции, но при совпадении имен они могут быть переопределены темой родителя, если там не добавлена соответствующая проверка на существование).
Т.к. style.css полностью заменит соответствующий файл темы родителя, то нужно либо скопировать из него нужные строки, либо импортировать его строкой в нашем css файле:

@import url("../папка_темы_родителя/style.css");

и далее дополнить нашими css.

Итак, я создал style.css с описанием темы и строкой импорта. наша тема уже отобразится в консоли администрирования: внешний вид/темы. Она будет не красивая, т.к. без скрина. Чтобы добавить ей изображение нужно в корень нашей темы(потомка) добавить изображение screenshot.png, после чего оно появится и в консоли администрирования.

Далее я перенес из темы родителя(туда вернул старые) файлы foother.php и comments.php как полностью заменяемые. В файл functions.php(темы потомка, родителю вернул старую версию) я добавил:

function hyper_spoiler($atts, $content) {
	if (isset($atts) && isset($atts["name"])) {$sp_name = $atts["name"];}
	else {$sp_name = 'Показать';}
	return '<div class="spoiler-wrap">
		<div class="spoiler-head folded">'.$sp_name.'</div>
		<div class="spoiler-body">'.$content.'</div>
	</div>';
}
add_shortcode('spoiler', 'hyper_spoiler');

Естественно после этого, ни спойлер, ни комментарии вк не заработали. Много погуглив я нашел как подключаются скрипты к wordpress, в файле functions.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' );
 
    wp_register_script( 'jquery', '/wp-includes/js/jquery/jquery.js', '', '0.0.1' );  
    wp_enqueue_script( 'jquery' );
 
    wp_register_script( 'spoiler', get_stylesheet_directory_uri() . '/js/spoiler.js', '', '0.0.1' );  
    wp_enqueue_script( 'spoiler' );
 
    wp_register_script( 'simplebox', get_stylesheet_directory_uri() . '/js/simplebox_util.js', '', '0.0.1' );  
    wp_enqueue_script( 'simplebox' );
 
    wp_register_script( 'simplebox_my', get_stylesheet_directory_uri() . '/js/simplebox_my.js', '', '0.0.1', true );  
    wp_enqueue_script( 'simplebox_my' );
 
}  
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_basic' );

где скрипт регистрируется строкой:

wp_register_script( $handle, $src, $deps, $ver, $in_footer );

и добавляется в очередь:

wp_enqueue_script( 'custom-script' );

$handle — ее вы будете использовать для того, чтобы ссылаться на этот конкретный скрипт, когда вам нужно будет добавить его в очередь, и вам нужно вставлять эту переменную в самом конце.
$src — путь к исходному файлу вашего плагина или темы.
$deps — массив, который включает $handle для всех скриптов, которые могут понадобиться вашему скрипту (то есть, зависимости).
$ver — номер версии вашего скрипта, которая может быть использована для уничтожения кэша. По умолчанию, WordPress будет использовать свою версию в качестве версии вашего скрипта.
$in_footer — вы хотите, чтобы ваш скрипт загружался в подвале? Установите значение этой переменной true или false. По умолчанию оно установлено в false, так что скрипт загружается в шапке, где wp_head(), а если вы укажете true, скрипт будет загружаться в подвале, где в теме указан wp_footer().

при этом
plugins_url(…) — выведет ссылку до директории плагина,
get_template_directory_uri() — выведет ссылку до директории родительской темы
get_stylesheet_directory_uri() — выведет ссылку до директории нашей темы(потомка)

Пришлось правда засунуть все скрипты в файлы(исключив из текста index.php).

Гугл аналитика завелась, спойлер заработал, комментарии вк тоже. А вот яндекс метрика и увеличение картинки — нет. Да, кстати, при каждом обновлении файлов крайне рекомендую переключаться на другую тему, а потом снова на вашу.

Яндекс метрика не заработала в силу того, что нужен «пиксель», его я добавил в foother.php(т.к. он полностью заменяет родительский):

<head>
   <div><img src="https://mc.yandex.ru/watch/46169382" style="position:absolute;left:-9999px;" alt="" /></div>
</head>

После чего аналитика заработала.

Естественно нужно проверить все пути к файлам. Тут и был затык(кстати, если меняли или перемещали относительна корневого каталога и другие файлы — может быть и еще пара косяков с путями в css), simplebox имеет в своем коде две ссылки, привожу уже исправленный вариант:

(function (){
var boxes=[],els,i,l;
if (document.querySelectorAll){
els=document.querySelectorAll ('a[rel=simplebox]');
Box.getStyles ('simplebox_css', window.location.origin + '/wp-content/themes/blogsergdudkotk/css/simplebox.css');
Box.getScripts ('simplebox_js', window.location.origin + '/wp-content/themes/blogsergdudkotk/js/simplebox.js',function (){
simplebox.init ();
for (i=0,l=els.length;i<l;++i)
simplebox.start (els[i]);
simplebox.start ('a[rel=simplebox_group]');
});
}
})();

Проблема собственно в том, чтобы определить эти пути. А определены они должны быть не относительно, т.к. javascript работает на стороне браузера(а здесь относительные ссылки неприемлимы, если у вас больше чем 1 страница).

Ну и разобравшись с favicon, я просто добавил ее через веб-интерфейс.

В итоге я получил дочернюю тему, при этом файлы ядра остались неизменными(поддержка полного функционала и обновления wordpress), а также неизменными остались файлы родительской темы(поддержка обновления темы родителя). С чего собственно и стоило начинать, чтобы не создавать себе работу. Обновил тему родителя, все осталось работать в штатном режиме.