Настройка плагинов jQuery через WordPress Admin

14 января 2018

Этот учебник нацелен на то, чтобы предоставить разработчикам jQuery возможности для разработчиков WordPress.

Построение тем WordPress - это само по себе, это дополнительный слой для работы с веб-дизайнерами. В самом деле, это также верно, получение основ из CMS (title, the_content, the_excerpt и т. Д.) Означает, что вы являетесь разработчиком темы WordPress.

Если вы создаете темы WordPress, это может стать обычным делом открывать файлы тем в редакторе кода и вносить изменения, однако это может быть связано с доступом к вашей рабочей машине и файлам сайта для достижения самых быстрых результатов.

Разрешение конфигурации параметров плагина jQuery в wp-admin просто имеет смысл в моем мире. Очень похоже на то, что вы можете настроить тематические логотипы и заголовки страниц.

В этом учебном пособии будет использоваться Framework Options из WPTheming для создания страницы параметров темы. На странице параметров будут представлены любые доступные настройки (в плагине jQuery), которые мы предоставляем.

Хотя для этого примера было выбрано 3 плагина, а именно: всплывающая подсказка, Sea of ​​Clouds (Twitter) и FlexSlider от WooThemes, это могут быть любые плагины, которые вы используете больше всего.

В сочетании с WordPress было бы так же просто, как включение нескольких фрагментов и файлов в будущие темы, которые вы разрабатываете, чтобы иметь достаточно гранулированный уровень конфигурации с элементами, поддерживаемыми jQuery.


Терминология

Plugin - это относится к плагину jQuery, а не к WordPressnSettings. Это относится к возможным конфигурациям, доступным для автора плагина jQuery. например Twitter username.nOptions - это параметры, которые мы создаем с помощью опций Framework.


Downloads

Options FrameworknSea of ​​Clouds - TwitternTooltipsynFlexSlider


Документация, предоставленная соответствующими авторами

Options FrameworknSea of ​​Clouds - TwitternTooltipsynFlexSlider


Step 1 Тематический каталог и структура файла

Давайте продолжим и создадим голые кости нашей темы. Файлы, необходимые для этого руководства, перечислены ниже.

footer.phpnfunctions.phpnheader.phpnindex.phpnsidebar.phpnstyle.cssninc register.scripts.phpninc options.tooltipsy.phpninc options.tweets.phpninc options.flexslider.phpninc js jquery.flexslider.jsninc js jquery.tooltipsy.jsninc js jquery.tweet. jsnjquery (Ships with WordPress) inc img массив образцовых изображений * 1ninc options-framework * 2

* 1 - Обозначает образцы изображений, используемые для этого учебника, как показано в Twenty Eleven.

* 2 - Обозначает файлы в рамках Framework.


Step 2 Разметка темы

header.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title><?php bloginfo('name'); ?><?php wp_title() ?></title>
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url') ?>" media="all" />
    <?php wp_head(); ?>
</head>
<body>
<div class="container">  
    <header>
        <div class="site-meta">
            <h1>
                <a href="<?php bloginfo('home'); ?>"><?php bloginfo('name'); ?></a>
                <span><?php bloginfo('description'); ?></span>
            </h1>
        </div>
        <div class="flexslider">
            <ul class="slides">
                <li><img src="<?php bloginfo('template_directory'); ?>/inc/img/slide-1.jpg" alt="Slide 1" /></li>
                <li><img src="<?php bloginfo('template_directory'); ?>/inc/img/slide-2.jpg" alt="Slide 2" /></li>
                <li><img src="<?php bloginfo('template_directory'); ?>/inc/img/slide-3.jpg" alt="Slide 3" /></li>
                <li><img src="<?php bloginfo('template_directory'); ?>/inc/img/slide-4.jpg" alt="Slide 4" /></li>
                <li><img src="<?php bloginfo('template_directory'); ?>/inc/img/slide-5.jpg" alt="Slide 5" /></li>
            </ul>
        </div>
    </header>

Это очень простой файл header.php, на самом деле это 3 точки интереса.

Line 6 - таблица стилей, которую мы будем использовать для базового макета и стилей плагина jQuery. Line 7 - нам нужно вызвать wp_head (); разрешить WordPress вносить jQuery.Line 18 - Базовая разметка, необходимая для FlexSlider.

footer.php

</div>
<!-- END CONTAINER -->
<?php wp_footer(); ?>
<script>
</script>
</body>
</html>

Мы собираемся зарегистрировать 3 файла плагина jQuery позже с помощью WordPress, wp_footer (); требуется для вывода.

Между тегами скриптов мы будем инициализировать плагины с любыми дополнительными настройками.

sidebar.php

<aside>
    <h3>Tweets</h3>
    <div class="tweets">     
    </div>
</aside>

Строка 3 - для плагина Tweets требуется div с классом «твитов».

index.php

<?php get_header(); ?>
    <section>
        <?php if(have_posts()) : while(have_posts()) :  the_post(); ?>       
            <h2><a href="<?php the_permalink(); ?>" class="tooltip" title="Click to read this article"><?php the_title(); ?></a></h2>
            <?php the_content(); ?>
        <?php endwhile; else : ?>
            <p>No posts yet.</p>
        <?php endif; ?>
    </section>
    <?php get_sidebar(); ?>
<?php get_footer(); ?>

Наконец, мы используем index.php, чтобы объединить наши файлы, чтобы иметь всеобъемлющую, но функциональную тему.

Line 1 - Мы используем get_header ();. Line 3 - Мы используем «Loop WordPress».Line 10 - Мы используем get_sidebar ();. Line 11 - Мы используем get_footer ();.

Вышеуказанные строки должны быть супер знакомым разработчикам темы, если вы ничего не знаете об этой удаче с вашим путешествием. WordPress - это человек!


Step 3 Стиль

style.css

/*
Theme Name: Options Framework Example
Theme URI: http://wp.tutsplus.com
Description: Child theme to illustrate how to use the Options Framework with any jQuery plugins in your theme.
Version: 1.0
*/
* {
    margin: 0;
    padding: 0;
    list-style: none;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 18px;
    margin: 20px;
}
a {
    color: #1c63cb;
    text-decoration: none;
}
h2, h3 {
    margin: 0 0 10px 0;
}
.container {
    max-width: 960px;
    margin: 0 auto;
}
header {
    overflow: hidden;
    margin: 0 0 20px 0;
}
header div.site-meta {
    margin: 0 0 20px 0;
}
header div.site-meta h1 a {
    font-size: 18px;
}
header div.site-meta h1 span {
    font-size: 12px;
    display: block;
}
section {
    width: 70%;
    float: left;
}
aside {
    width: 30%;
    float: right;
}

Стили, созданные выше, были созданы для размещения заголовков, боковой панели и основных областей содержимого на странице.

Линии 2, 3, 4 и 5 рассказывают WordPress о нашей теме.

div.flexslider {
    position: relative;
    height: 276px;
}
ul.slides li {
    display: none;
}
ul.slides li {
    display: none;
}
ul.slides li img {
    max-width: 100%;
    display: block;
}
ul.flex-direction-nav li a {
    position: absolute;
    bottom: 10px;
    z-index: 10;
    padding: 5px;
    background: #FFF;
}
ul.flex-direction-nav li a.prev {
    left: 10px;
}
ul.flex-direction-nav li a.next {
    right: 10px;
}
ol.flex-control-nav {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    text-align: center;
}
ol.flex-control-nav li {
    display: inline-block;
    margin: 0 1px;
}
ol.flex-control-nav li a {
    padding: 5px;
    background: #FFF;
    display: block;
    cursor: pointer;
}
ol.flex-control-nav li a.active {
    color: #ed4b48;
}
div.flex-pauseplay {
    position: absolute;
    top: 10px;
    right: 10px;
    text-align: center;
}
div.flex-pauseplay span.pause, div.flex-pauseplay span.play {
    padding: 5px;
    background: #FFF;
    display: block;
    cursor: pointer;
}

Некоторые стили для FlexSlider. Очень минимальный.

ul.tweet_list li {
    border: 1px solid #CCC;
    margin: 0 0 5px 0;
    padding: 5px;
    overflow: hidden;
}
ul.tweet_list li a.tweet_avatar {
    float: left;
    margin: 0 5px 5px 0;
}
ul.tweet_list li a.tweet_avatar img {
    padding: 4px;
    background: #EEE;
    border: 1px solid #CCC;
}

