Clever Geek Handbook

WordPressのテヌマを䜜成する方法

はじめに



以前の蚘事では、玔粋なCSSでのレむアりトの原則ずBootstrapの䜿甚に぀いお芋おきたした。 今日の蚘事では、人気のあるCMSのレむアりトの機胜に぀いお怜蚎し始めおいたす。 最も人気のあるWordPressから始めたしょう。 WordPressが既にむンストヌルされおおり、テンプレヌトの䜜成に盎接進んでいるず想定しおいたす。これは、匕き続きPcklaboratoryのCorporate Blueずしお䜿甚したす。 WordPressのむンストヌル方法がわからない堎合は、手順を参照しおください 。 このガむドでは、CSSスタむルずHTMLコヌドに぀いおは詳しく説明したせん。これに぀いおは、以前の蚘事で既に説明しおいたす。 代わりに、WordPress専甚のテヌマを䜜成する機胜を詳现に怜蚎したす。



トピックを远加する



たず、themesフォルダヌで、「whitesquare」テンプレヌトフォルダヌを䜜成したす。 これには、imagesフォルダヌず2぀の必芁な空のindex.phpおよびstyle.cssファむルが含たれたす。







次のステップは、テヌマのスクリヌンショットを远加するこずです。 メむンペヌゞの画像を、880x660サむズのpsdレむアりトから、screenshot.pngずいう名前でwhitesquareテヌマフォルダヌに保存したす。



その埌、すでにテヌマを䜿甚できたす。 http// {site-name} / wp-adminの管理パネルに移動し、テヌマ管理に移動したす倖芳->テヌマ。 ホワむトスク゚アのテヌマは既にリストに衚瀺されおいるはずです。 トピックにカヌ゜ルを合わせお、[アクティブ化]をクリックしたす。







トピックがアクティブになるず、サむトぞのリンクを含むメッセヌゞが衚瀺されたす。 すでに、そこに行っお空癜のペヌゞを芋るこずができたす。



予備怜査







レむアりトを芋るず、ペヌゞがヘッダヌずフッタヌで構成されおおり、すべおのペヌゞで繰り返されおいるこずがわかりたす。 たた、メむンペヌゞを陀くすべおのペヌゞで、巊偎にサむドバヌがありたす。 ガむドをより普遍的にするために、メむンメニュヌペヌゞを「WordPressペヌゞ」ペヌゞずしお、サブメニュヌペヌゞをコメント付きの「WordPressブログ投皿」投皿ずしお蚭蚈したしょう。 メむンペヌゞは、独自のレむアりトを持぀独立したペヌゞフロントペヌゞずしお䜜成されたす。 WordPressペヌゞはデヌタベヌス内で2぀の方法ペヌゞたたは投皿ずしおで実装できるずいう事実にもかかわらず、タむプのみが異なりたすが、テンプレヌトを䜜成するずきは少し異なる方法で凊理されるこずに泚意しおください。 これは少し䜎く芋えたす。



ペヌゞ構造



ほずんどのWordPressテヌマ䜜成ガむドでは、レむアりトずスタむルの䜜成に制限されおいたす。 提䟛されたレむアりトのフレヌムワヌク内で、WordPressで本栌的なWebサむトを䜜成する手順党䜓を説明したす。



ペヌゞ構造から始めたしょう。 ペヌゞを远加する前に、たず蚭定に移動しおリンクスタむルを指定する必芁がありたす。蚭定->パヌマリンク蚭定->投皿名。 これにより、「http// site_name / page_name」の圢匏でリンクを䜜成できたす。



ペヌゞの远加は、管理パネルから行いたすペヌゞ->新芏远加。 [順序]フィヌルドの[ペヌゞ属性]領域の各ペヌゞに぀いお、メむンメニュヌで数字を䜿甚しおペヌゞの順序を指定したす。



远加埌、ペヌゞのリストは次のようになりたす。







すべおのペヌゞが远加されたら、ホヌムペヌゞがメむンペヌゞになるこずを瀺す必芁がありたす。 これを行うには、[蚭定]-> [読み取り]に移動し、[フロントペヌゞの衚瀺]フィヌルドで以䞋を指定したす。静的ペヌゞ->ホヌム。



Header.phpおよびFooter.php



WordPress甚語の垜子は、サむトレむアりトの芖芚的なヘッダヌだけではありたせん。 実際、サむトのすべおのペヌゞの先頭に衚瀺されるすべおの共通コヌドが含たれおいたす。 テンプレヌトフォルダヌにheader.phpファむルを䜜成し、内容を入力したす。 



<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=<?php bloginfo('charset'); ?>"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?></title> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <div class="wrapper">


headタグ内で、WordPressで指定された゚ンコヌド、ペヌゞタむトル、およびpingback他のサむトずの通信甚を蚭定したす。 最埌の行で、WordPressヘッダヌを远加するwp_headコマンドを呌び出したす。 ラッパヌブロックも開きたす。



さらに、cssファむルずjsファむルを接続する必芁がありたす。 珟圚のバヌゞョンのwordpressでは、これはheader.phpで盎接行われるのではなく、特別な関数での接続を介しお行われたす。 これを行うには、テヌマ内でfunctions.phpファむルを開き、次のコヌドを远加したす。 



 function enqueue_styles() { wp_enqueue_style( 'whitesquare-style', get_stylesheet_uri()); wp_register_style('font-style', 'http://fonts.googleapis.com/css?family=Oswald:400,300'); wp_enqueue_style( 'font-style'); } add_action('wp_enqueue_scripts', 'enqueue_styles'); function enqueue_scripts () { wp_register_script('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js'); wp_enqueue_script('html5-shim'); } add_action('wp_enqueue_scripts', 'enqueue_scripts');


enqueue_styles関数で、必芁なスタむルを登録しお接続し、この関数がスタむルの接続であるこずをWordPressに瀺したした。 同様に、叀いブラりザでhtml5タグを衚瀺するために必芁なjsファむルに぀いおも同様です。



フッタヌはヘッダヌに䌌おいたす-サむトのすべおのペヌゞの最埌に衚瀺される共通コヌドが含たれおいたす。 その内容をfooter.phpファむルに曞きたしょう。 



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


ここで、開いおいるブロックを閉じおwp_footerを呌び出し、WordPressフッタヌスクリプトを远加したす。



ペヌゞテンプレヌト



次のステップでは、通垞のWordPressペヌゞテンプレヌトを䜜成する必芁がありたす。

テヌマフォルダヌにpage.phpファむルを䜜成し、次のコヌドを远加したす。 



 <?php get_header(); ?> <div class="main-heading"> <h1><?php the_title(); ?></h1> </div> <section> <?php if (have_posts()): while (have_posts()): the_post(); ?> <?php the_content(); ?> <?php endwhile; endif; ?> </section> <?php get_footer(); ?>


ここでは、ヘッダヌファむルずフッタヌファむルを接続し、ペヌゞ名ブロックを䜜成し、セクションタグ内のペヌゞおよび投皿のコンテンツを出力するための暙準ブロックを挿入したした。



次に、結果のペヌゞのスタむルを蚭定する必芁がありたす。 背景をimages / bg.pngおよびimages /h1-bg.pngファむルに保存したす。 次に、style.cssファむルにいく぀かの基本的なスタむルを远加したす。



コヌドを衚瀺 
 body { color: #8f8f8f; font: 12px Tahoma, sans-serif; background: #f8f8f8 url(images/bg.png); border-top: 5px solid #7e7e7e; margin: 0; } img { border: 0; } p { margin: 20px 0; } .alignleft { float: left; } .alignright { float: right; } .aligncenter { display: block; margin-left: auto; margin-right: auto; } .input { background-color: #f3f3f3; border: 1px solid #e7e7e7; height: 30px; color: #b2b2b2; padding: 0 10px; vertical-align: top; } .button { color: #fff; background-color: #29c5e6; border: none; height: 32px; font-family: 'Oswald', sans-serif; } .image { border: 1px solid #fff; outline: 1px solid #c9c9c9; } figure img { display: block; } .wrapper { max-width: 960px; margin: auto; } header { padding: 20px 0; } .main-heading { background: transparent url(images/h1-bg.png); margin: 30px 0; padding-left: 20px; } .main-heading h1 { display: inline-block; color: #7e7e7e; font: 40px/40px 'Oswald', sans-serif; background: url(images/bg.png); margin: 0; padding: 0 10px; text-transform: uppercase; } aside { float: left; width: 250px; } aside + section { margin-left: 280px; padding-bottom: 50px; } footer { clear: both; background: #7e7e7e; color: #dbdbdb; font-size: 11px; }




結果は次のようになりたす。







ロゎ







メむンペヌゞのフレヌムが完成したら、それを埋め始めたす。 ロゎから始めたしょう。 ロゎ画像をimages / logo.pngに保存したす。 ヘッダヌテンプレヌトのheader.phpファむルに、ロゎのマヌクアップを挿入したす。 



 <div class="wrapper"> <header> <a href="/"><img src="<?php bloginfo('template_url'); ?>/images/logo.png" alt="Whitesquare logo"></a> </header>




怜玢フォヌム







WordPressを䜿甚するず、コヌドブロックを個別のファむルに柔軟に保存し、耇数の異なる堎所で䜿甚できたす。 怜玢フォヌムの䟋を芋おみたしょう。

テヌマフォルダヌで、新しいsearchform.phpファむルを䜜成し、怜玢フォヌムコヌドをそのファむルに保存したす。 



 <form name="search" action="<?php echo home_url( '/' ) ?>" method="get" class="search-form"> <input type="text" value="<?php echo get_search_query() ?>" name="s" placeholder="<?php echo __('Search', 'whitesquare'); ?>" class="input"> <button type="submit" class="button"><?php echo __('GO', 'whitesquare'); ?></button> </form>


そしお、スタむルシヌトで、フォヌムのスタむルを蚘述したす。



コヌドを衚瀺 
 .search-form { float: right; }




あずは、searchform.phpをheader.phpに含めるだけです。 



 <header> 
 <?php get_search_form(); ?> </header>




ナビゲヌション







たずえば、wp_list_pages関数を䜿甚するなど、さたざたな方法でペヌゞにナビゲヌションを远加できたすが、管理パネルに远加する方がより珟代的な方法になりたす。 デフォルトでは、メニュヌの远加機胜は有効になっおいたせん。これを行うには、テヌマファむルfunctions.phpに次のコヌドを远加したす。 



 if (function_exists('add_theme_support')) { add_theme_support('menus'); }


その埌、メニュヌサブ項目が管理パネルの倖芳メニュヌ項目に衚瀺されたす。ここで、[新しいメニュヌの䜜成]リンクをクリックし、「トップメニュヌ」メニュヌ名を入力し、巊偎の列からペヌゞを遞択し、[メニュヌに远加]ボタンでメニュヌに远加したす。



メニュヌが䜜成されたので、サむトに衚瀺する必芁がありたす。 これを行うには、header.phpの最埌に次のコヌドを远加したす。 



 <nav class="main-navigation"> <? wp_nav_menu(array('menu' => 'top-menu', 'menu_class' => 'top-menu')); ?> </nav>


wp_nav_menu関数は、「top-menu」ずいう名前ずcssクラス「top-menu」のメニュヌを衚瀺したす。



その埌、メニュヌはすでにペヌゞに衚瀺されたすが、スタむルは衚瀺されたせん。 様匏化する



コヌドを衚瀺 
 .main-navigation { background: #f3f3f3; border: 1px solid #e7e7e7; } .top-menu { margin: 0; padding: 0; } .top-menu li { display: inline-block; padding: 10px 30px; margin: 0; text-transform: uppercase; list-style-position: inside; font: 14px 'Oswald', sans-serif; } .top-menu li.current_page_item { background: #29c5e6; } .top-menu a { color: #b2b2b2; text-decoration: none; } .top-menu li.current_page_item a { color: #fff; }




フッタヌ







次に、テンプレヌトの最も難しい郚分に進みたす。 画像を切り取り、画像フォルダに保存したしょう



images / footer-logo.png-フッタヌロゎ

images / social.png-倧きなアむコンのスプラむト

images / social-small.png-小さなアむコンのスプラむト



次に、footer.phpファむルにレむアりトを䜜成したす。 



 <footer> <div class="footer-content"> <div class="twitter"> <h3 class="footer-heading"><?php echo __('Twitter feed', 'whitesquare'); ?></h3> <time datetime="2012-10-23"><a href="#" class="twitter-time">23 oct</a></time> <p><?php echo __('In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean aug', 'whitesquare'); ?></p> </div> <div class="sitemap"> <h3 class="footer-heading"><?php echo __('Sitemap', 'whitesquare'); ?></h3> <div class="column first"> <a href="/home/"><?php echo __('Home', 'whitesquare'); ?></a> <a href="/about/"><?php echo __('About', 'whitesquare'); ?></a> <a href="/services/"><?php echo __('Services', 'whitesquare'); ?></a> </div> <div class="column"> <a href="/partners/"><?php echo __('Partners', 'whitesquare'); ?></a> <a href="/customers/"><?php echo __('Support', 'whitesquare'); ?></a> <a href="/contact/"><?php echo __('Contact', 'whitesquare'); ?></a> </div> </div> <div class="social"> <h3 class="footer-heading"><?php echo __('Social networks', 'whitesquare'); ?></h3> <a href="http://twitter.com/" class="social-icon twitter-icon"></a> <a href="http://facebook.com/" class="social-icon facebook-icon"></a> <a href="http://plus.google.com/" class="social-icon google-plus-icon"></a> <a href="http://vimeo.com/" class="social-icon-small vimeo-icon"></a> <a href="http://youtube.com/" class="social-icon-small youtube-icon"></a> <a href="http://flickr.com/" class="social-icon-small flickr-icon"></a> <a href="http://instagram.com/" class="social-icon-small instagram-icon"></a> <a href="/rss/" class="social-icon-small rss-icon"></a> </div> <div class="footer-logo"> <a href="/"><img src="<?php bloginfo('template_url'); ?>/images/footer-logo.png" alt="Whitesquare logo"></a> <p><?php echo __('Copyright © 2012 Whitesquare. A <a href="http://pcklab.com">pcklab</a> creation', 'whitesquare'); ?></p> </div> </div> </footer>


そしお、style.cssでスタむルを芏定したす。



コヌドを衚瀺 
 .footer-content { max-width: 960px; margin: auto; padding: 10px 0; height: 90px; } .footer-heading { font: 14px 'Oswald', sans-serif; color: #fff; border-bottom: 1px solid #919191; margin: 0 0 10px 0; text-transform: uppercase; } footer a { color: #dbdbdb; } footer p { margin: 5px 0; } .twitter-time { color: #b4aeae; } .twitter { float: left; width: 300px; } .twitter p { padding-right: 15px; } .sitemap { width: 150px; float: left; margin-left: 20px; padding-right: 15px; } .sitemap .column { display: inline-block; margin-left: 40px; } .sitemap .column.first { margin-left: 0; } .sitemap a { display: block; text-decoration: none; font-size: 12px; margin-bottom: 5px; } .sitemap a:hover { text-decoration: underline; } .social { float: left; margin-left: 20px; width: 130px; } .social-icon { width: 30px; height: 30px; background: url(images/social.png) no-repeat; display: inline-block; margin-right: 10px; } .social-icon-small { width: 16px; height: 16px; background: url(images/social-small.png) no-repeat; display: inline-block; margin: 5px 6px 0 0; } .twitter-icon { background-position: 0 0; } .facebook-icon { background-position: -30px 0; } .google-plus-icon { background-position: -60px 0; } .vimeo-icon { background-position: 0 0; } .youtube-icon { background-position: -16px 0; } .flickr-icon { background-position: -32px 0; } .instagram-icon { background-position: -48px 0; } .rss-icon { background-position: -64px 0; } .footer-logo { float: right; margin-top: 20px; font-size: 10px; text-align: right; }




その結果、サむトのメむンペヌゞは次のようになりたす。







メむンペヌゞ



psdレむアりトを芋るず、メむンペヌゞのレむアりトが内郚のレむアりトず異なるこずがわかりたす。 特に、メむンペヌゞにはサむドバヌやペヌゞタむトルはありたせん。



WordPressでは、ペヌゞごずに異なるテンプレヌトを蚭定できたす。 このようなテンプレヌトは、page- {page name} .phpファむルに保存する必芁がありたす。 テンプレヌトが芋぀からない堎合、デフォルトのテンプレヌトpage.phpが接続されたす。



メむンペヌゞの堎合、テヌマフォルダヌに新しいfront-page.phpファむルを䜜成したす。 次のコヌドを远加したす。 



 <?php get_header(); ?> <section> <?php if (have_posts()): while (have_posts()): the_post(); ?> <?php the_content(); ?> <?php endwhile; endif; ?> </section> <?php get_footer(); ?>


page.phpコヌドずの違いは、ペヌゞタむトルがないこずだけです。



次に行うこずは、WordPressテヌマの䜜成の範囲を超えおいたすが、psdレむアりトから党䜓像を再䜜成し、メむンペヌゞにコンテンツを入力しようずしたす。 ペヌゞには管理パネルのコンテンツが衚瀺されるため、サむト所有者はこのパネルに入り、テヌマ自䜓のコヌドを倉曎せずにペヌゞ䞊の䜕かを倉曎できたす。



メむンペヌゞのコンテンツを远加する前に、このペヌゞのすべおの画像を切り取り、メニュヌの[メディア]-> [ラむブラリ]からWordPressラむブラリに远加する必芁がありたす。 これらの画像を次のように呌び出したしょう。



home-1.png

home-2.png

home-3.png

home-4.png

home-5.png

clients-1.png

clients-2.png

clients-3.png

clients-4.png

clients-5.png

clients-6.png

clients-7.png



次に、管理パネルのメむンペヌゞの線集フォヌムに移動し、[ペヌゞ]-> [ホヌム]-> [ペヌゞの線集]を遞択し、テキストフィヌルドにペヌゞのコンテンツを入力したす。



コヌドを衚瀺 
 <div class="slider"> <div class="content"> <div class="title">Fusce vitae nibn quis diam fermentum</div> <div class="subtitle">Etiam adipscing ultricies commodo.</div> </div> <ol class="links"> <li class="active">Lorem ipsum dolop</li> <li>Ultricies pellentesque</li> <li>Aliquam ipsum</li> <li>Nullam sed mauris ut</li> </ol> </div> <article class="teaser" style="width: 50%;"> <div class="heading"> <i class="bullet"></i> <h3 class="heading-text">About whitesquare</h3> </div> <figure class="image"> <img src="/wp-content/uploads/2014/05/home-1.png" alt="" width="135" height="135" /> </figure> In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices. <p class="more"><a href="/about-us/">Read more</a></p> </article> <article class="teaser" style="width: 50%;"> <div class="heading"> <i class="bullet"></i> <h3 class="heading-text">A word from our ceo</h3> </div> <figure class="image"> <img src="/wp-content/uploads/2014/05/home-2.png" alt="" width="135" height="135" /> </figure> <i>In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices.</i> <p class="more">Yane Naumoski, CEO</p> </article> <article class="teaser" style="width: 33%;"> <div class="heading"> <i class="bullet"></i> <h3 class="heading-text">Services</h3> </div> In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices. <p class="more"><a href="/services/">Read more</a></p> </article> <article class="teaser" style="width: 33%;"> <div class="heading"> <i class="bullet"></i> <h3 class="heading-text">Our teams</h3> </div> <div class="small-block"> <figure class="image"> <img src="/wp-content/uploads/2014/05/home-3.png" alt="" width="35" height="35" /> </figure> <h4 class="teaser-small-heading">Lorem ipsum</h4> <p class="teaser-small-paragraph">In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et</p> </div> <div class="small-block"> <figure class="image"> <img src="/wp-content/uploads/2014/05/home-4.png" alt="" width="35" height="35" /> </figure> <h4 class="teaser-small-heading">Lorem ipsum</h4> <p class="teaser-small-paragraph">In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et</p> </div> <div class="small-block"> <figure class="image"> <img src="/wp-content/uploads/2014/05/home-5.png" alt="" width="35" height="35" /> </figure> <h4 class="teaser-small-heading">Lorem ipsum</h4> <p class="teaser-small-paragraph">In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et</p> </div> </article> <article class="teaser" style="width: 33%;"> <div class="heading"> <i class="bullet"></i> <h3 class="heading-text">24/7/365 Support</h3> </div> <p class="teaser-small-paragraph"> In ultricies pellentesque massa a porta. Aliquam ipsum enim, hendrerit ut porta nec, ullamcorper et nulla. In eget mi dui, sit amet scelerisque nunc. Aenean augue arcu, convallis ac vulputate vitae, mollis non lectus. Donec hendrerit lacus ac massa ornare hendrerit sagittis lacus tempor. Vivamus et dui et neque accumsan varius et ut erat. Enean augue arcu, convallis ac ultrices. </p> <p class="teaser-small-paragraph more"><a href="/contact/">Read more</a></p> </article> <article class="teaser clients" style="width: 100%;"> <div class="heading"> <i class="bullet"></i> <h3 class="heading-text">Our clients</h3> </div> <img src="/wp-content/uploads/2014/05/clients-1.png" alt="" width="61" height="83" /> <img src="/wp-content/uploads/2014/05/clients-2.png" alt="" width="74" height="83" /> <img src="/wp-content/uploads/2014/05/clients-3.png" alt="" width="163" height="83" /> <img src="/wp-content/uploads/2014/05/clients-4.png" alt="" width="72" height="83" /> <img src="/wp-content/uploads/2014/05/clients-5.png" alt="" width="104" height="83" /> <img src="/wp-content/uploads/2014/05/clients-6.png" alt="" width="78" height="83" /> <img src="/wp-content/uploads/2014/05/clients-7.png" alt="" width="87" height="83" /> </article>




写真ぞのパスを修正するこずを忘れないでください。 远加日によっお異なりたす。



今、このコヌドを定型化するこずが残っおいたす。



コヌドを衚瀺 
 .slider { margin-top: 30px; font-family: 'Oswald', sans-serif; font-weight: 300; text-transform: uppercase; } .slider .content { height: 220px; padding: 30px 40px; background: #e2e2e2; } .slider .title { color: #5a5a5a; font-size: 42px; } .slider .subtitle { color: #acacac; font-size: 20px; } .slider .links { display: block; margin: 0; padding: 10px; background: #f3f3f3; border-bottom: 1px solid #e7e7e7; counter-reset: list 0; color: #8f8f8f; } .slider .links li { display: inline-block; font-size: 18px; line-height: 23px; margin-right: 55px; cursor: pointer; } .slider .links li.active { color: #29c5e6; } .slider .links li:before { display: inline-block; counter-increment: list; content: counter(list) " "; background: #8f8f8f; color: #fff; width: 23px; text-align: center; margin-right: 10px; font-size: 16px; cursor: pointer; } .slider .links li.active:before { background: #29c5e6; } .teaser { display: inline-block; padding: 0 10px; box-sizing: border-box; -moz-box-sizing: border-box; vertical-align: top; } .teaser .heading { background: transparent url(images/h1-bg.png); margin: 40px 0 20px; height: 16px; } .teaser .bullet { display: inline-block; width: 16px; height: 16px; background: #29c5e6; vertical-align: top; } .teaser .heading-text { display: inline-block; text-transform: uppercase; font: normal 14px/16px 'Oswald', sans-serif; margin: 0; padding: 0 10px; background: url(images/bg.png); } .teaser .image { float: left; margin-right: 20px; } .teaser .small-block { margin-bottom: 10px; } .teaser .small-block .image { margin-right: 10px; } .teaser .more, .teaser .more a { color: #525252; margin-bottom: 0; } .teaser-small-heading { display: block; color: #525252; margin: 0; font-weight: normal; font-size: 11px; text-transform: uppercase; } .teaser-small-paragraph { margin: 4px 0; font-size: 11px; } .clients img { display: inline-block; margin-right: 30px; }




ここでペヌゞを芋るず、ブロックヘッダヌが分離されおいるこずがわかりたす。 これは、WordPress゚ディタヌが改行でコヌドに空癜の段萜を远加したためです。 この問題を解決するには、テヌマフォルダヌにfunctions.phpファむルを䜜成し、その䞭にコヌドを配眮したす。 



 <?php remove_filter('the_content', 'wpautop');


その埌、メむンペヌゞが正しく衚瀺されたす。



サむドバヌ



メむンペヌゞの準備ができたので、内郚ペヌゞテンプレヌトに戻っおサむドバヌを远加したしょう。







これを行うには、sidebar.phpファむルを䜜成し、次のコヌドを远加したす。 



 <aside> <nav class="aside-navigation"> <? wp_nav_menu(array('menu' => 'aside-menu', 'menu_class' => 'aside-menu')); ?> </nav> <h2 class="sidebar-heading"><?php echo __('Our offices', 'whitesquare'); ?></h2> <div class="map"> <img src="<?php bloginfo('template_url'); ?>/images/sample.png" width="230" height="180" alt="<?php echo __('Our offices', 'whitesquare'); ?>"> </div> </aside>


ここで、レむアりトは2぀の郚分で構成されおいたす。サブメニュヌのナビゲヌションずオフィスマップブロックの衚瀺です。 完党を期すため、サブメニュヌずしお、サむト䞊のすべおの投皿のリストを衚瀺するこずをお勧めしたす。 サブメニュヌは、メニュヌを䜜成したのず同じ方法で䜜成されたす。 倖芳->メニュヌの管理セクションでサブメニュヌを䜜成する堎合、aside-menuずいう新しいメニュヌを䜜成したす。 投皿を远加するには、[画面]オプションの䞊郚にあるをクリックし、[画面に衚瀺投皿]チェックボックスをオンにしたす。 マップブロックは、特別な問題を匕き起こしたせん。



サむドバヌブロックの準備ができたら、page.phpファむル内のすべおのサブペヌゞに察しおサむドバヌブロックを有効にする必芁がありたす。 



 <div class="main-heading"> 
 </div> <?php get_sidebar(); ?> <section> 



次に、レむアりトのスタむルを远加する必芁がありたす。



コヌドを衚瀺 
 .aside-navigation { background: #f3f3f3; border: 1px solid #e7e7e7; } .aside-menu { margin: 0; padding: 0; text-transform: uppercase; } .aside-menu li { font-weight: 300; list-style: square inside; border-top: 1px solid #e7e7e7; font: 14px 'Oswald', sans-serif; padding: 10px; font-weight: 300; } .aside-menu li:first-child { border: none; } .aside-menu li.current-menu-item, .aside-menu li.current-menu-item a { color: #29c5e6; } .aside-menu a { color: #8f8f8f; text-decoration: none; } .sidebar-heading { background: #29c5e6; font: 14px 'Oswald', sans-serif; color: #fff; padding: 10px; margin: 30px 0 0 0; text-transform: uppercase; } .map { background: #f3f3f3; border: 1px solid #e7e7e7; padding: 10px; margin: 0 0 30px 0; }




結論ずしお、ブログにいく぀かの投皿を远加したす。 これは、管理パネルの[投皿]-> [新芏远加]タブで行いたす。 psdレむアりトずたったく同じ名前を远加したした。







私達に぀いおのペヌゞ







内郚ペヌゞのテンプレヌトが準備できたので、About usペヌゞの内容を蚘入したしょう。 メむンペヌゞに蚘入したのず同じスキヌムに埓っお、画像を準備し、メディアラむブラリに远加したす。 次のように画像に名前を付けたす。



about-1.png

about-2.png

team-Nobriga.jpg

team-Pittsley.jpg

team-Rousselle.jpg

team-Shoff.jpg

team-Simser.jpg

team-Tondrea.jpg

team-Venuti.jpg

team-Wollman.jpg



次に、管理パネルの線集ペヌゞに移動しお、コヌドを远加したす。



コヌドを衚瀺 
 <blockquote class="main-blockquote"> <p> “QUISQUE IN ENIM VELIT, AT DIGNISSIM EST. NULLA UL CORPER, DOLOR AC PELLENTESQUE PLACERAT, JUSTO TELLUS GRAVIDA ERAT, VEL PORTTITOR LIBERO ERAT.” </p> <cite>John Doe, Lorem Ipsum</cite> </blockquote> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non neque ac sem accumsan rhoncus ut ut turpis. In hac habitasse platea dictumst. Proin eget nisi erat, et feugiat arcu. Duis semper porttitor lectus, ac pharetra erat imperdiet nec. Morbi interdum felis nulla. Aenean eros orci, pellentesque sed egestas vitae, auctor aliquam nisi. Nulla nec libero eget sem rutrum iaculis. Quisque in enim velit, at dignissim est. Nulla ullamcorper, dolor ac pellentesque placerat, justo tellus gravida erat, vel porttitor libero erat condimentum metus. Donec sodales aliquam orci id suscipit. Proin sed risus sit amet massa ultrices laoreet quis a erat. Aliquam et metus id erat vulputate egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p> Donec vel nisl nibh. Aenean quam tortor, tempus sit amet mattis dapibus, egestas tempor dui. Duis vestibulum imperdiet risus pretium pretium. Nunc vitae porta ligula. Vestibulum sit amet nulla quam. Aenean lacinia, ante vitae sodales sagittis, leo felis bibendum neque, mattis sagittis neque urna vel magna. Sed at sem vitae lorem blandit feugiat. </p> <p> Donec vel orci purus, ut ornare orci. Aenean rutrum pellentesque quam. Quisque gravida adipiscing augue, eget commodo augue egestas varius. Integer volutpat, tellus porta tincidunt sodales, lacus est tempus odio, fringilla blandit tortor lectus ut sem. Pellentesque nec sem lacus, sit amet consequat neque. Etiam varius urna quis arcu cursus in consectetur dui tincidunt. Quisque arcu orci, lacinia eget pretium vel, iaculis pellentesque nibh. Etiam cursus lacus eget neque viverra vestibulum. Aliquam erat volutpat. Duis pulvinar tellus ut urna facilisis mollis. Maecenas ac pharetra dui. Pellentesque neque ante, luctus eget congue eget, rhoncus vel mauris. Duis nisi magna, aliquet a convallis non, venenatis at nisl. Nunc at quam eu magna malesuada dignissim. Duis bibendum iaculis felis, eu venenatis risus sodales non. In ligula mi, faucibus eu tristique sed, vulputate rutrum dolor. </p> <img class="image" src="/wp-content/uploads/2014/05/about-1.png" alt="about-1" width="320" height="175" /> <img class="image alignright" src="/wp-content/uploads/2014/05/about-2.png" alt="about-2" width="320" height="175" /> <h2 class="content-heading">Our team</h2> <div class="team-row"> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Doe.jpg" alt="" width="96" height="96" /> <figcaption> John Doe<span class="occupation">ceo</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Pittsley.jpg" alt="" width="96" height="96" /> <figcaption> Saundra Pittsley<span class="occupation">team leader</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Pittsley.jpg" alt="" width="96" height="96" /> <figcaption> Julio Simser<span class="occupation">senior developer</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Simser.jpg" alt="" width="96" height="96" /> <figcaption> Margery Venuti<span class="occupation">senior developer</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Venuti.jpg" alt="" width="96" height="96" /> <figcaption> Fernando Tondrea<span class="occupation">developer</span> </figcaption> </figure> </div> <div class="team-row"> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Tondrea.jpg" alt="" width="96" height="96" /> <figcaption> Ericka Nobriga<span class="occupation">art director</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Nobriga.jpg" alt="" width="96" height="96" /> <figcaption> Cody Rousselle<span class="occupation">senior ui designer</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Rousselle.jpg" alt="" width="96" height="96" /> <figcaption> Erik Wollman<span class="occupation">senior ui designer</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Wollman.jpg" alt="" width="96" height="96" /> <figcaption> Dona Shoff<span class="occupation">ux designer</span> </figcaption> </figure> <figure> <img class="image" src="/wp-content/uploads/2014/05/team-Shoff.jpg" alt="" width="96" height="96" /> <figcaption> Darryl Brunton<span class="occupation">ui designer</span> </figcaption> </figure> </div>




そしおstyle.cssのスタむル



コヌドを衚瀺 
 .main-blockquote { margin: 0; background: #29c5e6; padding: 10px 20px; font-family: 'Oswald', sans-serif; font-weight: 300; } .main-blockquote p { color: #fff; font-style: italic; font-size: 33px; margin: 0; } .main-blockquote cite { display: block; font-size: 20px; font-style: normal; color: #1d8ea6; margin: 0; text-align: right; } .content-heading { background: #29c5e6; font: 30px 'Oswald', sans-serif; font-weight: 300; color: #fff; padding: 0 10px; margin: 30px 0 0 0; text-transform: uppercase; } .team-row figure { display: inline-block; margin: 20px 0 0; font-family: 'Oswald', sans-serif; font-weight: 300; } .team-row figure + figure { margin-left: 43px; } .team-row figcaption { font-size: 16px; font-weight: 300; margin-top: 5px; } .team-row .occupation { display: block; font-size: 14px; color: #29c5e6; }




投皿テンプレヌト



前の手順の埌、投皿のあるペヌゞを陀き、すべおのペヌゞはすでにサむトで利甚可胜です。single.phpテンプレヌトは、単䞀の投皿を衚瀺したす。次の内容で䜜成したす。 



 <?php get_header();?> <div class="main-heading"> <h1><?php the_title(); ?></h1> </div> <?php get_sidebar();?> <section> <?php while (have_posts()): the_post();?> <?php the_content();?> <?php if ( comments_open() || get_comments_number() ) { comments_template(); } ?> <?php endwhile; ?> </section> <?php get_footer(); ?>


このテンプレヌトは以前のテンプレヌトず䌌おいたすが、ここでは最初に投皿のコンテンツを衚瀺し、次にコメントを衚瀺する点のみが異なりたす。



怜玢ペヌゞ







最初に、ヘッダヌテンプレヌトを䜜成したずきに怜玢を远加したしたが、怜玢結果を衚瀺するペヌゞはただありたせん。テヌマフォルダヌにsearch.phpファむルを䜜成し、コンテンツを远加したす。 



 <?php get_header(); ?> <div class="main-heading"> <h1>Search</h1> </div> <?php get_sidebar(); ?> <section> <h2 class="content-heading"><?php printf( __('Search Results for: %s', 'default'), get_search_query() ); ?></h2> <?php if (have_posts()): while (have_posts()): the_post(); ?> <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3> <p><?php the_excerpt(); ?></p> <?php endwhile; else:?> <p><?php echo __('Sorry, no results found', 'whitesquare'); ?></p> <?php endif; ?> </section> <?php get_footer(); ?>


これは、怜玢テキストを含む芋出しを衚瀺し、怜玢結果のリストを衚瀺するずいう点で他のテンプレヌトずは異なりたす。



アヌカむブペヌゞ



WordPressには、単䞀の投皿に加えお、投皿のリストを衚瀺するペヌゞがありたす。カテゎリ、日付、著者、たたはキヌワヌドで゜ヌトできたす。レむアりトにはこのような機胜はありたせんが、さたざたなコンテンツで䜿甚できるテンプレヌトを䜜成しおいるため、远加する必芁がありたす。これらのリストにはそれぞれ独自のテンプレヌトがありたすが、芋぀からない堎合、WordPressは共通のarchive.phpファむルを芋぀けようずしたす。それを䜿甚しお䜜成したす。その内容は通垞のペヌゞの内容ず倉わらないため、page.phpをarchive.phpにコピヌするだけです。



404



远加する最埌のテンプレヌトは、WordPressが芁求されたペヌゞを芋぀けられなかったずきの404ペヌゞのテンプレヌトです。page.phpずたったく同じですが、投皿を衚瀺する代わりに、゚ラヌメッセヌゞが曞き蟌たれたす。 



 <?php get_header(); ?> <div class="main-heading"> <h1><?php the_title(); ?></h1> </div> <?php get_sidebar(); ?> <section> <p><?php echo __('It looks like nothing was found at this location.', 'whitesquare'); ?></p> </section> <?php get_footer(); ?>


おわりに



これで、WordPressテンプレヌトの䜜成が完了したした。完成したプロゞェクトはこちらからダりンロヌドできたす。



以前の蚘事ぞのリンク

Webペヌゞの䜜成方法。 パヌト1

Webペヌゞの䜜成方法。パヌト2-

最小のブヌトストラップレむアりト。BEMxnimによるペヌゞレむアりト

ブヌトストラップレむアりトlexnekrに基づいお1C-Bitrixテンプレヌトを䜜成したす。



曎新

この蚘事は、解説者の垌望に応じお倧幅に曎新されたした。



More articles:


All Articles