Warning: Declaration of c2c_ConfigureSMTP::options_page_description() should be compatible with C2C_Plugin_023::options_page_description($localized_heading_text = '') in /home/tpjorgpl/domains/tpj.org.pl/public_html/podsiadlo/wp-content/plugins/configure-smtp/configure-smtp.php on line 47

Warning: Parameter 1 to wp_default_scripts() expected to be a reference, value given in /home/tpjorgpl/domains/tpj.org.pl/public_html/podsiadlo/wp-includes/plugin.php on line 571
 Jak stworzyć własny szablon w Wordpressie | Programowanie w Wordpressie
Warning: Parameter 1 to wp_default_styles() expected to be a reference, value given in /home/tpjorgpl/domains/tpj.org.pl/public_html/podsiadlo/wp-includes/plugin.php on line 571
 

Przewodnik WordPressa: Jak stworzyć własny szablon

Przewodnik WordPressa: Jak stworzyć własny szablon

Wstęp:

Jest to tłumaczenie artykułu Jonathana Wolda przybliżające tworzenia własnego motywu (szablonu) w WordPressie.

Ten przewodnik jest zwłaszcza dla:

Ludzi zainteresowanych nauką budowy szablony do WordPressa od podstaw lub dla tych, którzy chcieliby zmienić swoje dotychczasowe strony i przekonwertować je do pięknie wyglądającego szablonu działającego w WordPressie.

Dodatkowa uwaga dotycząca integracji w WordPressie:

Istnieją dwa sposoby na integrację WordPressa z dotychczasową stroną:

  • Pierwsza, możesz zainstalować WordPressa, pisać swoje wpisy, a potem wykorzystać PHP lub Javascript do integracji kanałów dostępu bezpośrednio w istniejącym projekcie. Wadą tego sposobu jest problem, dołączania linków w kanałach dostępu (np. by przeczytać resztę wpisu lub dodawać komentarze). Jeśli klikniemy na link, powinien nas zabrać w jakieś miejsce a domyślnie będzie kierował nas do instalacji, WordPressa, która w większości nie będzie wyglądała jak twoja istniejąca strona.
  • Druga, możesz wykorzystać dotychczasowy projekt, tabele, arkusze stylów CSS i stworzyć szablon WordPressa, który dokładnie odzwierciedla twoją stronę. Potem uaktywnić go w swojej instalacji WordPressa i będziemy mieli „blog” (lub to, co chcemy wykorzystać w WordPressie), który będzie odzwierciedlał naszą stronę. Nie jest to, co prawda integracją, ale rezultaty dla końcowego użytkownika są takie same: funkcjonalność WordPressa bez uszczerbku dla wyglądu i oferująca użytkownikowi kontynuację dotychczasowych możliwości.

Krok pierwszy: Przygotowanie obszaru roboczego

Przed rozpoczęciem kodowania w WordPressie, należy przygotować kilka rzeczy. Blog ze strony Jonathana Wolda będzie używany jako przykład.

Oto, co potrzebujemy:

  1. Projekt – Gdy niektórzy ludzie kodują swoje projekty bezpośrednio do szablonu WordPressa, my trochę sobie ułatwimy i zaczniemy od projektu zakodowanego w HTMLu i CSS. Dla kilku pierwszych integracji (lub twoich pierwszych i ostatnich) polecam zacząć od zakodowanego projektu. Nie musi posiadać wszystkich funkcji WordPressa (jak zobaczysz w przykładzie). Najważniejszą rzeczą jest posiadanie układu strony. Wysoko zalecane jest by układ strony był zaprojektowany wykorzystując arkusze stylów CSS. W tym przykładzie będziemy wykorzystywać gotowy układ zakodowany w CSS i XHTML.
  2. Instalacja WordPressa – sprawdź czy masz zainstalowaną najnowszą wersję, WordPressa, jeśli tak to możemy kontynuować nasz kurs.

Dodatkowo zalecam przy dalszej części kursu:

  1. Doświadczenie z CSS – mimo iż nie wymagane, posiadanie podstawowej wiedzy na temat arkuszy stylów CSS znacznie usprawni dodatkowe zmiany i pozwoli dostosować do własnych potrzeb pomysły które przyjdą podczas budowania szablonu.
  2. Poczucie humoru lub cierpliwość lub obie te rzeczy jednocześnie – Czasami podczas prac z WordPressem i arkuszami stylów CSS, rzeczy mogą nie iść do końca tak jakbyśmy sobie tego życzyli. Dla tych, którzy są zaznajomieni z arkuszami stylów CSS i językiem PHP i czasami coś kodują, dobrze wiedzą, iż czasem najmniejszy błąd może zepsuć i zmienić rezultat całej naszej pracy. W takim wypadku trzeba trochę cierpliwości, znaleźć błąd i go usunąć.

W takim przypadku możemy przejść dalej. Po kliknięciu w obrazek załaduje się strona w kodzie HTML.

Ze względu na kurs, projekt strony został “niedokończony”. Układ strony został opracowany, kolory dobrane i dużo innych opcji, ale gdy będziemy mieli trochę więcej czasu możemy pododawać elementy WordPressa (specjalnie na stronie pozostawiono puste miejsca). Podczas tego kursu, będziemy mieli szansę nauczyć się trochę o „tagach szablonów” (ang. „template tags”).

[Uwaga: Jeśli jesteś zaznajomiony z arkuszami stylów CSS, możesz pominąć ten paragraf] – Jeśli spojrzysz, na kody źródłowe strony, zauważysz że nie ma tu za wiele kodu. Można to szczególnie zauważyć, jeśli używałeś wcześniej tabel <table>. Dzieje się tak, ponieważ układ strony został zbudowany z wykorzystaniem arkuszy stylów CSS. Oznacza to, że zamiast używać „tabel” do ułożenia treści, projekt został oddzielony od treści, przez użycie zewnętrznych arkuszy stylów. W praktyce przejście na arkusze styli CSS, jest o wiele łatwiejsze w późniejszej pracy nad stroną i jej układem.

Krok drugi: Przygotowanie obszaru pod szablon

Na potrzeby kursu, będziemy pracować na domyślnym szablonie WordPressa (Kubrick) przygotowanym przez naszego dobrego przyjaciela BinaryBonsai.com.

Na początek to, co zrobimy to użyjemy domyślnego motywu WordPressa, wyczyścimy go i użyjemy jako punkt początkowy do stworzenia naszego własnego szablonu.

By zacząć skopiuj „domyślny” motyw z instalacji WordPressa (lokalizacja motywu wp-content/themes/) i wklej go do nowego folderu wraz z kopią swojego projektu. Możesz to zrobić w dowolny sposób, ale pomaga to utrzymać niektóre rzeczy w porządku. Poniżej układ moich folderów:

Jak możesz się domyślić, by uniknąć jakiś nieporozumień, gdy będziesz uaktualniał motyw, zmieniłem nazwę „domyślną” (ang. default) na „blog_theme”.

Krok trzeci: Zagłębianie się w kodzie – Tworzenie Nagłówka

Teraz, gdy mamy już nasz projekt i kopię WordPressa możemy zaczynać. Na początek należy otworzyć „domyślny” motyw, wyczyścić niektóre rzeczy i zacząć tworzyć nowy motyw. Zaczynajmy:

  1. Najpierw, otwieramy plik header.php. Powinniśmy wtedy zobaczyć kod podobny do poniższego:


<!DOCTYPE html PUBLIC
„-//W3C//DTD XHTML 1.0 Transitional//EN”
„http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” <?php
language_attributes(); ?>>

<head
profile=”http://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”<?php
bloginfo(‚html_type’); ?>; charset=<?php bloginfo(‚charset’); ?>”
/>

<title><?php
bloginfo(‚name’); ?> <?php if ( is_single() ) { ?> &raquo; Blog
Archive <?php } ?> <?php wp_title(); ?></title>

<meta
name=”generator” content=”WordPress <?php
bloginfo(‚version’); ?>” /> <!– leave this for stats –>

<link
rel=”stylesheet” href=”<?php bloginfo(‚stylesheet_url’);
?>” type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml”
title=”<?php bloginfo(‚name’); ?> RSS Feed” href=”<?php
bloginfo(‚rss2_url’); ?>” />
<link rel=”pingback” href=”<?php bloginfo(‚pingback_url’);
?>” />

<style
type=”text/css” media=”screen”>

<?php
// Checks to see whether it needs a sidebar or not
if ( !$withcomments && !is_single() ) {
?>
#page { background: url(„<?php bloginfo(‚stylesheet_directory’);
?>/images/kubrickbg.jpg”) repeat-y top; border: none; }
<?php } else { // No sidebar ?>
#page { background: url(„<?php bloginfo(‚stylesheet_directory’);
?>/images/kubrickbgwide.jpg”) repeat-y top; border: none; }
<?php } ?>