В соответствии с минимальным стилем для потока Twitter.

.tooltipsy {
    padding: 5px;
    background: #333;
    color: #FFF;
    border: 1px solid #111;
    -webkit-box-shadow: 0 0 5px #000;
}

Наконец, стиль всплывающей подсказки.


Контрольная точка и что дальше

К этому моменту мы собрали очень основную тему WordPress, чтобы проиллюстрировать доказательство концепции с тремя выбранными плагинами jQuery.

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

Кроме того, мы настроим Framework Framework для работы с темой, используя функции functions.php. 3 массива будут созданы для хранения любых настроек, которые каждый плагин будет поставлять с тем, что мы выбираем для обеспечения доступности (например, функции обратного вызова - это то, что может быть лучше всего использовано в файлах темы и не генерируется динамически, если вы не хотите писать jQuery в wp-admin!).

Эти массивы будут повторяться вместе с соглашениями Framework Framework, чтобы принести любые параметры плагина на страницу параметров темы.


Step 4 inc register.scripts.php

function px_register_scripts() {  
    if(!is_admin()) :
        $js_path = get_template_directory_uri().'/inc/js/';
        wp_register_script('px-tweets', $js_path.'scripts/jquery.slide.js', array('jquery'), '1.0', true);
        wp_enqueue_script('px-tweets');
        wp_register_script('px-tips', $js_path.'scripts/jquery.fitvids.js', array('jquery'), '1.0', true);
        wp_enqueue_script('px-tips');
        wp_register_script('px-flex', $js_path.'scripts/jquery.flexslider.js', array('jquery'), '1.0', true);
        wp_enqueue_script('px-flex');
    endif;
}
add_action('init', 'px_register_scripts');

Line 2 - Мы используем is_admin (); чтобы проверить, находятся ли мы в панели управления wp-admin. Line 3 - Мы создаем «$ js_path» в качестве помощника, чтобы указывать на места любых скриптов. Line 4 - Мы используем wp_register_script (); уведомлять WordPress о имени скрипта, его пути, зависимостях (здесь передается jQuery, и wp_head () будет использоваться для вывода), версия и следует ли использовать wp_footer как hook или not.Line 5 - Мы используем wp_enqueue_script (); для добавления ранее зарегистрированного скрипта в любой WordPress output.Line 12 - Мы используем add_action (); прикрепить все сценарии к WordPress во время выполнения, используя ранее созданную функцию.


Step 5 functions.php

include 'inc/register.scripts.php';

Давайте обязательно включим скрипты, зарегистрированные на предыдущем шаге, с нашей темой в functions.php.

if(!function_exists('optionsframework_init')) :
    define('OPTIONS_FRAMEWORK_DIRECTORY', get_template_directory_uri().'/inc/options-framework/');
    require_once dirname(__FILE__).'/inc/options-framework/options-framework.php';
endif;
function optionsframework_option_name()
{
    $themename = get_option('stylesheet');
    $themename = preg_replace("/W/", "_", strtolower($themename));
    $optionsframework_settings = get_option('optionsframework');
    $optionsframework_settings['id'] = $themename;
    update_option('optionsframework', $optionsframework_settings);
}
function optionsframework_options() {
    $options = array();
}

Кусок кода над кораблями с Framework Framework, так как мы организовали нашу тему немного иначе, обратите внимание на строки 2 и 3, где мы немного изменим пути.

Если вы посмотрите на документацию для FlexSlider, вы увидите возможные доступные параметры, это наша ссылка при создании массива PHP $ flexslider_options.

