ステップ別にちょっとづつWordPressテーマの作り方を学ぶ本シリーズ。第四回はサイトのサイドバーとフッター部分を作る。
Contents
WordPressテーマ作りの概要
- WordPressテーマ開発環境の構築
- Webサイトをデザインする
- WordPressテーマの雛形を作る
- ヘッダーを作る
- サイドバーを作る
- フッターを作る
- トップページを作る
- WordPressテーマを動かす
WordPressテーマにするBootstrapサイトをおさらい
まずは本シリーズでテーマ化するサイトのおさらい。Bootstrapを使ったベーシックなブログだ。
少し長いけれど（把握しなくてOK）、HTMLはこのようになっている。説明に必要のない部分は削っている。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="../../favicon.ico"> <title>Blog Template for Bootstrap</title> <!-- Bootstrap core CSS --> <link href="../../dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="blog.css" rel="stylesheet"> </head> <body> <div class="blog-masthead"> <div class="container"> <nav class="blog-nav"> <a class="blog-nav-item active" href="#">Home</a> <a class="blog-nav-item" href="#">New features</a> <a class="blog-nav-item" href="#">Press</a> <a class="blog-nav-item" href="#">New hires</a> <a class="blog-nav-item" href="#">About</a> </nav> </div> </div> <div class="container"> <div class="blog-header"> <h1 class="blog-title">The Bootstrap Blog</h1> <p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p> </div> <div class="row"> <div class="col-sm-8 blog-main"> <div class="blog-post"> <h2 class="blog-post-title">Sample blog post</h2> <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p> <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p> <hr> <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p> <blockquote> <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </blockquote> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> <h2>Heading</h2> <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> <h3>Sub-heading</h3> <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> <pre><code>Example code block</code></pre> <p>Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p> </div><!-- /.blog-post --> <div class="blog-post"> <h2 class="blog-post-title">Another blog post</h2> <p class="blog-post-meta">December 23, 2013 by <a href="#">Jacob</a></p> <p>Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.</p> <blockquote> <p>Curabitur blandit tempus porttitor. <strong>Nullam quis risus eget urna mollis</strong> ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.</p> </blockquote> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p> </div><!-- /.blog-post --> <nav> <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> </nav> </div><!-- /.blog-main --> <div class="col-sm-3 col-sm-offset-1 blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <h4>About</h4> <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p> </div> <div class="sidebar-module"> <h4>Archives</h4> <ol class="list-unstyled"> <li><a href="#">March 2014</a></li> <li><a href="#">February 2014</a></li> <li><a href="#">January 2014</a></li> <li><a href="#">December 2013</a></li> <li><a href="#">November 2013</a></li> <li><a href="#">October 2013</a></li> <li><a href="#">September 2013</a></li> <li><a href="#">August 2013</a></li> <li><a href="#">July 2013</a></li> <li><a href="#">June 2013</a></li> <li><a href="#">May 2013</a></li> <li><a href="#">April 2013</a></li> </ol> </div> <div class="sidebar-module"> <h4>Elsewhere</h4> <ol class="list-unstyled"> <li><a href="#">GitHub</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> </ol> </div> </div><!-- /.blog-sidebar --> </div><!-- /.row --> </div><!-- /.container --> <footer class="blog-footer"> <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> <p> <a href="#">Back to top</a> </p> </footer> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script> </body> </html> |
これをヘッダー、記事、サイドバー、フッターに分解してテーマにする。第二回で作成したテーマの雛形はこうだ。
サイドバーを作る
header.phpを作りながら、「WordPressテーマ作るのめんどくさい」と思った人はいないだろうか？確かに、ヘッダーは他の部品（サイドバーやフッター）と比べてやることが多い。それは逆に、ヘッダーさえこなしてしまえば後はお茶の子サイサイってことでもある。というわけで、サイドバーはサクッと終わらせちゃおう。
まずは元のサイドバーの構造を確認する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div class="col-sm-3 col-sm-offset-1 blog-sidebar"> <div class="sidebar-module sidebar-module-inset"> <h4>ウィジェット1のタイトル</h4> ~~ ウィジェット1の内容 省略 ~~ </div> <div class="sidebar-module"> <h4>ウィジェット2のタイトル</h4> ~~ ウィジェット2の内容 省略~~ </div> <div class="sidebar-module"> <h4>ウィジェット3のタイトル</h4> ~~ ウィジェット3の内容 省略~~ </div> </div> |
divの下に、各ウィジェットがdivで区切られて配置されているのが分かる。このレイアウトを守りつつ、各ウィジェットをWordPressのダッシュボードから動的に決められるよう、register_sidebarとis_active_sidebar、それからdynamic_sidebarを使う。
サイドバーの登録
まずはfunctions.phpにて、register_sidebarによるサイドバーの登録を行う。header.phpを作成した時に使ったfunctions.php内のセットアップ処理とは別に、ウィジェットの初期化処理（exampletheme_widgets_init）を用意しよう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function exampletheme_widgets_init() { register_sidebar(array( 'name' => 'Sidebar', 'id' => 'sidebar-1', 'description' => 'This is right side bar.', 'before_widget' => '<div id="%1$s" class="sidebar-module %2$s">', 'after_widget' => '</div>', 'before_title' => '<h4>', 'after_title' => '</h4>' )); } add_action('widgets_init', 'exampletheme_widgets_init'); |
register_sidebarに渡している、name、id、それからdescriptionはそのままサイドバーの名前、ID、説明を表している。元のサイドバーの構造にするために重要なのがbefore_widget以降の引数だ。before_widgetとafter_widgetでウィジェットを囲む要素を指定し、before_titleとafter_titleとでウィジェットのタイトル部分をデザインしている。
before_widgetに渡している%1$sと%2$sによって、各ウィジェットに固有のidとclassを付与できる。元のサイドバーで、最も上のウィジェットだけは白枠が付いているけれど、特定のウィジェットだけを修飾したいときに活用しよう。
サイドバーの呼び出し
こうして登録したサイドバーはdynamic_sidebarなる関数で呼び出せるけれど、その前にis_active_sidebarで有効かどうかを確認することが推奨されている。
先ほど登録したサイドバー『sidebar-1』を呼び出すのを例に取るとこのように使う。
|
1 2 3 4 5 |
<aside class="col-sm-3 col-sm-offset-1 blog-sidebar"> <?php if (is_active_sidebar('sidebar-1')): ?> <?php dynamic_sidebar('sidebar-1'); ?> <?php endif; ?> </aside> |
フッターを作る
今回はもう一つ、フッターを作るところまでやってみよう。
まずはページのフッター部分（今回の例で言えばfooter要素１つ上のdivから下）をfooter.phpへ移す。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
</div><!-- /.container --> <footer class="blog-footer"> <p>Blog template built for <a href="http://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p> <p> <a href="#">Back to top</a> </p> </footer> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script> </body> </html> |
JavaScriptを読み込む
今回取り上げたBootstrap公式サンプルでは、JavaScriptをページの最後で読み込んでいる。これはサイト高速化テクニックの１つで、JavaScriptの読み込みでレンダリングが遅れることを防いでいる。
今回読み込んでいるのはjQueryとBootstrapの２つ。
|
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script> |
このうち、jQueryはWordPressが自動で読み込む（場所はheader.phpのwp_headを記述したところ）。そのため、今回はBootstrapの読み込みを指定するだけでいい。
まずはこのscript要素を消し、本シリーズのヘッダー編で作成したfunctions.phpのexampletheme_scripts内に読み込み処理を書こう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function exampletheme_scripts() { // Bootstrap CSS wp_enqueue_style( 'bootstrap-css', get_template_directory_uri() . '/css/bootstrap.min.css'); // Theme CSS wp_enqueue_style('exampletheme-style', get_stylesheet_uri()); // Bootstrap JS wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true); } add_action('wp_enqueue_scripts', 'exampletheme_scripts'); |
wp_enqueue_scriptでJavaScriptを読み込める。
第一引数はJavaScriptファイルのハンドル名（WordPress内で扱うための名前）、第二引数はファイルパスとなっている。
注目したいのは三番目。jQueryに依存することを示している（WordPress内ではjqueryというハンドル名で扱える）。これで、jQueryの読み込み完了後にBootstrapが読み込まれる。
最後にtrueとしているのは、このJavaScriptをフッター内で読み込むという指示だ（wp_footerを記述した場所で読み込まれる）。
footer.phpのscript要素の削除、functions.phpでの読み込み処理の追加が終わったら、WordPressテーマのjsフォルダにbootstrap.min.jsを追加しよう。
次回はトップページを作り、WordPressテーマを完成させる。
WordPressテーマで儲けちゃいますか？他にはあまりない、テーマ販売についての書籍