</style>

<?php wp_head(); ?>
</head>
<body>
<div id=”page”>

<div id=”header”>
<div id=”headerimg”>
<h1><a href=”<?php echo get_option(‚home’);
?>/”><?php bloginfo(‚name’); ?></a></h1>

<div class=”description”><?php
bloginfo(‚description’); ?></div>

</div>
</div>
<hr />

  1. Usuń teraz sekcję kodu powyżej zaznaczoną na czerwono. Wspaniale! Teraz zapisz swoją pracę.
  2. Teraz otwórz plik HTML, który zawiera układ twojej strony.

<!DOCTYPE
html PUBLIC „-//W3C//DTD XHTML 1.0 Strict//EN”
„http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html><head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Life of an Internet Entrepreneur – Jonathan Wold</title>
<link href=”style.css
rel=”stylesheet
type=”text/css” /></head>
<body>

<div
id=”mainContainer„>

<div
id=”header”></div>

<div
id=”notice”><p>Important Notice Goes
Here</p></div>

<div id=”contentContainer
class=”withSidebar„>

<div id=”content”>

<div id=”contentHeader„><h1>Content
Title Goes Here</h1></div>

<p>Lorem ipsum
dolor sit amet.
Con minimim venami quis nostrud laboris nisi ut aliquip
ex ea com dolor in reprehenderit in voluptate nonumi. Mimimum veniami ex ea con
dolor nisi ut aliquip. Consequat Duis autem vel eum iruire dolor in endrerit,
voluptate velit est.
Sit amet, consectetuer
adipiscing elit, sed diam nonummi.
Euismod tincidunt ut laroeet dolore
magna aliquam erat voluptat.</p>

<p>Ut wisi
enin ad minim. Quis nostrud ad nostris
pro amat.
Sed aliquo
ut nisi alter ego qid
propter anno et cetera.
Ullam venit cum permissio, alter ego
cum frater et patris et mater inter familias.
Vel illum dolore eu feugiat nulla facilitis
ad vero eros et accususam et lustro odio dignissim qui blandit praeset lupatum
auge duis aplore. Mimimum veniami ex ea con dolor nisi ut aliquip. Consequat
Duis autem vel eum iruire dolor in endrerit, voluptate velit est.
Sit amet, consectetuer adipiscing elit, sed diam
nonummi.</p>

<span class=”readMore„>Continue
Reading</span>

<div id=”contentFooter„>
<p>Published May 2, 2007 – Comments? None yet
</p>

</div>
</div> <!– Content Ends
–>

</div> <!– Content Container Ends –>

<div
class=”rightColumnContainer„>
<div class=”rightColumn„>
<h2>The Author</h2>
<p class=”small”>Jonathan Wold is a
20 year old Internet Entrepreneur who believes that faith and works are inseparable.
Here you’ll find examples of faith, web design, niche marketing, CSS, WordPress, and more.</p>
<h2>Categories</h2>
<ul>
<li>Niche Marketing (15)</li>
<li>Faith I Live By (12)</li>
<li>Web Design (5)</li>
<li>Life Updates (9)</li>
<li>WordPress (15)</li>
</ul>
<h2>Blog Pages</h2>
<ul>
<li>Excellent Blogs</li>
<li>Excellent Websites</li>
<li>Excellent Books</li>
<li>Active Projects</li>
</ul>
</div> <!– First „box” of content ends here, second box
begin below –>

<div class=”rightColumn„>
<h2>Sponsors</h2>
<p>Sponsor This Site</p>
</div> <!– 2nd box of
content ends here –>

</div> <!– Right Column Container Ends –>

<div
id=”clear”></div>

<div
id=”footer”>
<p>You’re welcome to share what you find here with whomever you’d like in
whatever way you’d like to. If you have questions, comments, or suggestions,
contact me :).</p>
<p>Virtual Empire (What is this?): <a href=”#”>Links
to Various Sites </a></p>
</div>

</div>
<!– Main Container Ends –>

</body>
</html>

Uwaga: Dla ułatwienia powyższy układ strony, został pokolorowany by łatwiej było go później dopasować do plików szablonu WordPressa. Niebieski jest dla pliku header.php, zielony dla index.php (jak również dla plików single.php, page.php, archive.php, search.php, itp), pomarańczowy dla sidebar.php, a fioletowy dla footer.php. – Dla przykładu, w kolejnych kilku krokach kursu, będę trzymał się niebieskiego koloru.

  1. Teraz weź sekcję “nagłówka” (ang. header) z twojego layoutu i umieść ją w odpowiednim miejscu pliku nagłówkowego szablonu WordPressa zamieniając istniejącą część kodu swoim własnym. Miej na uwadze, że to co będzie znajdować się w pliku header.php będzie na górze każdej twojej nowej strony motywu WordPressa. Poniżej dokończony szablon nagłówka ze zmianami zaznaczonymi na niebiesko:

