Dodaj osobny pasek boczny dla strony

przez Nikołajenko Maksym · Opublikowany Październik 21, 2012 · Zaktualizowano Sierpień 11, 2018

Dzisiaj znalazłem jeden unikalny tutorial jak zrobić kilka sidebarów i przypisać ich zawartość do osobnych stron w formie rozwijanej listy.. Trochę zagmatwane, ale myślę, w praktyce będzie jaśniej.

Krok pierwszy Dodawanie pasków bocznych

Otwórz plik function.php w folderze motywu i dodaj tam kod, aby utworzyć kilka pasków bocznych w pętli:

    $dynamic_widget_areas = array(
                /* rename or create new dynamic sidebars */
                "Sidebar 01",
                "Sidebar 02",
                "Sidebar 03",
                "Sidebar 04",
                "Sidebar 05",
                "Sidebar 06",
                "Sidebar 07",
                "Search Template",
                );
if ( function_exists('register_sidebar') ) {
    foreach ($dynamic_widget_areas as $widget_area_name) {
        register_sidebar(array(
           'name'=> $widget_area_name,
           'before_widget' => '<div id="%1$s" class="widget %2$s left half">',
           'after_widget' => '</div>',
           'before_title' => '<h3 class="widgettitle">',
           'after_title' => '</h3>',
        ));
    }
}
        add_action("admin_init", "sidebar_init");
        add_action('save_post', 'save_sidebar_link');
        function sidebar_init(){
                add_meta_box("sidebar_meta", "Sidebar Selection", "sidebar_link", "page", "side", "default");
        }
        function sidebar_link(){
                global $post, $dynamic_widget_areas;
                $custom  = get_post_custom($post->ID);
                $link    = $custom["_sidebar"][0];
        ?>
<div class="link_header">
        <?
        echo '<select name="link" class="sidebar-selection">';
        echo '<option>Select Sidebar</option>';
        echo '<option>-----------------------</option>';
        foreach ( $dynamic_widget_areas as $list ){
                    if($link == $list){
                      echo '<option value="'.$list.'" selected="true">'.$list.'</option>';
                        }else{
                      echo '<option value="'.$list.'">'.$list.'</option>';
                        }
                }
        echo '</select><br />';
        ?>
</div>
<p>Select sidebar to use on this page.</p>
<?php
}
function save_sidebar_link(){
global $post;
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {return $post->ID;}
        update_post_meta($post->ID, "_sidebar", $_POST["link"]);
}
add_action('admin_head', 'sidebar_css');
function sidebar_css() {
        echo'
        <style type="text/css">
                .sidebar-selection{width:100%;}
        </style>
        ';
}

$dynamic_widget_areas = array(

/* rename or create new dynamic sidebars */

"Sidebar 01",

"Sidebar 02",

"Sidebar 03",

"Sidebar 04",

"Sidebar 05",

"Sidebar 06",

"Sidebar 07",

"Search Template",

);

if ( function_exists('register_sidebar') ) {

foreach ($dynamic_widget_areas as $widget_area_name) {

register_sidebar(array(

'name'=> $widget_area_name,

'before_widget' => '<div id="%1$s" class="widget %2$s left half">',

'after_widget' => '</div>',

'before_title' => '<h3 class="widgettitle">',

'after_title' => '</h3>',

));

}

add_action("admin_init", "sidebar_init");

add_action('save_post', 'save_sidebar_link');

function sidebar_init(){

add_meta_box("sidebar_meta", "Sidebar Selection", "sidebar_link", "page", "side", "default");

}

function sidebar_link(){

global $post, $dynamic_widget_areas;

$custom = get_post_custom($post->ID);

$link = $custom["_sidebar"][0];

echo '<select name="link" class="sidebar-selection">';

echo '<option>Select Sidebar</option>';

echo '<option>-----------------------</option>';

foreach ( $dynamic_widget_areas as $list ){

if($link == $list){

echo '<option value="'.$list.'" selected="true">'.$list.'</option>';

}else{

echo '<option value="'.$list.'">'.$list.'</option>';

}

echo '</select><br />';

</div>

<p>Select sidebar to use on this page.</p>

<?php

}

function save_sidebar_link(){

global $post;

if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {return $post->ID;}

update_post_meta($post->ID, "_sidebar", $_POST["link"]);

}

add_action('admin_head', 'sidebar_css');

function sidebar_css() {

echo'

.sidebar-selection{width:100%;}

</style>

}

W kroku drugim dodajemy obszar do wyświetlania paska bocznego.

Dodałem ten kod do pliku strona.php przed wysłaniem komentarzy.

<div id="sidebar">
<?
           global $post;
           $custom  = get_post_custom($post->ID);
           $link    = $custom["_sidebar"][0];
        if($link != ''){
            echo '<ul id="widgets">';
                if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar($link) ) :
                endif;
            echo '</ul>';
        }
?>
</div>

global $post;

$custom = get_post_custom($post->ID);

$link = $custom["_sidebar"][0];

if($link != ''){

echo '<ul id="widgets">';

if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar($link) ) :

endif;

echo '</ul>';

}

</div>

Zewnętrznie, w sekcji widżetów, po wklejeniu kodu wszystko będzie wyglądać tak:

Po wstawieniu widżetu do jednego z obszarów należy przejść do dowolnej strony lub utworzyć nową i określić ją na rozwijanej liście, jaki pasek boczny będzie na nim wyświetlany.

Również w menu ustawień pojawi się nowa pozycja Wybór paska bocznego który, kiedy nie jest potrzebny, można wyłączyć.

Usługi korepetycji online. Lista kursów, które prowadzę

Podstawowy kurs projektowania stron internetowych;
Układ stron;
Ogólny kurs CMS WordPress oraz kontynuacja kursu dotyczącego tworzenia szablonów;
Tworzenie stron internetowych w PHP.

Czytaj więcej na stronie Nauczyciel WordPressa