ステップ別にちょっとづつWordPressテーマの作り方を学ぶ本シリーズ。第五回はサイトのトップページを作る。Bootstrapを下敷きにした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> |
これをヘッダー、記事、サイドバー、フッターに分解してテーマにする。第二回で作成したテーマの雛形はこうだ。
トップページを作る
まずはトップページからヘッダー、サイドバー、フッターを除いた部分を抜き出し、index.phpへ移す。
|
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 |
<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 --> |
ヘッダーを挿入する
index.phpには、これまで作成したヘッダー、サイドバー、フッターを挿入する。まずはヘッダーから。index.phpの先頭にget_headerを書こう。
|
1 2 3 4 |
<?php get_header(); ?> <div class="blog-header"> ~~ 省略 ~~ |
ブログ記事を挿入する（ループ）
サンプルとして作ろうとしているテーマでは、トップページにいくつかの記事を表示し、ページを切り替えて次の（あるいは前の）記事をまたいくつか表示するようになっている。詳しくは、前掲の完成イメージを見て欲しい。
これを実現するため、トップページを表示した際に3つ記事を取得し、ページ送りすると次の（前の）3つの記事を表示するようにした。
元の記事部分（blog-postクラスの付いたdiv２つ）をindex.phpから削除し、次のコードに置き換えよう。
|
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 |
~~ 省略 ~~ <div class="col-sm-8 blog-main"> <?php $paged = (get_query_var('paged')) ? get_query_var('paged') : 1; ?> <?php $posts = get_posts(array( 'posts_per_page' => 3, 'paged' => $paged)); ?> <?php foreach ($posts as $post) : setup_postdata($post); ?> <div class="blog-post"> <h2 class="blog-post-title"><?php the_title(); ?></h2> <p class="blog-post-meta"><?php the_time('m j, Y'); ?> by <a href="#">Mark</a></p> <?php the_content(); ?> </div> <?php endforeach; ?> <?php wp_reset_postdata(); ?> <nav> <ul class="pager"> <li><?php previous_posts_link('Previous', 3); ?></li> <li><?php next_posts_link('Next', 3); ?></li> </ul> </nav> </div><!-- /.blog-main --> ~~ 省略 ~~ |
ここで重要なのはget_postsだ。取得する記事数をposts_per_pageに、ページ番号をpagedへ渡している。
サイドバーを挿入する
次はサイドバーを挿入してみよう。index.phpのサイドバー部分（blog-sidebarクラスの付いたdiv）を削り、get_sidebarを記述する。
|
1 2 3 4 5 6 7 8 9 |
~~ 省略 ~~ </div><!-- /.blog-main --> <?php get_sidebar(); ?> </div><!-- /.row --> ~~ 省略 ~~ |
フッターを挿入する
最後はフッターを挿入する。index.phpのフッター部分（containerクラスの付いたdivの閉じ要素から下）を削り、get_footerを入れるだけ。
|
1 2 3 4 5 |
~~ 省略 </div><!-- /.row --> <?php get_footer(); ?> |
WordPressテーマを動かす
これでWordPressテーマは完成！開発環境の構築編でインストールしたローカルサーバーにテーマを配置して動かしてみよう。
ローカルサーバーを起動し、WordPressの管理画面へアクセスする。ローカルの管理画面のURLは環境のセットアップ次第でパスが違うから適宜調整してほしい。
首尾よく管理画面へアクセスできたら、圧縮した状態のWordPressテーマをアップロードする。記事をいくつか入れ、ヘッダーメニューを作れば、参考にしたBootstrapサイトにぴったんこカン・カンなページになっているだろう。WordPressテーマの完成だ！
実際のWordPressテーマ開発では、記事ページだけを切り出したり、記事がない場合に備えたりと、これで完成というわけにはいかないけれど、大枠の流れは本シリーズのとおり。
WordPressテーマで儲けちゃいますか？他にはあまりない、テーマ販売についての書籍