<!DOCTYPE html PUBLIC „-//W3C//DTD XHTML 1.0
Strict//EN”
„http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”
<?php language_attributes();
?>>

<head
profile=”http://gmpg.org/xfn/11″>
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‚html_type‚); ?>; charset=<?php bloginfo(‚charset‚);
?>” />

<title> <?php simple_title(‚-‚); ?> <?php
bloginfo(‚name’); ?> </title>

<meta
name=”generator” content=”WordPress
<?php bloginfo(‚version’);
?>” /> <!– leave this for stats –>

<link rel=”stylesheethref=”<?php bloginfo(‚stylesheet_url‚);
?>” type=”text/css
media=”screen” />
<link rel=”alternate”
type=”application/rss+xml
title=”<?php bloginfo(‚name’);
?> RSS Feed” href=”<?php bloginfo(‚rss2_url’);
?>” />
<link rel=”pingback
href=”<?php bloginfo(‚pingback_url‚);
?>” />

<?php wp_head(); ?>
</head>
<body>

<div id=”mainContainer„>

<div id=”header”></div>

Pewnie zauważyłeś, że zmieniłem domyślny sposób wyświetlania tytułu strony. Chciałem by tytuł był odczytywany „Nazwa strony – nazwa witryny”, niż domyślny sposób WordPressa. „simple_title” jest moją nazwą własną, wygenerowaną za pomocą wtyczki stworzonej przez Aaron Schaefer z ElasticDog.com.

Krok czwarty: Dostosowywanie pliku index

Wporządku! Stworzyliśmy nasz szablon pliku nagłówkowego teraz nadszedł czas na przygotowanie pliku index.

  1. Otwórz “domyślny” plik szablonu (index.php) i spójrz na niego. Powinieneś zobaczyć coś podobnego do kodu poniżej:

<?php get_header(); ?>

<div
id=”content” class=”narrowcolumn”>

<?php if (have_posts()) :
?>

<?php while
(have_posts()) : the_post(); ?>

<div
class=”post” id=”post-<?php the_ID(); ?>”>
<h2><a href=”<?php the_permalink() ?>”
rel=”bookmark” title=”Permanent Link to <?php the_title();
?>”><?php the_title(); ?></a></h2>
<small><?php the_time(‚F jS, Y’) ?> <!– by <?php
the_author() ?> –></small>

<div
class=”entry”>
<?php the_content(‚Read the rest of this entry &raquo;’); ?>
</div>

