のすけです。
前回はWordPressテーマの構成について触れました。
今回はWordPressテーマを作っていきたいと思います。
それも最小の。
レイアウトを決める
まず実現したいレイアウトを決めます。
今回は最小構成ということでHTMLはこんな感じにします。
<!DOCTYPE html><!--html宣言--> <html lang="ja"><!--日本語指定--> <head> <meta charset="UTF-8"><!--エンコード：UTF-8指定 --> <title>サイトのタイトル</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定--> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し--> </head> <body> <header class="site-header"> ヘッダーをここに記述 </header> <div class="container"> <div class="wrap"> <!-- このあたりから上の行をheader.phpに切り出すのが一般的 --> <div id="primary" class="main"> メイン部分 <article class="entry"> <h2 class="entry-head">タイトル</h2> <div class="entry-body"> <p>本文</p> </div> </article> <article class="entry"> <h2 class="entry-head">タイトル</h2> <div class="entry-body"> <p>本文</p> </div> </article> 〜 </div> <aside id="scecondary" class="site-side"> サイドバーをここに記述 <!-- (sidebar.phpに切り出すのが一般的)--> </aside> </div> </div> <!-- このあたりから下の行をfooter.phpに切り出すのが一般的--> <footer class="site-footer"> フッターをここに記述 </footer> </body> </html>
これをphp化していきます。
最小のテーマ構成 ファイル準備
必要なのはこの２つです。
そして、一応テーマのサムネイル画像も用意しましょう
- screenshot.png
HTMLでは、header.phpやfooter.phpにも触れていますが
今回は、最小テンプレートということで、全部index.phpに入れてしまいます。
分割は、必要なタイミングで順次やっていくほうが構成を覚えられて良いと思います。
既存のテーマを見て分かるかと思いますが、ファイルが多すぎて何が何やら把握するのが
難しいです。一度テーマを作ったことのある人なら問題ないのでしょうが、初心者には厳しいかと思います。
そこで、最小のテンプレートを作っていき、これをどんどん肉付けしていくことで構造を把握する形を取ります。
それでは作成していきましょう。
まず、ディレクトリを作成して、３つのファイルを配置していきます。
テーマ名は[anotherskyにしました]
「index.php」と「style.csss」は最初は空で大丈夫です。
「screenshot.png」は「横880px・縦660px」の適当な画像を用意しましょう。
index.phpにHTMLを記述する
上記HTMLをindex.phpとして保存して配置します。
style.cssを記述する
次のように記載していきます。cssの記載はざっくりレイアウトのみ記載しました。
/* Theme Name: AnotherSky Theme URI: http://hollywis.hatenablog.com/ Author: hollywis Author URI: http://hollywis.hatenablog.com/ Description: AnotherSkyは最小限のWordpressテーマです。 Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /*-------------------------------------------------------------- Layout --------------------------------------------------------------*/ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .site-header { height: 100px; border-bottom: 1px solid rgba(0,0,0,0.2); } .container{ border-bottom: 1px solid rgba(0,0,0,0.2); } .site-footer{ height: 100px; } .wrap { margin-left: auto; margin-right: auto; max-width: 1000px; padding-left: 2em; padding-right: 2em; } .wrap:after { clear: both; content: ""; display: block; } #primary { float: left; width: 58%; border-right: 1px solid rgba(0,0,0,0.2); } #scecondary { float: right; padding-top: 0; width: 36%; }
テーマを有効にしてみる
管理画面の[外観]-[テーマ]から作成したテーマを有効にします。
するとテーマが反映されて、index.phpが表示されます。
上からヘッダー、メイン部分、サイドバー、フッターと表示されているかと思います。
ただし、これではサイトタイトルやWordPressに投稿した記事は反映されていない静的なHTMLになってしまっています。
そこで、WordPressのコードを「index.php」に埋め込んでいきます。
index.phpにWordPressのコードを入れる
index.phpの内容を次のように変更します。
<!DOCTYPE html><!--html宣言--> <html lang="ja"><!--日本語指定--> <head> <meta charset="UTF-8"><!--エンコード：UTF-8指定 --> <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title> <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定--> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し--> <?php wp_head(); ?><!--headの追加コード --> </head> <body> <header class="site-header"> <h1><?php bloginfo('name'); ?></h1> ヘッダーをここに記述 </header> <div class="container"> <div class="wrap"> <!-- このあたりから上の行をheader.phpに切り出すのが一般的 --> <div id="primary" class="main"> メイン部分 <?php if(is_home()) : ?><!--メインページの時 --> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article class="entry"> <h2 class="entry-head"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="entry-body"> <?php the_content(); ?> </div> </article> <?php endwhile; endif; ?> <?php elseif(is_single()) : ?><!-- 投稿ページの時 --> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title() ?></h1> <div> <?php the_content(); ?> </div> <?php endwhile; ?> <?php elseif(is_page()) : ?><!-- 固定ページの時 --> <?php while ( have_posts() ) : the_post(); ?> <h1><?php the_title() ?></h1> <div> <?php the_content(); ?> </div> <?php endwhile; ?> <?php endif; ?> </div> <aside id="scecondary" class="site-side"> サイドバーをここに記述 <!-- (sidebar.phpに切り出すのが一般的)--> </aside> </div> </div> <!-- このあたりから下の行をfooter.phpに切り出すのが一般的--> <footer class="site-footer"> フッターをここに記述 </footer> <?php wp_footer(); ?><!--footerの追加コード --> </body> </html>
bloginfo('name');はブログの名前を取得
wp_title(' | ', true, 'right');はタイトルを取得して右に|を追加
また表示内容をif~elseifの条件分岐で出し分けています。
is_home()でメインページの時の表示の記述is_single()で投稿ページの時の表示の記述is_page()で固定ページの時の表示の記述をしています。
関数の意味はWordPressCodex日本語版にて確認してください。
この出し分けは、それぞれ「front-page.php」、「single.php」、「page.php」に切り出すことで明示的に条件分岐を書かなくても良くなりますが、今回はindex.phpに詰め込みました。
■メインページを表示した時
■投稿ページを表示した時
■固定ページを表示した時
これで、最小のテーマの完成です。
画像の表示がないなどまだまだ実用に耐えないテーマではありますが、
テーマの構成が分かりやすく、学習しやすいものになったのではないでしょうか。
続く