{"id":5735,"date":"2018-03-26T12:20:18","date_gmt":"2018-03-26T12:20:18","guid":{"rendered":"https:\/\/www.templatemonster.com\/pl\/blog\/?p=5735"},"modified":"2020-03-27T09:19:31","modified_gmt":"2020-03-27T09:19:31","slug":"jak-zrobic-szablon-bloga-wordpress","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/pl\/jak-zrobic-szablon-bloga-wordpress\/","title":{"rendered":"Kr\u00f3tki tutorial: jak zrobi\u0107 szablon na bloga na WordPressie?"},"content":{"rendered":"

AJk zrobi\u0107 szablon na bloga WordPress? Jehst to do\u015b\u0107 cz\u0119ste pytanie pocz\u0105tkuj\u0105cych webmaster\u00f3w. Stworzenie\u00a0prostego motywu na bloga wcale nie jest takie trudne jak mog\u0142oby si\u0119 wydawa\u0107. Wystarczy\u00a0edytora tekstowego\u00a0( w moim przypadku jest to Notepad),\u00a0troch\u0119 cierpliwo\u015bci\u00a0i\u00a0umiej\u0119tno\u015bci w zakresie pracy z HTML i CSS.\u00a0W tym artyku\u0142u paka\u017c\u0119, jak zrobi\u0107 prosty motyw WordPress na podstawie gotowego rozwi\u0105zania.<\/p>\n

Wybra\u0142am jeden z\u00a0darmowych motyw\u00f3w WordPress<\/a> z TemplateMonster marketplace<\/a>. Dlaczego? Dlaczego wykorzystam \"gotowy\" kod, a nie b\u0119d\u0119 tworzy\u0142am motyw \"od zera\"? Poniewa\u017c wykorzystanie gotowych rozwi\u0105za\u0144 znacznie\u00a0u\u0142atwia prac\u0119, zw\u0142aszcza je\u015bli jeste\u015b pocz\u0105tkuj\u0105cym w kodowaniu i projektowaniu.<\/p>\n

How to make a template for a blog?<\/h2>\n

Przed rozpocz\u0119ciem pracy b\u0119dziemy potrzebowali kilku rzeczy - zainstalowanego WordPress<\/a> i gotowego\u00a0projektu do\u00a0motywu zakodowany w HTML i CSS (pobrany\u00a0darmowy motyw). Nie musi on by\u0107 wyposa\u017cony we wszystkie funkcji WordPress, wa\u017cne jest aby mia\u0142e\u015b uk\u0142ad strony. Polecamy aby\u00a0wykorzysta\u0107 projekt, w kt\u00f3rym\u00a0uk\u0142ad jest zaprojektowany\u00a0z wykorzystaniem\u00a0arkusz\u00f3w styl\u00f3w CSS. Ja wybra\u0142am motyw, zakodowany w CSS i XHTML.<\/p>\n

Obszar pod szablon<\/strong><\/h3>\n

W tym tutorial ja b\u0119d\u0119 pracowa\u0142a na domy\u015blnym\u00a0motywie WordPressa.\u00a0Na pocz\u0105tek to, wyczyszamy go. B\u0119dzie on s\u0142u\u017cy\u0142 jako punkt wyj\u015bciowy do stworzenia naszego motywu. Kopiuj\u0119\u00a0domy\u015blny motyw z foldera wp-content\/themes\/ i\u00a0dodaj\u0119 go wraz z kopi\u0105 swojego projektu do nowego folderu.<\/p>\n

Dodawanie nag\u0142\u00f3wka<\/strong><\/h3>\n

Dalej\u00a0zaczynamy pracowa\u0107\u00a0z skopiowanym\u00a0folderem\u00a0z domy\u015blnym motywem aby usun\u0105\u0107 niekt\u00f3re jego elementy. Otwieram plik header.php, jego zawarto\u015b\u0107 wygl\u0105da tak:<\/p>\n

\n\n\n\n
\n
<!DOCTYPE html PUBLIC\r\n\u201e-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\u201d\r\n\u201ehttp:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\u201d>\r\n<html xmlns=\u201dhttp:\/\/www.w3.org\/1999\/xhtml\u201d <?php\r\nlanguage_attributes(); ?>>\r\n<head\r\nprofile=\u201dhttp:\/\/gmpg.org\/xfn\/11\u2033>\r\n<meta http-equiv=\u201dContent-Type\u201d content=\u201d<?php\r\nbloginfo(\u201ahtml_type\u2019); ?>; charset=<?php bloginfo(\u201acharset\u2019); ?>\u201d\r\n\/>\r\n<title><?php\r\nbloginfo(\u201aname\u2019); ?> <?php if ( is_single() ) { ?> &raquo; Blog\r\nArchive <?php } ?> <?php wp_title(); ?><\/title>\r\n<meta\r\nname=\u201dgenerator\u201d content=\u201dWordPress <?php\r\nbloginfo(\u201aversion\u2019); ?>\u201d \/> <!\u2013 leave this for stats \u2013>\r\n<link\r\nrel=\u201dstylesheet\u201d href=\u201d<?php bloginfo(\u201astylesheet_url\u2019);\r\n?>\u201d type=\u201dtext\/css\u201d media=\u201dscreen\u201d \/>\r\n<link rel=\u201dalternate\u201d type=\u201dapplication\/rss+xml\u201d\r\ntitle=\u201d<?php bloginfo(\u201aname\u2019); ?> RSS Feed\u201d href=\u201d<?php\r\nbloginfo(\u201arss2_url\u2019); ?>\u201d \/>\r\n<link rel=\u201dpingback\u201d href=\u201d<?php bloginfo(\u201apingback_url\u2019);\r\n?>\u201d \/>\r\n<style\r\ntype=\u201dtext\/css\u201d media=\u201dscreen\u201d>\r\n<?php\r\n\/\/ Checks to see whether it needs a sidebar or not\r\nif ( !$withcomments && !is_single() ) {\r\n?>\r\n#page { background: url(\u201e<?php bloginfo(\u201astylesheet_directory\u2019);\r\n?>\/images\/kubrickbg.jpg\u201d) repeat-y top; border: none; }\r\n<?php } else { \/\/ No sidebar ?>\r\n#page { background: url(\u201e<?php bloginfo(\u201astylesheet_directory\u2019);\r\n?>\/images\/kubrickbgwide.jpg\u201d) repeat-y top; border: none; }\r\n<?php } ?>\r\n<\/style><\/span>\r\n<?php wp_head(); ?>\r\n<\/head>\r\n<body>\r\n<div id=\u201dpage\u201d>\r\n<div id=\u201dheader\u201d>\r\n<div id=\u201dheaderimg\u201d>\r\n<h1><a href=\u201d<?php echo get_option(\u201ahome\u2019);\r\n?>\/\u201d><?php bloginfo(\u201aname\u2019); ?><\/a><\/h1>\r\n<div class=\u201ddescription\u201d><?php\r\nbloginfo(\u201adescription\u2019); ?><\/div>\r\n<\/div>\r\n<\/div>\r\n<hr \/>\r\n<\/span><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Usuwamy czerwone\u00a0sekcj\u0119 kodu\u00a0i zapisujemy zmiany. Otwieramy plik HTML\u00a0z uk\u0142adem\u00a0strony.<\/p>\n
\n\n\n\n
\n
<!DOCTYPE\r\nhtml PUBLIC \u201e-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN\u201d\r\n\u201ehttp:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\u201d>\r\n<html><head>\r\n<meta http-equiv=\u201dContent-Type\u201d content=\u201dtext\/html; charset=iso-8859-1\u2033 \/>\r\n<title>Life of an Internet Entrepreneur \u2013 Jonathan Wold<\/title>\r\n<link href=\u201dstyle.css\u201d\r\nrel=\u201dstylesheet\u201d\r\ntype=\u201dtext\/css\u201d \/><\/head>\r\n<body><\/span>\r\n\r\n<div<\/span>\r\nid=\u201dmainContainer\u201e><\/span>\r\n\r\n<div<\/span>\r\nid=\u201dheader\u201d><\/div><\/span>\r\n\r\n<div<\/span>\r\nid=\u201dnotice\u201d><p>Important Notice Goes<\/span>\r\nHere<\/p><\/div><\/span>\r\n<div id=\u201dcontentContainer\u201d<\/span>\r\nclass=\u201dwithSidebar\u201e> <\/span>\r\n<div id=\u201dcontent\u201d><\/span>\r\n\r\n<div id=\u201dcontentHeader\u201e><h1>Content<\/span>\r\nTitle Goes Here<\/h1><\/div><\/span>\r\n<p>Lorem ipsum<\/span>\r\ndolor sit amet. Con minimim venami quis nostrud laboris nisi ut aliquip<\/span>\r\nex ea com dolor in reprehenderit in voluptate nonumi. Mimimum veniami ex ea con<\/span>\r\ndolor nisi ut aliquip. Consequat Duis autem vel eum iruire dolor in endrerit,<\/span>\r\nvoluptate velit est. Sit amet, consectetuer<\/span>\r\nadipiscing elit, sed diam nonummi.<\/span>\r\nEuismod tincidunt ut laroeet dolore<\/span>\r\nmagna aliquam erat voluptat.<\/p><\/span>\r\n<p>Ut wisi<\/span>\r\nenin ad minim. Quis nostrud ad nostris<\/span>\r\npro amat. Sed aliquo<\/span>\r\nut nisi alter ego qid<\/span>\r\npropter anno et cetera. Ullam venit cum permissio, alter ego<\/span>\r\ncum frater et patris et mater inter familias. Vel illum dolore eu feugiat nulla facilitis<\/span>\r\nad vero eros et accususam et lustro odio dignissim qui blandit praeset lupatum<\/span>\r\nauge duis aplore. Mimimum veniami ex ea con dolor nisi ut aliquip. Consequat<\/span>\r\nDuis autem vel eum iruire dolor in endrerit, voluptate velit est. Sit amet, consectetuer adipiscing elit, sed diam<\/span>\r\nnonummi.<\/p><\/span>\r\n<span class=\u201dreadMore\u201e>Continue<\/span>\r\nReading<\/span><\/span>\r\n<div id=\u201dcontentFooter\u201e><\/span>\r\n<p>Published May 2, 2007 \u2013 Comments? None yet<\/span>\r\n<\/p><\/span>\r\n<\/div><\/span>\r\n<\/div> <!\u2013 Content Ends<\/span>\r\n\u2013><\/span>\r\n<\/div> <!\u2013 Content Container Ends \u2013><\/span>\r\n\r\n<div<\/span>\r\nclass=\u201drightColumnContainer\u201e><\/span>\r\n<div class=\u201drightColumn\u201e><\/span>\r\n<h2>The Author<\/h2><\/span>\r\n<p class=\u201dsmall\u201d>Jonathan Wold is a<\/span>\r\n20 year old Internet Entrepreneur who believes that faith and works are inseparable.<\/span>\r\nHere you\u2019ll find examples of faith, web design, niche marketing, CSS, WordPress, and more.<\/p><\/span>\r\n<h2>Categories<\/h2><\/span>\r\n<ul><\/span>\r\n<li>Niche Marketing (15)<\/li><\/span>\r\n<li>Faith I Live By (12)<\/li><\/span>\r\n<li>Web Design (5)<\/li><\/span>\r\n<li>Life Updates (9)<\/li><\/span>\r\n<li>WordPress (15)<\/li><\/span>\r\n<\/ul><\/span>\r\n<h2>Blog Pages<\/h2><\/span>\r\n<ul><\/span>\r\n<li>Excellent Blogs<\/li><\/span>\r\n<li>Excellent Websites<\/li><\/span>\r\n<li>Excellent Books<\/li><\/span>\r\n<li>Active Projects<\/li><\/span>\r\n<\/ul><\/span>\r\n<\/div> <!\u2013 First \u201ebox\u201d of content ends here, second box<\/span>\r\nbegin below \u2013><\/span>\r\n\r\n<div class=\u201drightColumn\u201e><\/span>\r\n<h2>Sponsors<\/h2> <\/span>\r\n<p>Sponsor This Site<\/p><\/span>\r\n<\/div> <!\u2013 2nd box of<\/span>\r\ncontent ends here \u2013><\/span>\r\n<\/div> <!\u2013 Right Column Container Ends \u2013><\/span>\r\n\r\n<div<\/span>\r\nid=\u201dclear\u201d><\/div><\/span>\r\n\r\n<div<\/span>\r\nid=\u201dfooter\u201d><\/span>\r\n<p>You\u2019re welcome to share what you find here with whomever you\u2019d like in<\/span>\r\nwhatever way you\u2019d like to. If you have questions, comments, or suggestions,<\/span>\r\ncontact me :).<\/p><\/span>\r\n<p>Virtual Empire (What is this?): <a href=\u201d#\u201d>Links<\/span>\r\nto Various Sites <\/a><\/p><\/span>\r\n<\/div><\/span>\r\n\r\n<\/div><\/span>\r\n<!\u2013 Main Container Ends \u2013><\/span>\r\n\r\n<\/body><\/span>\r\n<\/html><\/span><\/span><\/span><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Kopiujemy kod nag\u0142\u00f3wka i dodajemy do swojego pliku z motywem\u00a0\u00a0WordPress zamieniaj\u0105c istniej\u0105c\u0105 cz\u0119\u015b\u0107 kodu swoim w\u0142asnym:<\/p>\n
\n\n\n\n
\n
<!DOCTYPE html PUBLIC \u201e-\/\/W3C\/\/DTD XHTML 1.0<\/span>\r\nStrict\/\/EN\u201d<\/span>\r\n\u201ehttp:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd\u201d><\/span>\r\n<html xmlns=\u201dhttp:\/\/www.w3.org\/1999\/xhtml\u201d<\/span>\r\n<?php language_attributes();<\/span>\r\n?><\/span>>\r\n\r\n<head\r\nprofile=\u201dhttp:\/\/gmpg.org\/xfn\/11\u2033>\r\n<meta http-equiv=\u201dContent-Type\u201d content=\u201d<?php bloginfo(\u201ahtml_type\u201a); ?>; charset=<?php bloginfo(\u201acharset\u201a);\r\n?>\u201d \/>\r\n\r\n<title> <?php simple_title(\u201a-\u201a); ?> <?php<\/span>\r\nbloginfo(\u201aname\u2019); ?> <\/title><\/span>\r\n\r\n<meta\r\nname=\u201dgenerator\u201d content=\u201dWordPress\r\n<?php bloginfo(\u201aversion\u2019);\r\n?>\u201d \/> <!\u2013 leave this for stats \u2013>\r\n\r\n<link rel=\u201dstylesheet\u201d href=\u201d<?php bloginfo(\u201astylesheet_url\u201a);\r\n?>\u201d type=\u201dtext\/css\u201d\r\nmedia=\u201dscreen\u201d \/>\r\n<link rel=\u201dalternate\u201d\r\ntype=\u201dapplication\/rss+xml\u201d\r\ntitle=\u201d<?php bloginfo(\u201aname\u2019);\r\n?> RSS Feed\u201d href=\u201d<?php bloginfo(\u201arss2_url\u2019);\r\n?>\u201d \/>\r\n<link rel=\u201dpingback\u201d\r\nhref=\u201d<?php bloginfo(\u201apingback_url\u201a);\r\n?>\u201d \/>\r\n\r\n<?php wp_head(); ?>\r\n<\/head>\r\n<body>\r\n\r\n<div id=\u201dmainContainer\u201e><\/span>\r\n<div id=\u201dheader\u201d><\/div>\r\n<\/span><\/span><\/span><\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Index<\/strong><\/h3>\n
Otwieramy plik index.php domy\u015blnego motywu. Wygl\u0105da tak:<\/p>\n
\n\n\n\n
\n
<div class=\"wp_syntax\">\r\n<table>\r\n<tbody>\r\n<tr>\r\n<td class=\"code\">\r\n<pre class=\"php\" style=\"font-family: monospace;\"><code>&lt;!DOCTYPE html PUBLIC\r\n\u201e-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\u201d\r\n\u201ehttp:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\u201d&gt;\r\n&lt;html xmlns=\u201dhttp:\/\/www.w3.org\/1999\/xhtml\u201d &lt;?php\r\nlanguage_attributes(); ?&gt;&gt;\r\n&lt;head\r\nprofile=\u201dhttp:\/\/gmpg.org\/xfn\/11\u2033&gt;\r\n&lt;meta http-equiv=\u201dContent-Type\u201d content=\u201d&lt;?php\r\nbloginfo(\u201ahtml_type\u2019); ?&gt;; charset=&lt;?php bloginfo(\u201acharset\u2019); ?&gt;\u201d\r\n\/&gt;\r\n&lt;title&gt;&lt;?php\r\nbloginfo(\u201aname\u2019); ?&gt; &lt;?php if ( is_single() ) { ?&gt; &amp;raquo; Blog\r\nArchive &lt;?php } ?&gt; &lt;?php wp_title(); ?&gt;&lt;\/title&gt;\r\n&lt;meta\r\nname=\u201dgenerator\u201d content=\u201dWordPress &lt;?php\r\nbloginfo(\u201aversion\u2019); ?&gt;\u201d \/&gt; &lt;!\u2013 leave this for stats \u2013&gt;\r\n&lt;link\r\nrel=\u201dstylesheet\u201d href=\u201d&lt;?php bloginfo(\u201astylesheet_url\u2019);\r\n?&gt;\u201d type=\u201dtext\/css\u201d media=\u201dscreen\u201d \/&gt;\r\n&lt;link rel=\u201dalternate\u201d type=\u201dapplication\/rss+xml\u201d\r\ntitle=\u201d&lt;?php bloginfo(\u201aname\u2019); ?&gt; RSS Feed\u201d href=\u201d&lt;?php\r\nbloginfo(\u201arss2_url\u2019); ?&gt;\u201d \/&gt;\r\n&lt;link rel=\u201dpingback\u201d href=\u201d&lt;?php bloginfo(\u201apingback_url\u2019);\r\n?&gt;\u201d \/&gt;\r\n<span style=\"color: #ff0000;\">&lt;style\r\ntype=\u201dtext\/css\u201d media=\u201dscreen\u201d&gt;\r\n&lt;?php\r\n\/\/ Checks to see whether it needs a sidebar or not\r\nif ( !$withcomments &amp;&amp; !is_single() ) {\r\n?&gt;\r\n#page { background: url(\u201e&lt;?php bloginfo(\u201astylesheet_directory\u2019);\r\n?&gt;\/images\/kubrickbg.jpg\u201d) repeat-y top; border: none; }\r\n&lt;?php } else { \/\/ No sidebar ?&gt;\r\n#page { background: url(\u201e&lt;?php bloginfo(\u201astylesheet_directory\u2019);\r\n?&gt;\/images\/kubrickbgwide.jpg\u201d) repeat-y top; border: none; }\r\n&lt;?php } ?&gt;\r\n&lt;\/style&gt;<\/span>\r\n&lt;?php wp_head(); ?&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n<span style=\"color: #ff0000;\">&lt;div id=\u201dpage\u201d&gt;\r\n&lt;div id=\u201dheader\u201d&gt;\r\n&lt;div id=\u201dheaderimg\u201d&gt;\r\n&lt;h1&gt;&lt;a href=\u201d&lt;?php echo get_option(\u201ahome\u2019);\r\n?&gt;\/\u201d&gt;&lt;?php bloginfo(\u201aname\u2019); ?&gt;&lt;\/a&gt;&lt;\/h1&gt;\r\n&lt;div class=\u201ddescription\u201d&gt;&lt;?php\r\nbloginfo(\u201adescription\u2019); ?&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n&lt;hr \/&gt;\r\n<\/span><\/code><\/pre>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n<\/div>\r\n<\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Modyfikujemy ten plik, zamieniaj\u0105c statyczne elementy na odpowiednie tagi motywu i dodaj\u0105c elementy w\u0142asnego projektu.<\/p>\n
Stopka<\/strong><\/h3>\n
Dalej przechodzimy do dostosowania stopki. Kod domy\u015blny wygl\u0105da tak.<\/p>\n
\n\n\n\n
\n
<hr\/>\r\n<div id=\u201dfooter\u201d>\r\n<!\u2013 If you\u2019d like to support WordPress, having\r\nthe \u201epowered by\u201d link someone on your blog\r\nis the best way, it\u2019s our only promotion or advertising. \u2013>\r\n<p>\r\n<?php bloginfo(\u201aname\u2019);\r\n?> is proudly powered by\r\n<a href=\u201dhttp:\/\/wordpress.org\/\u201d>WordPress<\/a>\r\n<br \/><a href=\u201d<?php bloginfo(\u201arss2_url\u2019);\r\n?>\u201d>Entries (RSS)<\/a>\r\nand <a href=\u201d<?php\r\nbloginfo(\u201acomments_rss2_url\u2019);\r\n?>\u201d>Comments (RSS)<\/a>.\r\n<!\u2013 <?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?>\r\nseconds. \u2013>\r\n<\/p>\r\n<\/div>\r\n<\/div>\r\n\r\n<!\u2013 Gorgeous design\r\nby Michael Heilemann \u2013\r\nhttp:\/\/binarybonsai.com\/kubrick\/ \u2013>\r\n<?php \/* \u201eJust what do you think you\u2019re doing\r\nDave?\u201d *\/ ?>\r\n\r\n<?php wp_footer(); ?><\/span>\r\n<\/body><\/span>\r\n<\/html><\/span><\/span>\r\n<\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Zmianiamy czerwony kod na (zmiany kodu s\u0105 niebieskiego koloru):<\/p>\n
\n\n\n\n
\n
<br id=\u201dclear\u201d \/><\/span>\r\n\r\n<div id=\u201dfooter\u201d><\/span>\r\n<p>You\u2019re welcome to share what you find here with whomever you\u2019d like in<\/span>\r\nwhatever way you\u2019d like to. If you have questions, comments, or suggestions,<\/span>\r\n<a href=\u201dhttp:\/\/jonathanwold.com\/contact\u201d>contact<\/span>\r\nme<\/a> :).<\/p><\/span>\r\n<\/div><\/span>\r\n\r\n<\/div><\/span>\r\n<!\u2013 Main Container Ends \u2013><\/span>\r\n\r\n<?php wp_footer();\r\n?>\r\n<\/body>\r\n<\/html><\/span><\/span>\r\n<\/code><\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Dodatkowo<\/strong><\/h3>\n
Dalej mo\u017cesz dostosowa\u0107\u00a0nast\u0119puj\u0105ce pliki:<\/p>\n