<p
class=”postmetadata”>Posted in <?php the_category(‚, ‚) ?> |
<?php edit_post_link(‚Edit’, ”, ‚ | ‚); ?> <?php
comments_popup_link(‚No Comments &#187;’, ‚1 Comment &#187;’, ‚%
Comments &#187;’); ?></p>
</div>

<?php endwhile; ?>

<div
class=”navigation”
<div class=”alignleft”><?php next_posts_link(‚&laquo;
Previous Entries’) ?></div>
<div class=”alignright”><?php previous_posts_link(‚Next
Entries &raquo;’) ?></div>
</div>

<?php else : ?>

<h2 class=”center”>Not Found</h2>
<p class=”center”>Sorry, but you are looking for something that isn’t here.</p>
<?php include (TEMPLATEPATH . „/searchform.php”); ?>

<?php endif; ?>

</div>

<?php get_sidebar();?>

<?php get_footer(); ?>

(Pomiń tą część jeśli masz podstawową wiedzę dotyczącą programowania w PHP)

Krótkie wyjaśnienie: Przyjrzyjmy się na moment i zastanówmy się działa ten szablon. Na górze mamy <?php get_header(); ?>. Co on robi? Mówi on WordPressowi by poszukał pliku header.php i „dołączył” go, gdy wygeneruje domyślną stronę index dla twojego nowego motywu.

Następnie, WordPress „w pętli” generuje kod <?php if (have_posts()) : ?>. Wewnątrz tego kodu, który kończy się <?php endif; ?>, WordPress “dołącza” treści publikowane z poziomu administracyjnego WordPressa. Dla przykładu w prostym szablonie bloga, będą dołączane ostatnie wpisy. Dzięki pętli WordPressa, jesteśmy w stanie używać HTMLa jak również tagów WordPressa, by zdecydować, jaka treść będzie dołączana i w jaki sposób chcemy ją wyświetlić.

Dla przykładu, spójrzmy szybko na następujący fragment kodu:

<small><?php the_time(‚F jS, Y’) ?> <!– by <?php the_author() ?> –></small>

Elementy <?php ?> czerpią informacje z WordPressa i dostarczają ją do Ciebie w takim formacie jakim chcesz. Gdy umieścimy w pętli element <?php the_author() ?>, wyświetli on nam imię i nazwisko autora bieżącego postu, zdefiniowanego w panelu administracyjnym WordPressa. Należy zauważyć, iż posiada on tagi komentarzy HTML dookoła. Oznacza to, iż mimo jest on w kodzie źródłowym, „domyślnie” autor szablonu zdecydował się by go nie wyświetlać.

Przećwiczmy szybkie przegrupowanie:

<span class=”author”>Cheerfully writen on <?php the_time(‚M d, Y’) ?> by <?php the_author() ?></span>

Tagi szablonu, będą dynamicznie zamienione informacją z WordPressa a na wyjściu otrzymamy coś takiego:

Cheerfully written on May 2, 2007 by Jonathan

  1. Wporządku, idziemy dalej – weźmy istniejący plik index.php i zmodyfikujmy go, dodając elementy z własnego projektu i zamieniając statyczne elementy odpowiednimi tagami szablonu.

Dla przykładu wejźmy taki fragment kodu: <div id=”contentHeader”><h1>Tytuł artykułu powinien być tutaj</h1></div> – By zamienić tytuł Tytuł artykułu powinien być tutaj” odpowiednim tytułem z wpisów WordPressa, to co musimy zrobić to zamienić fragment kodu na coś takiego:

<div id=”contentHeader”><h1><?php the_title(); ?></h1></div>

Bardzo ładnie, co? W naszym przykładzie poniżej, poszliśmy krok naprzód i stworzyliśmy hiperłącze do tytułu, używając WordPressa, do dynamicznego pobierania adresu URL z wpisu, <?php the_permalink() ?>, i umieszczenie go znacznikiem <a>. Poniżej kompletny przykład ze zmianami zaznaczonymi na niebiesko.

<?php get_header(); ?>
<div id=”notice”><p>Important Notice Goes
Here</p></div>

<div id=”contentContainer” class=”withSidebar„>
<div id=”content”>

<?php if (have_posts()) : ?>

<?php while (have_posts()) : the_post(); ?>

<div id=”contentHeader„><h1><a
href=”<?php the_permalink() ?>” rel=”bookmark”
title=”Permanent Link to <?php the_title(); ?>”><?php
the_title(); ?></a></h1></div>

<?php the_content(‚Read
More’); ?>

<span class=”readMore„>Continue
Reading</span>

<div id=”contentFooter„><p>Published
<?php the_time(‚M d, Y’) ?> – <?php comments_popup_link(‚Comments?
None yet’, ‚1 Comment so far’, ‚% Comments and counting’); ?>
</p></div>

<?php endwhile; ?>

<?php else : ?>

<h2 class=”center”>Not Found</h2>
<p class=”center”>Sorry, but you are looking for something that
isn’t here.</p>
<?php include (TEMPLATEPATH . „/searchform.php„); ?>

<?php endif; ?>

</div>
<!– Content Ends –>
</div> <!– Content Container Ends –>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Krok piąty: Dostosowywanie paska bocznego

Teraz, gdy mamy nagłówek i plik indeksu naszego szablonu w odpowiednim miejscu, nadszedł czas by zająć się paskiem bocznym. Dla tych, pracujących na szablonie bez paska bocznego, ta sekcja jest do pominięcia. Ale dla tych, którzy szukają czegoś bardziej zaawansowanego ta sekcja może być interesująca, polecam spojrzeć na ten rozdział by być pewnym, że nic się nie pominęło.

  1. Zacznijmy jeszcze raz, skupiając uwagę na „domyślnym” kodzie źródłowym:

<div id=”sidebar”>
<ul>

<li>
<?php include (TEMPLATEPATH . ‚/searchform.php’); ?>
</li>

<!– Author information is disabled per default. Uncomment
and fill in your details if you want to use it.

<li><h2>Author</h2>
<p>A little something about you, the author. Nothing
lengthy, just an overview.</p>

</li>
–>

<li>
<?php /* If this is a 404 page */ if (is_404()) { ?>
<?php /* If this is a category archive */ } elseif (is_category()) { ?>
<p>You are currently browsing the archives for the <?php
single_cat_title(”); ?> category.</p>

<?php /* If this is a
yearly archive */ } elseif (is_day()) { ?>
<p>You are currently browsing the <a href=”<?php
bloginfo(‚home’); ?>/”><?php echo bloginfo(‚name’);
?></a> weblog archives
for the day <?php the_time(‚l, F jS, Y’); ?>.</p>

<?php /* If this is a
monthly archive */ } elseif (is_month()) { ?>
<p>You are currently browsing the <a href=”<?php
bloginfo(‚home’); ?>/”><?php echo bloginfo(‚name’);
?></a> weblog archives
for <?php the_time(‚F, Y’); ?>.</p>

<?php /* If this is a
yearly archive */ } elseif (is_year()) { ?>
<p>You are currently browsing the <a href=”<?php
bloginfo(‚home’); ?>/”><?php echo bloginfo(‚name’);
?></a> weblog archives
for the year <?php the_time(‚Y’); ?>.</p>

<?php /* If this is a
monthly archive */ } elseif (is_search()) { ?>
<p>You have searched the <a href=”<?php echo bloginfo(‚home’);
?>/”><?php echo bloginfo(‚name’); ?></a> weblog archives
for <strong>'<?php the_search_query(); ?>'</strong>. If you
are unable to find anything in these search results, you can try one of these
links.</p>

<?php /* If this is a
monthly archive */ } elseif (isset($_GET[‚paged’]) &&
!empty($_GET[‚paged’])) { ?>
<p>You are currently browsing the <a href=”<?php echo
bloginfo(‚home’); ?>/”><?php echo bloginfo(‚name’);
?></a> weblog archives.</p>

<?php } ?>
</li>

<?php wp_list_pages(‚title_li=<h2>Pages</h2>’ ); ?>

<li><h2>Archives</h2>
<ul>
<?php wp_get_archives(‚type=monthly’); ?>
</ul>
</li>

<?php wp_list_categories(‚show_count=1&title_li=<h2>Categories</h2>’); ?>

<?php /* If this is the frontpage */ if ( is_home() || is_page() ) { ?>
<?php wp_list_bookmarks(); ?>

<li><h2>Meta</h2>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a
href=”http://validator.w3.org/check/referer” title=”This page
validates as XHTML 1.0 Transitional”>Valid <abbr
title=”eXtensible HyperText Markup
Language”>XHTML</abbr></a></li>

<li><a
href=”http://gmpg.org/xfn/”><abbr title=”XHTML Friends
Network”>XFN</abbr></a></li>

<li><a href=”http://wordpress.org/”
title=”Powered by WordPress, state-of-the-art semantic personal publishing
platform.”>WordPress</a></li>

<?php wp_meta(); ?>
</ul>
</li>
<?php } ?>

</ul>
</div>

  1. Fiu! Jak widać, z wszystkimi elementami zaznaczonymi na czerwono do zmiany, mamy trochę pracy do wykonania. Domyślny szablon WordPressa, używa nieposortowanej listy, która „zawiera” elementy menu, każdy element w pasku bocznym posiada znacznik <li> a każdy z tych elementów na liście posiada swoją własną odpowiednią listę. Ze względu na dobro projektu i naszego przykładu dokonamy pewnych zmian w pasku bocznym poza naszą nieuporządkowaną listę.

Po pierwsze nasz ostateczny kod, potem dokonamy jego rozbioru

<div class=”rightColumnContainer”>
<div class=”rightColumn”>
<h2>The Author</h2>
<p class=”small”>Jonathan Wold is a 20 year
old Internet Entrepreneur who believes that faith and works are inseparable.
Here you’ll find examples of faith, web design, niche marketing, CSS,
Wordpress, and more.</p>

<?php /* If this is a 404 page */ if (is_404()) { ?>
<?php /* If this is a category archive */ } elseif (is_category()) { ?>
<p>You are currently browsing the archives for the <?php
single_cat_title(”); ?> category.</p>

<?php /* If this is a
yearly archive */ } elseif (is_day()) { ?>
<p>You are currently browsing the <a href=”<?php
bloginfo(‚home’); ?>/”><?php echo bloginfo(‚name’);
?></a> weblog archives
for the day <?php the_time(‚l, F jS, Y’); ?>.</p>

<?php /* If this is a
monthly archive */ } elseif (is_month()) { ?>
<p>You are currently browsing the <a href=”<?php
bloginfo(‚home’); ?>/”><?php echo bloginfo(‚name’);
?></a> weblog archives for <?php the_time(‚F, Y’); ?>.</p>

<?php /* If this is a yearly archive */ } elseif (is_year()) { ?>
<p>You are currently browsing the <a href=”<?php
bloginfo(‚home’); ?>/”><?php echo bloginfo(‚name’);
?></a> weblog archives
for the year <?php the_time(‚Y’); ?>.</p>

<?php /* If this is a
monthly archive */ } elseif (is_search()) { ?>
<p>You have searched the <a href=”<?php echo bloginfo(‚home’);
?>/”><?php echo bloginfo(‚name’); ?></a> weblog archives
for <strong>'<?php the_search_query(); ?>'</strong>. If you
are unable to find anything in these search results, you can try one of these
links.</p>

<?php /* If this is a
monthly archive */ } elseif (isset($_GET[‚paged’]) &&
!empty($_GET[‚paged’])) { ?>
<p>You are currently browsing the <a href=”<?php echo
bloginfo(‚home’); ?>/”><?php echo bloginfo(‚name’);
?></a> weblog archives.</p>

<?php } ?>

<h2>Pages of Interest</h2>
<ul>
<?php wp_list_pages(‚title_li=’); ?> <!– This fetches a list of pages with an <li> tag without a headline –>
</ul>
<h2>Post Categories</h2>
<ul>
<?php wp_list_categories(‚show_count=1&title_li=’); ?> <!– This does the same –>
</ul>
<h2>Post Archives</h2>
<ul>
<?php wp_get_archives(‚type=monthly’); ?>
</ul>
<h2>Looking for more?</h2>
<?php include (TEMPLATEPATH . ‚/searchform.php’); ?>

</div> <!– 1st „Box” ends here – 2nd Column Box Begins Below –>

<div class=”rightColumn base”>
<h2>Sponsors</h2>
<p><a href=”http://jonathanwold.com/sponsors”>Sponsor This Site</a></p>
</div> <!– 2nd Column Box Ends Here –>
</div> <!– Right Column Container Ends –>

Oprócz dynamicznych wiadomości, (które będziemy później dostosowywać), można zauważyć, że wszystko zostało zmienione w porównaniu z oryginalną wersją. Chociaż jest sporo rzeczy, na których można się skupić i wytłumaczyć tutaj, mam zamiar skupić się na użyciu tagów szablonu i zostawić resztą do zapoznania się we własnym zakresie.

Spójrzmy na tagi szablonu, „Pages” (wp_list_pages). Ten przydatny mały tag tworzy listę wszystkich „stron” (ang. pages) które zostały stworzone w WordPressie i wyświetla je. Wewnątrz tagu istnieje możliwość umieszczenia parametrów, które mówią WordPressowi, jak powinien być sformatowany, co wyświetlić, itp. By dowiedzieć się więcej polecam zapoznanie się z listą tagów w szablonie w dokumentacji WordPress Codex.

Wporządku, spójrzmy teraz na przykład. „Domyślny” szablon używa następującego kodu do wyświetlenia listy stron:

<?php wp_list_pages(‚title_li=<h2>Pages</h2>’ ); ?>

Powoduje to wyodrębnienie listy stron z WordPressa a następnie dodanie tagu <h2> zaraz na jego górze. Byłoby to doskonałe w użyciu, poza tym że WordPress również dodaje elementy „strony” wewnątrz zbioru list, co w rezultacie daje nam kod podobny do poniższego:

<li class=”pagenav”><h2>Pages of Interest</h2><ul><li><a href=”http://woldboys.com/testing/?page_id=2″ title=”About”>About</a></li>
</ul></li>

Ze znacznikiem, który wybrałem, wyrenderuje to niepoprawny kod XHTML, a ponieważ nie chcę tego, najprościej byłoby usunięcie nagłówka z WordPressa.  By to zrobić należałoby użyć pustego parametru „title_li” jak poniżej:

<?php wp_list_pages(‚title_li=’); ?>

I to by było na tyle! – Informacje dotyczące dostosowania do własnych potrzeb tagów szablonu można znaleźć na stronie Codex w WordPressie.

Krok szósty: Zakończenie ze stopką

Wporządku. Już powoli jesteśmy na finiszu. Zajmijmy się teraz naszą stopką.

  1. Na początku spójrzmy na naszą “domyślną” stopkę:

<hr/>
<div id=”footer”>
<!– If you’d like to support WordPress, having
the „powered by” link someone on your blog
is the best way, it’s our only promotion or advertising. –>
<p>
<?php bloginfo(‚name’);
?> is proudly powered by
<a href=”http://wordpress.org/”>WordPress</a>
<br /><a href=”<?php bloginfo(‚rss2_url’);
?>”>Entries (RSS)</a>
and <a href=”<?php
bloginfo(‚comments_rss2_url’);
?>”>Comments (RSS)</a>.
<!– <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?>
seconds. –>
</p>
</div>
</div>

<!– Gorgeous design
by Michael Heilemann
http://binarybonsai.com/kubrick/ –>
<?php /* „Just what do you think you’re doing
Dave?” */ ?>

<?php wp_footer(); ?>
</body>
</html>

  1. Następnie spójrzmy na nasze modyfikacje:

<br id=”clear” />

<div id=”footer”>
<p>You’re welcome to share what you find here with whomever you’d like in
whatever way you’d like to. If you have questions, comments, or suggestions,
<a href=”http://jonathanwold.com/contact”>contact
me</a> :).</p>
</div>