animation: "fade",              //String: Select your animation type, "fade" or "slide"
slideDirection: "horizontal",   //String: Select the sliding direction, "horizontal" or "vertical"
slideshow: true,                //Boolean: Animate slider automatically
slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
animationDuration: 600,         //Integer: Set the speed of animations, in milliseconds
directioav: true,             //Boolean: Create navigation for previous/next navigation? (true/false)
controlNav: true,               //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
keyboardNav: true,              //Boolean: Allow slider navigating via keyboard left/right keys
mousewheel: false,              //Boolean: Allow slider navigating via mousewheel
prevText: "Previous",           //String: Set the text for the "previous" directioav item
extText: "Next",               //String: Set the text for the "next" directioav item
pausePlay: false,               //Boolean: Create pause/play dynamic element
pauseText: 'Pause',             //String: Set the text for the "pause" pausePlay item
playText: 'Play',               //String: Set the text for the "play" pausePlay item
randomize: false,               //Boolean: Randomize slide order
slideToStart: 0,                //Integer: The slide that the slider should start on. Array notation (0 = first slide)
animationLoop: true,            //Boolean: Should the animation loop? If false, directioav will received "disable" classes at either end
pauseOnAction: true,            //Boolean: Pause the slideshow when interacting with control elements, highly recommended.
pauseOnHover: false,            //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering
controlsContainer: "",          //Selector: Declare which container the navigation elements should be appended too. Default container is the flexSlider element. Example use would be ".flexslider-container", "#container", etc. If the given element is not found, the default action will be taken.
manualControls: "",             //Selector: Declare custom control navigation. Example would be ".flex-control-nav li" or "#tabs-nav li img", etc. The number of elements in your controlNav should match the number of slides/tabs.
start: function(){},            //Callback: function(slider) - Fires when the slider loads the first slide
before: function(){},           //Callback: function(slider) - Fires asynchronously with each slider animatio
after: function(){},            //Callback: function(slider) - Fires after each slider animation completes
end: function(){}               //Callback: function(slider) - Fires when the slider reaches the last slide (asynchronous)

Step 6 Параметры плагина для опции Framework Framework

Возьмем все параметры, которые могут находиться на странице параметров темы, и поместите их в многомерный массив PHP.

