Переключатель стилей JavaScript в Wordpress

Я пытаюсь реализовать простой переключатель стиля на основе Toggle в Wordpress. Решение изначально было написано для HTML. Это можно найти здесь.

Необходимые файлы.js можно найти там. Посмотрите на комментарии Vitch ниже, чтобы исправить одну ошибку в файле 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, между концом "head" и началом "body":

<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>

РЕЗУЛЬТАТ: Это работает сейчас, благодаря Vitch и David.

URL страницы: http://thiscouldbeparadise.org/change/

"Режим фокуса" должен переключать доступные таблицы стилей.

Источник

2 ответа

Решение

Я посмотрел ваш URL и думаю, что вижу проблему...

Попробуйте изменить строку 25 кода стиля переключателя с:

$('link[@rel*=style][title]')

Для того, чтобы:

$('link[rel*=style][title]')

Я думаю, что @ больше не требуется в последних версиях jQuery и может вызывать проблемы (я написал код переключения стилей, но это было много лет назад, и с тех пор jQuery сильно изменился). Дайте мне знать, когда вы обновите свой URL, и, если необходимо, я обновлю свою копию сценария, чтобы другие люди не столкнулись с той же проблемой...

Я также заметил, что на вашей странице я не вижу две таблицы стилей ("по умолчанию" и "контраст"), которые вы пытались добавить. Проверьте, правильно ли вы добавляете их на страницу...

Источник

У вас ошибка в скриптах wp_enqueue

wp_enqueue_script('stylesheetToggle.js');

должно быть

wp_enqueue_script('stylesheetToggle');

также файл, который вы загружаете, не должен находиться в состоянии конфликта jquery, простейший способ сделать это - заменить каждый символ $ словом jQuery в ваших файлах (2 файла, которые вы ставите в очередь).

Также проверьте правильность пути к вашей теме и т. Д.

Также проверьте js-файлы с помощью jsfiddle, у него есть удобная кнопка подсказки (в коде js нет php-переменных, чтобы это работало).

Отпишитесь, если у вас все еще есть проблемы.

Источник
Другие вопросы по тегам