</div>
<!– Main Container Ends –>

<?php wp_footer();
?>
</body>
</html>

Uwaga: Nawet jeśli nie zauważyłeś, chciałbym wspomnieć że usunąłem link ze stopki WordPressa. Podczas gdy nie będzie on umieszczony w motywie, chcę by było jasne że w żaden sposób nie wycofuję swojego poparcia dla WordPressa. Umieszczę linki w liście moich polecanych stron, jak również będę kontynuował wsparcie dla motywów typu open source, pluginów i polecał tych którzy będą współpracować ze mną w tej materii.

Pracując na swoim szablonie, gdy nie masz okazji by pokazać swoje wsparcie  dla wspaniałej pracę jaką włożono by stworzyć WordPressa, zalecam zostawienie linku bez zmian.

Krok siódmy: Dodatkowy szablon strony

Zauważcie, że omówiliśmy szczegóły, nadszedł czas by wkroczyć w nowe terytorium i trochę samemu poeksperymentować. Dla tego konkretnego przypadku, omówię dostosowanie szablonu przez modyfikację następujących plików:

  • single.php – mówi on WordPressowi, jak wyświetlić pojedynczy wpis
  • searchform.php – umożliwia on dostosowanie szablonu i odwołań do pliku sidebar.php, zintegrowanego z funkcją szukaj WordPressa i pozwala utworzyć styl taki jakich chcesz. Dodałem element „size=12” do formularza szukaj, by był on dopasowany do wnętrza kolumny.
  • page.php – ten plik mówi WordPressowi jak wyświetlać pojedyncze strony
  • search.php – ten mówi WordPressowi jak wyświetlać rezultaty wyszukiwań
  • comments.php – ten strasznie wyglądający na pierwszy rzut oka plik mówi WordPressowi jak wyświetlać twoje komentarze.
  • archives.php – ten mówi WordPressowi jak wyświetlać archiwum wpisów/postów

Krok ósmy: Zakończenie

Ostatnim krokiem jest zamiana pliku arkuszów stylu style.css na swój własny, oraz zmiana informacji o szablonie.

The last step is to replace the styles in style.css with your own and to edit the theme information. “Domyślny” komentarz nagłówka wygląda w sposób opisany poniżej:

/*
Theme Name: WordPress Default
Theme URI: http://wordpress.org/
Description: The default WordPress theme based on the famous <a href=”http://binarybonsai.com/kubrick/”>Kubrick</a>.
Version: 1.6
Author: Michael Heilemann
Author URI: http://binarybonsai.com/

Kubrick v1.5

http://binarybonsai.com/kubrick/

This theme was designed and built by Michael Heilemann,
whose blog you will find at http://binarybonsai.com/

The CSS, XHTML and design is released under GPL:

http://www.opensource.org/licenses/gpl-license.php

*/

A moja prosta modyfikacja wyglada w sposób następujący:

/*
Theme Name: Light Blue ’07
Theme URI: http://www.wpmastery.com
Description: A simple theme for Jonathan’s blog
Version: 1.0
Author: Jonathan Wold
Author URI: http://www.jonathanwold.com

*/

I to by wszystko.

 


Polecane strony:

 

© 2018 Programowanie w Wordpressie