$flexslider_options = array(
    'animation' => array(
        'title' => 'Animation Type',
        'description' => 'Select your animation type, "fade" or "slide"',
        'type' => 'select',
        'class' => 'mini',
        'default' => 'fade',
        'values' => array(
            'fade' => 'Fade',
            'slide' => 'Slide'
        )
    ),
    'slideDirection' => array(
        'title' => 'Slide Direction',
        'description' => 'Select the sliding direction, "horizontal" or "vertical"',
        'type' => 'select',
        'class' => 'mini',
        'default' => 'horizontal',
        'values' => array(
            'horizontal' => 'Horizontal',
            'vertical' => 'Vertical'
        )
    ),
    'slideshow' => array(
        'title' => 'Enable slideshow?',
        'description' => 'Animate slider automatically',
        'type' => 'select',
        'class' => 'mini',
        'default' => 'true',
        'values' => array(
            'true' => 'Yes',
            'false' => 'No'
        )
    ),
    'slideshowSpeed' => array(
        'title' => 'Speed of cycling between slides',
        'description' => 'Set the speed of the slideshow cycling, in milliseconds',
        'type' => 'text',
        'class' => 'mini',
        'default' => '7000',
        'values' =>  false
    ),
    'animationDuration' => array(
        'title' => 'Animation duration',
        'description' => 'Set the speed of animations, in milliseconds',
        'type' => 'text',
        'class' => 'mini',
        'default' => '600',
        'values' => false
    ),
    'directioav' => array(
        'title' => 'Enable previous / next links?',
        'description' => 'Create navigation for previous/next navigation?',
        'type' => 'select',
        'class' => 'mini',
        'default' => 'true',
        'values' => array(
            'true' => 'Yes',
            'false' => 'No'
        )
    ),
    'controlNav' => array(
        'title' => 'Enable slide numbering?',
        'description' => 'reate navigation for paging control of each clide? Note: Leave true for manualControls ',
        'type' => 'select',
        'class' => 'mini',
        'default' => 'true',
        'values' => array(
            'true' => 'Yes',
            'false' => 'No'
        )
    ),
    'keyboardNav' => array(
        'title' => 'Enable keyboard navigation?',
        'description' => 'Allow slider navigating via keyboard left/right keys',
        'type' => 'select',
        'class' => 'mini',
        'default' => 'true',
        'values' => array(
            'true' => 'Yes',
            'false' => 'No'
        )
    ),
    'mousewheel' => array(
        'title' => 'Enable mousewheel scrolling?',
        'description' => 'Allow slider navigating via mousewheel',
        'type' => 'select',
        'class' => 'mini',
        'default' => 'true',
        'values' => array(
            'true' => 'Yes',
            'false' => 'No'
        )
    ),
    'prevText' => array(
        'title' => 'Previous text',
        'description' => 'Set the text for the "previous" directioav item',
        'type' => 'text',
        'default' => 'Previous',
        'class' => 'mini',
        'values' => false
    ),
    'nextText' => array(
        'title' => 'Next text',
        'description' => 'Set the text for the "next" directioav item',
        'type' => 'text',
        'default' => 'Next',
        'class' => 'mini',
        'values' => false
    ),
    'pausePlay' => array(
        'title' => 'Pause / Play button',
        'description' => 'Create pause/play dynamic element',
        'type' => 'select',
        'class' => 'mini',
        'default' => 'true',
        'values' => array(
            'true' => 'Yes',
            'false' => 'No'
        )
    ),
    'pauseText' => array(
        'title' => 'Pause text',

Теперь давайте посмотрим на некоторые параметры, доступные для плагина Twitter.

username: "seaofclouds",
join_text: "auto",
avatar_size: 32,
count: 3,
auto_join_text_default: "we said,",
auto_join_text_ed: "we",
auto_join_text_ing: "we were",
auto_join_text_reply: "we replied to",
auto_join_text_url: "we were checking out",
loading_text: "loading tweets..."

Как массив PHP, используя те же соглашения, что и мы с помощью метода $ flexslider_options.

$tweet_options = array(
    'username' => array(
        'title' => 'Twitter username',
        'description' => 'The Twitter username you wish to display',
        'type' => 'text',
        'class' => 'mini',
        'default' => 'envatowp',
        'values' => false
    ),
    'avatar_size' => array(
        'title' => 'Avatar Size',
        'description' => 'Chose the avatar size to display',
        'type' => 'select',
        'class' => 'mini',
        'default' => '16',
        'values' => array(
            16 => 16,
            32 => 32,
            64 => 64,
            128 => 128
        )
    ),
    'count' => array(
        'title' => 'Tweet count',
        'description' => 'How many tweets to show',
        'type' => 'text',
        'class' => 'mini',
        'default' => '10',
        'values' => false
    ),
    'auto_join_text_default' => array(
        'description' => 'The Twitter username you wish to display',
        'type' => 'text',
        'class' => 'mini',
        'default' => 'we said,',
        'values' => false
    ),
    'auto_join_text_ed' => array(
        'description' => 'The Twitter username you wish to display',
        'type' => 'text',
        'class' => 'mini',
        'default' => 'we',
        'values => false
    ),
    'auto_join_text_ing' => array(
        'description' => 'The Twitter username you wish to display',
        'type' => 'text',
        'class' => 'mini',
        'default' => 'we were',
        'values' => false
    ),
    'auto_join_text_reply' => array(
        'description' => 'The Twitter username you wish to display',
        'type' => 'text',
        'class' => 'mini',
        'default' => 'we replied to',
        'values' => false
    ),
    'auto_join_text_url' => array(
        'description' => 'The Twitter username you wish to display',
        'type' => 'text',
        'class' => 'mini',
        'default' => 'we were checking out',
        'values' => false
    ),
    'loading_text' => array(
        'title' => 'Loading text',
        'description' => 'Text to show when loading tweets',
        'type' => 'text',
        'class' => 'mini',
        'default' => 'loading tweets...',
        'values' => false
    )
);

Наконец, доступны настройки Tooltip.

alignTo: // 'element' or 'cursor',
offset: // [x, y] [0, -1],
content: // 'Custom tooltip content',
show: // Any jQuery animation,
showEvent:  // Callback function/ a,
hide: // Any jQuery animation,
hideEvent  // Callback function/ a,
delay: // In milliseconds   200 Set to 0 for no delay
css: // Custom CSS
className: // CSS Hook

... и как массив PHP, используя те же соглашения, которые мы получаем...

$tooltip_options = array(
    'alignTo' => array(
        'title' => 'Alignment',
        'description' => 'Should the tooltip be fixed or follow the cursor when hovered',
        'type' => 'select',
        'class' => 'mini',
        'default' => 'element',
        'values' => array(
            'element' => 'Fixed to element',
            'cursor' => 'Follow the cursor'
        )
    ),
    'content' => array(
        'title' => 'Content',
        'description' => 'Useful for HTML inside tooltips since you can’t put HTML in title attributes',
        'type' => 'text',
        'class' => 'mini',
        'default' => '',
        'values' => false
    ),
    'delay' => array(
        'title' => 'Hover delay',
        'description' => 'Set to 0 for no delay',
        'type' => 'text',
        'class' => 'mini',
        'default' => '0',
        'values' => false
    ),
    'css' => array(
        'title' => 'Custom CSS',
        'description' => 'Useful if you want to keep styles together with plugin settings',
        'type' => 'textarea',
        'class' => 'mini',
        'default' => '',
        'values' => false
    ),
    'className' => array(
        'title' => 'CSS Class',
        'description' => 'In case .tooltipsy doesn’t work for you',
        'type' => 'text',
        'class' => 'mini',
        'default' => 'tooltipsy',
        'values' => false
    )
);

Теперь, когда параметры плагина были имитированы как массивы PHP, мы можем сохранить их как фрагмент и повторно использовать при разработке будущих тем в случае необходимости. В случае обновления плагина фрагмент может быть обновлен довольно эффективно.

Я предпочитаю разгружать эти массивы в свои собственные файлы для будущего использования. Какие плагины вы используете в теме, это будет случай захвата файла настроек, настройка рамки параметров и вывод в рамках вашей темы.

include 'inc/options.flexslider.php';
include 'inc/options.tooltipsy.php';
include 'inc/options.tweets.php';

Теперь, когда массивы имеют свой собственный дом, обязательно включите каждый в функции functions.php по мере необходимости.

С учетом этого перейдем к созданию панели FlexSlider на странице «Параметры темы».

Использование Framework Framework выполняется с помощью следующего кода.

$options[] = array(
    'name' => __('Flex Slider', 'options_framework_theme'),
    'type' => 'heading'
);

Чтобы создать параметр для каждого параметра, мы добавляем к массиву $ options.

Сначала давайте удостовериться, что у нас есть глобальный доступ к каждому массиву, установив область действия в функции optionsframework_options ()...

global $flexslider_options, $tweet_options, $tooltip_options;

Используя массив $ flexslider_options и цикл foreach, мы можем создать ввод параметров на каждой итерации в соответствии с настройками.

$i = 0;
foreach( $flexslider_options as $key => $value ) :
    $options[] = array(
        'name' => (isset($value['title'])) ? $value['title'] : $key,
        'desc' => $value['description'],
        'id' => 'flex_opt_'.$i++,
        'type' => $value['type'],
        'std' => $value['default'],
        'class' => $value['class'],
        'options' => $value['values']
    );
endforeach;

Массив $ options [] - это соглашение Framework Framework, и объяснения свободно цитируются в примерах файлов, предоставленных автором ниже.

Line 1 - Счетчик инициализирован. Line 3 - name - Заголовок для человека, выводимый в разделе Параметры темы page.Line 4 - desc - Человекообразное описание, описывающее конкретный параметр. Line 5 - id - Уникальный идентификатор (мы будем использовать это для вывода темы).Line 6 - type - Возможные типы полей: текст, текстовое поле, флажок, выбор, радио, загрузка (загрузчик изображений), изображения (использование изображений вместо переключателей), фон (набор параметров для определения фон), multicheck, color (jQuery color picker), типография (набор опций для определения типографики), editor.Line 7 - std - значение ввода по умолчанию. Line 8 - class - Возможные значения: mini, small, smallnLine 9 - options - Массив возможных значений для поддерживаемых полей.

Дальнейшая дискуссия

В строке 3 мы используем тернарный оператор для определения значения, если оно установлено. Была рассмотрена некоторая гибкость при создании массивов для любых настроек. Это позволит отображать пользовательские заголовки вместе с каждым параметром, в то время как по умолчанию используется имя параметра, если оно не указано.

Строка 5 инкрементное значение используется для хранения уникального идентификатора с каждой опцией.

Все остальные строки являются стандартными значениями, которые должны выполняться в соответствии с директивой Framework Framework, взятой из нашего массива параметров с использованием соответствующих ключей.

Теперь это случай пену, полоскание и повторение для $ tweet_options и $ tooltip_options.

$options[] = array(
    'name' => __('Twitter', 'options_framework_theme'),
    'type' => 'heading'
);

Сначала создается новая панель.

$i = 0;
foreach($tweet_options as $key => $value) : 
    $options[] = array(
        'name' => (isset($value['title'])) ? $value['title'] : $key,
        'desc' => $value['description'],
        'id' => 'tweet_opt_'.$i++,
        'type' => $value['type'],
        'std' => $value['default'],
        'class' => $value['class'],
        'options' => $value['values']
    );
endforeach;

Затем мы перебираем эти параметры и добавляем к массиву $ options []. Обратите внимание на значение id, это будет полезно позже.

Еще раз...

$options[] = array(
    'name' => __('Tooltipsy', 'options_framework_theme'),
    'type' => 'heading'
);

Сначала мы создаем новую панель и даем ей заголовок.

$i = 0;
foreach( $tooltip_options as $key => $value ) :
    $options[] = array(
        'name' => (isset($value['title'])) ? $value['title'] : $key,
        'desc' => $value['description'],
        'id' => 'tooltip_opt_'.$i++,
        'type' => $value['type'],
        'std' => $value['default'],
        'class' => $value['class'],
        'options' => $value['values']
    );
endforeach;

Наконец, мы устанавливаем значения, опять же единственным изменением здесь является передаваемый массив параметров и значение id.

return $options;

В соответствии с опцией Framework Framework мы, наконец, возвращаем массив $ options, который теперь заполняется настройками плагина и выводится как опции для выбранных 3 плагинов.

Теперь функция optionsframework_options () завершена.


Контрольная точка и что дальше, часть 2

Функциональная основа должна теперь функционировать с красивой темой, в которой будут представлены 3 панели на странице параметров темы и любые соответствующие параметры.

Параметры плагина были зарегистрированы в Framework Framework, итерации по созданным массивам, мы будем использовать аналогичный подход, поскольку мы выводим значения параметров темы в тему на последнем шаге.


Step 7 Применение настроек footer.php

Сначала давайте посмотрим, что у нас есть доступ к настройкам, созданным и выгруженным в соответствующие файлы, а именно options.flexslider.php, options.tooltipsy.php и options.tweets.php.

global $flexslider_options, $tweet_options, $tooltip_options;

Параметры плагина включаются в функции functions.php при каждой загрузке страницы, мы можем получить доступ к этим ранее созданным массивам настроек, сделав их глобальными так же, как в файле functions.php.

С этим давайте рассмотрим вывод, необходимый для каждого используемого плагина.

Требование FlexSlider

var $flexslider_options = {
    setting: value,
    setting2: value,
    setting3: value
    // ...     
};
$(window).load(function() {
    $('.flexslider').flexslider($flexslider_options);
});

Довольно стандартный объект, содержащий настройки, которые могут быть переданы плагину при инициализации.

Строка 7 как выделенная будет оставаться неизменной, вывод динамического объекта с любыми настройками - вот что мы ищем здесь.

of_get_option('option_name')

Чтобы получить любые сохраненные значения из Framework Framework, автор создал вспомогательную функцию, которая принимает идентификатор параметра в качестве параметра для получения его значения. На этапе 6 идентификатор параметра был создан с использованием plugin_opt_n, где- число, начинающееся от 0 до бесконечности. Это полезно, и порядок индексов неважен.

Цепь foreach будет делать трюк здесь, чтобы снова захватить эти данные с помощью счетчика, чтобы получить ключ и значения динамически в сочетании с полезной вспомогательной функцией (тавтологией?). Пойдем к этому.

var $flexslider_options = {
    <?php
    $i = 0;
    $count = count($flexslider_options);
    foreach($flexslider_options as $key => $value) :
        $option_value = of_get_option('flex_opt_'.$i++);
        echo $key.": ";    
        if($i == $count) :
            if($option_value == 'true' || $option_value == 'false' || is_numeric($option_value)) :
                echo $option_value."n";
            else :
                echo "'".$option_value."'n";
            endif;
        else :
            if($option_value == 'true' || $option_value == 'false' || is_numeric($option_value)) :
                echo $option_value.",n";
            else :
                echo "'".$option_value."', n";
            endif;
        endif;
    endforeach;
    ?>
};
$(window).load(function() {
    $('.flexslider').flexslider($flexslider_options);
});

Line 1 - Здесь мы устанавливаем объект, который должен быть передан в plugin.Line 3 - Мы инициализируем счетчик и устанавливаем его значение в 0.Line 4 - Синтаксис при компиляции объектов не требует разделения запятой, используя сохранение максимального значения нашего массив позволяет нам проверить это позже в строке 8.Line 6 - Мы сохраняем возвращаемое значение параметра в качестве переменной для удобства. Line 7 - $ key - это параметр плагина, его значение выводится с помощью двоеточия при создании объекта. Line 8 - Здесь мы проверяем, что элемент, который повторяется, является последним. Если это так, нам нужно выводить без comma.Line 9 - И снова синтаксис объекта требует, чтобы булевые значения записывались без разделителей запятой, поэтому мы проверяем значения для «true», «false» и integers.Line 14 - Альтернативный синтаксис когда не повторяется вывод окончательной настройки элемента в объекте.

. Еще раз мы намыливаем, полоскаем и повторяем, чтобы закончить с помощью учебника.

Требование Twitter

var $tweet_options = {
    option: value,
    option2: value,
    option3: value
    // ...
};
$(".tweets").tweet($tweet_options); // Will not change.

Поиск настроек.

var $tweet_options = {
    <?php
    $i = 0;
    $count = count($tweet_options);
    foreach($tweet_options as $key => $value) :
        $option_value = of_get_option('tweet_opt_'.$i++);
        echo $key.": ";    
        if($i == $count) :
            if($option_value == 'true' || $option_value == 'false' || is_numeric($option_value)) :
                echo $option_value."n";
            else :
                echo "'".$option_value."'n";
            endif;
        else :
            if($option_value == 'true' || $option_value == 'false' || is_numeric($option_value)) :
                echo $option_value.",n";
            else :
                echo "'".$option_value."', n";
            endif;
        endif;
    endforeach;
    ?>
};
$(".tweets").tweet($tweet_options);

Подсказываемое требование

var $tooltip_options = {
    option: value,
    option2: value,
    option3: value
    // ...
};
$('.tooltip').tooltipsy($tooltip_options); // Will not change.

Поиск настроек.

var $tooltip_options = {
    <?php
    $i = 0;
    $count = count($tooltip_options);
    foreach($tooltip_options as $key => $value) :
        $option_value = of_get_option('tooltip_opt_'.$i++);
        echo $key.": ";    
        if($i == $count) :
            if($option_value == 'true' || $option_value == 'false' || is_numeric($option_value)) :
                echo $option_value."n";
            else :
                echo "'".$option_value."'n";
            endif;
        else :
            if($option_value == 'true' || $option_value == 'false' || is_numeric($option_value)) :
                echo $option_value.",n";
            else :
                echo "'".$option_value."', n";
            endif;
        endif;
    endforeach;
    ?>
};
$('.tooltip').tooltipsy($tooltip_options);

Теперь вы можете настроить плагины на странице параметров темы и увидеть те изменения, которые сразу отражаются в теме.


Заключение

Несмотря на то, что многие из них не видят прямой пользы для этого учебника, я нашел этот метод полезным, когда любой администратор сайта WordPress нуждается в некотором доступе к конечной настройке существующих функций темы, например, примера FlexSlider хорошо демонстрирует эту технику.

Наличие страницы «Параметры темы» имеет много практических применений, однако настройка плагинов jQuery является одним из примеров, однако Framework Framework предоставляет большой потенциал. Например, вы можете использовать его для загрузки логотипа с его типом поля загрузки, или вы можете использовать его для настройки типографики в теме с очень полезными полями типографии (комбинация входов выбора и цветового круга). Возможности ограничены только вашим функциональным резюме.

Надеюсь, что этот урок дает некоторые улучшения в вашем рабочем процессе, и если у вас есть какие-либо вопросы, связанные с реализацией Framework Framework и темы, пожалуйста, задайте в комментариях ниже.