KATEGORIA:

03 – Własny motyw WordPress

własny motyw wordpress

SIDEBAR.PHP

Do pliku sidebar.php dodajemy szablon paska bocznego w HTML. Załóżmy, że chcemy tam umieścić notkę o autorze, listę wpisów, kategorie i linki. Każdy może stworzyć dowolne listy w panelu bocznym, ważne jednak żeby to były listy, czyli tagi <ul> i <li>.

W sidebarze umieszczamy także kod php umożliwiający dodawanie widgetów z kokpitu. Umieszczamy go wewnątrz tagów <ul>.

<div id="sidebar">
	<ul>
	 <?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
        <?php dynamic_sidebar( 'sidebar-2' ); ?>
    <?php endif; ?>
		<li>
			<h2>O autorze</h2>
			<p> Nazywam sie Martyna Rejkowicz. To moj przykladowy szablon Wordpress.</p>
		</li>
		<li>
			<h2> Archiwum wpisow </h2>
			<ul>
				<li> <a href="#">Styczen 2017</a>(1)</li>
				<li> <a href="#">Luty 2017</a>(3)</li>
				<li> <a href="#">Marzec 2017</a>(7)</li>
			</ul>
		</li>
		<li>
			<h2> Kategorie </h2>
			<ul>
				<li> <a href="#">Ciekawostki</a>(1)</li>
				<li> <a href="#">Wordpress</a>(1)</li>
				<li> <a href="#">Opencart</a>(1)</li>
			</ul>
		</li>
		<li>
			<h2> Linki </h2>
			<ul>
				<li> <a href="#">O nas </a></li>
				<li> <a href="#">Oferta</a></li>
				<li> <a href="#">Kontakt</a></li>
			</ul>
		</li>
	</ul>


</div>

Aby widgety mogły zadziałać, należy wykonać jeszcze jedną czynność. Należy do pliku functions.php dodać poniższy kod.

function _s_widgets_init() {
	register_sidebar( array(
		'name'          => esc_html__( 'Sidebar', '_s' ),
		'id'            => 'sidebar-1',
		'description'   => esc_html__( 'Add widgets here.', '_s' ),
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', '_s_widgets_init' );

Generalnie w tym momencie można zakończyć tworzenie tego pliku i edytować panel boczny w kokpicie za pomocą widgetów. Jednak skupimy się na funkcjach PHP i przygotujemy ten plik „ręcznie”.

FUNKCJE PHP W SIDEBARZE

Poniżej znajduje się lista przydatnych funkcji.

<?php wp_list_pages('title_li='); ?> // wyswietla liste podstron bloga miedzy <li> a </li>
<?php wp_get_archives('title_li='); ?> // linki do archiwum takze miedzy <li> a </li>
<?php wp_list_categories('title_li='); ?> // lista kategorii miedzy <li> a </li>
<?php wp_list_bookmarks(); ?> // lista linkow do innych stron wprowadzonych w kokpicie
<?php bloginfo('rss2_url'); ?> // link do glownego kanalu rss 
<?php wp_tag_cloud(); ?> // wyswietla tagi jako chmure (linki o roznych rozmiarach)

Przed zamknięciem głównej listy dodajemy jeszcze poniższą linię.

<?php wp_meta(); ?>

SEARCH BAR W PANELU BOCZNYM

Aby dodać pasek wyszukiwania do panelu bocznego należy utworzyć nowy plik o nazwie searchform.php i wkleić do niego przykładowy poniższy kod.

<form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
	<fieldset>
		<input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
		<input type="submit" id="searchsubmit" value="Szukaj" />
	</fieldset>
</form>

W naszym sidebarze, w miejscu w którym chcemy wyświetlić wyszukiwarkę wstawiamy poniższy kod.

<?php include(TEMPLATEPATH . '/searchform.php'); ?>

PODSUMOWANIE

Nasz sidebar z funkcjami powinien wyglądać następująco.

<div id="sidebar">
	<ul>
	 <?php if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
        <?php dynamic_sidebar( 'sidebar-2' ); ?>
    <?php endif; ?>
		<li>
			<h2>O autorze</h2>
			<p> Nazywam sie Martyna Rejkowicz. To moj przykladowy szablon Wordpress.</p>
		</li>
		<li>
			<h2> Wyszukaj artykul </h2>
			<?php include(TEMPLATEPATH . '/searchform.php'); ?>
		</li>
		<li>
			<h2> Archiwum wpisow </h2>
			<ul>
				<?php wp_get_archives('title_li='); ?>
			</ul>
		</li>
		<li>
			<h2> Kategorie </h2>
			<ul>
				<?php wp_list_categories('title_li='); ?>
			</ul>
		</li>
		<li>
			<h2> Linki </h2>
			<ul>
				<?php wp_list_pages('title_li='); ?>
			</ul>
		</li>
	</ul>


</div>

Dodamy do niego jeszcze kod css i całość może wyglądać bardzo dobrze. Oczywiście ten kod jest kodem szkoleniowym, dzięki któremu poznajemy funkcje, których możemy użyć zarówno w sidebarze jak i w innych plikach. Tak jak wspomniałam, wystarczy dodać sidebar i całość można już edytować z poziomu kokpitu bez konieczności umieszczania dodatkowego kodu i funkcji.

W kolejnym artykule zajmiemy się plikiem single.php. Zapraszam!

04 – Własny motyw WordPress

KOMENTARZE

  1. Wszystko ładnie pięknie, tylko, że jest to sidebar, którego za chiny nie da się edytować z poziomu panelu admina. Aby cokolwiek zmienić, trzeba grzebać w kodzie. Przydałaby się kolejna część tego kursu z dodatkowym opisem, jak zrobić sidebar uniwersalny, edytowalny w panelu admina.

    1. Jesteś pewien? Tak jak napisałam w artykule: „Generalnie w tym momencie można zakończyć tworzenie tego pliku i edytować panel boczny w kokpicie za pomocą widgetów. Jednak skupimy się na funkcjach PHP i przygotujemy ten plik „ręcznie”.” – szkoleniowo. Pokazałam jak przygotować to w kodzie, aby uzmysłowić, że te elementy można umieszczać wszędzie za pomocą funkcji bez konieczności dodawania sidebaru. Taki sam efekt uzyskamy zarządzając tym sidebarem w kokpicie i nie umieszczając już żadnych h2 i php include.

  2. edytowanie widgetów nie działa z panelu admina ponieważ w funkcji php jest id jest 'sidebar-1′ a w pliku sidebara 'sidebar-2′, po poprawieniu wszystko działa poprawnie

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *