AJk zrobić szablon na bloga WordPress? Jehst to dość częste pytanie początkujących webmasterów. Stworzenie prostego motywu na bloga wcale nie jest takie trudne jak mogłoby się wydawać. Wystarczy edytora tekstowego ( w moim przypadku jest to Notepad), trochę cierpliwości i umiejętności w zakresie pracy z HTML i CSS. W tym artykułu pakażę, jak zrobić prosty motyw WordPress na podstawie gotowego rozwiązania.
Wybrałam jeden z darmowych motywów WordPress z TemplateMonster marketplace. Dlaczego? Dlaczego wykorzystam "gotowy" kod, a nie będę tworzyłam motyw "od zera"? Ponieważ wykorzystanie gotowych rozwiązań znacznie ułatwia pracę, zwłaszcza jeśli jesteś początkującym w kodowaniu i projektowaniu.
How to make a template for a blog?
Przed rozpoczęciem pracy będziemy potrzebowali kilku rzeczy - zainstalowanego WordPress i gotowego projektu do motywu zakodowany w HTML i CSS (pobrany darmowy motyw). Nie musi on być wyposażony we wszystkie funkcji WordPress, ważne jest aby miałeś układ strony. Polecamy aby wykorzystać projekt, w którym układ jest zaprojektowany z wykorzystaniem arkuszów stylów CSS. Ja wybrałam motyw, zakodowany w CSS i XHTML.
Obszar pod szablon
W tym tutorial ja będę pracowała na domyślnym motywie WordPressa. Na początek to, wyczyszamy go. Będzie on służył jako punkt wyjściowy do stworzenia naszego motywu. Kopiuję domyślny motyw z foldera wp-content/themes/ i dodaję go wraz z kopią swojego projektu do nowego folderu.
Dodawanie nagłówka
Dalej zaczynamy pracować z skopiowanym folderem z domyślnym motywem aby usunąć niektóre jego elementy. Otwieram plik header.php, jego zawartość wygląda tak:
<!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() ) { ?> » 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 />
|
Usuwamy czerwone sekcję kodu i zapisujemy zmiany. Otwieramy plik HTML z układem 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>
|
Kopiujemy kod nagłówka i dodajemy do swojego pliku z motywem WordPress zamieniając istniejącą część kodu swoim własnym:
<!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=”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‚);
?>” />
<?php wp_head(); ?>
</head>
<body>
<div id=”mainContainer„>
<div id=”header”></div>
|
Index
Otwieramy plik index.php domyślnego motywu. Wygląda tak:
<div class="wp_syntax">
<table>
<tbody>
<tr>
<td class="code">
<pre class="php" style="font-family: monospace;"><code><!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’);
?>” />
<span style="color: #ff0000;"><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></span>
<?php wp_head(); ?>
</head>
<body>
<span style="color: #ff0000;"><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 />
</span></code></pre>
</td>
</tr>
</tbody>
</table>
</div>
|
Modyfikujemy ten plik, zamieniając statyczne elementy na odpowiednie tagi motywu i dodając elementy własnego projektu.
Stopka
Dalej przechodzimy do dostosowania stopki. Kod domyślny wygląda tak.
<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>
|
Zmianiamy czerwony kod na (zmiany kodu są niebieskiego koloru):
<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>
|
Dodatkowo
Dalej możesz dostosować następujące pliki:
- single.php – jest odowiedziałny za wyświetlenie pojedynczych wpisów;
- page.php – jest odowiedziałny za wyświetlenie pojedynczych stron;
- search.php – wyświetla rezultaty wyszukiwań;
- comments.php – wyświetla komentarze;
- archives.php – jest odowiedziałny za wyświetlenie archiwum wpisów.
Dalej zmieniamy plik arkuszów stylu style.css na swój własny i dodajemy informacje o motywie. Aby to zrobić zmodyfikuj czerowne sekcje kodu domyślnego.
/*
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
*/
|
I to wszystko. Masz gotowy szablon na bloga WordPress.
* * *
Tak. Stworzenie prostego motywu WordPress jest dość łatwe. A jeśli chciałbyś aby Twój blog miał bardziej zaawansowane funkcje, polecam nie szukać w Google informacji w stylu "how to make a template for a blog", a wybrać jeden z naszych gotowych motywów WordPress.
Motywy WordPress
