Я пытаюсь реализовать простой переключатель стилей на основе Toggle в Wordpress. Решение изначально было написано для HTML. Его можно найти здесь.
Там можно найти необходимые файлы .js. Посмотрите комментарии Витча ниже, чтобы исправить одну ошибку в файле stylesheetToggle.js.
Это дает простую текстовую ссылку, которую я могу поместить в свой шаблон, которая переключается между двумя таблицами стилей без обновления страницы и связана с файлом cookie, который запоминает выбор пользователя, если он переходит в другое место на сайте.
Это то, что у меня есть до сих пор (извините, я собираю это вместе из того, что я могу узнать, читая множество попыток создать переключатель стилей).
Все файлы находятся в корне папки моей темы, для простоты.
Я добавил это в свой functions.php:
function wpb_adding_scripts() {
wp_register_script('stylesheetToggle', get_template_directory_uri() . '/stylesheetToggle.js', array('jquery'),'1.1', false);
wp_enqueue_script('stylesheetToggle');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
function wpb_adding_styles() {
wp_register_style('contrast', get_stylesheet_directory_uri() . '/contrast.css');
wp_enqueue_style('contrast');
wp_register_style('white', get_stylesheet_directory_uri() . '/style.css');
wp_enqueue_style('white');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
Затем в своем index.php я добавил (вверху, над get_header(); ?>):
<?php wp_enqueue_script("stylesheetToggle"); ?>
В моем header.php я добавил:
<link rel="stylesheet" type="text/css" href=" ... /style.css" title="white">
<link rel="alternate stylesheet" type="text/css" href=" ... /contrast.css" title="contrast">
<?php wp_enqueue_script("stylesheetToggle"); ?>
ПРИМЕЧАНИЕ. URL-адреса таблиц стилей должны быть абсолютными путями.
Это также входит в header.php, между концом «головы» и началом «тела»:
<script>
jQuery.noConflict();
jQuery(document).ready(function($) {
$(function()
{
// Call stylesheet init so that all stylesheet changing functions
// will work.
$.stylesheetInit();
// This code loops through the stylesheets when you click the link with
// an ID of "toggler" below.
$('#toggler').bind(
'click',
function(e)
{
$.stylesheetToggle();
return false;
}
);
// When one of the styleswitch links is clicked then switch the stylesheet to
// the one matching the value of that links rel attribute.
$('.styleswitch').bind(
'click',
function(e)
{
$.stylesheetSwitch(this.getAttribute('rel'));
return false;
}
);
}
);
});
</script>
В моем соответствующем файле шаблона я добавил:
<a href="#" id="toggler">Focus mode</a>
РЕЗУЛЬТАТ: теперь это работает благодаря Витчу и Дэвиду.
URL страницы: http://thiscouldbeparadise.org/change/
«Режим фокусировки» должен переключать доступные таблицы стилей.
