前回はSyntaxHighlighter Evolved関連で若干脱線しましたが、ここでまたWordPressを思い出すシリーズを仕切り直し、今回を「その１」として、WPテンプレートタグを少しづつ思い出しては、メモっていくことにします。
以前の第５５回までに「MAMP＞htdocs＞WordPress」に設置したWordPressにログインして、ダッシュボードを表示させるところまで行きました。インストールした時点でデフォルトのテーマは「Twenty Fourteen」になっているのですが（ひとまずここでテスト投稿しておきます）、これを自分で作成するオリジナルテーマに切り替えます。「Twenty Fourteen」を元素材としてカスタマイズしていくのもアリですが、僕にとってはかなり難しく思え、想定しているレイアウトはシンプルなので、やはりゼロから作ってゆく方が近道に思います。
準備するのは次の３ファイル。これらをMAMP内の上図（↑）の場所に「FLFL（名前は任意）」というフォルダにまとめて保存し、テーマを「Twenty Fourteen → FLFL」に切り替えます。
●index.php
●style.css
●screenshot.jpg ←サムネイル表示用にとりあえず。
ゼロから始めるindex.php
これから空っぽのindex.phpを埋めてゆきます。以前、htmlとCSSでシンプルに構成した試作品モックアップをWordPressで再現するのが最終目標ですが、今回はまず冒頭の簡単なところからスタート。
WordPressを思い出す（その１ー１）
<?php /* WordPressを思い出す（その１ー１） */?> <!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="all"> <title><?php bloginfo( 'name' ); ?></title> </head> <body> </body> </html>
4行目：language_attributes(); HTMLタグの属性を出力。ここでは「html lang=”ja”」となります。
6行目：bloginfo( ‘charset‘ ); 「charset=”UTF-8″」となります。
8行目：bloginfo( ‘stylesheet_url‘ ); デフォルトで使用する「styles.css」へのパスを出力。
9行目：bloginfo( ‘name‘ ); ブログのタイトルを出力。
２年半ぶりかにテンプレートタグをタイプしていて、ふとこの冒頭のお約束パートのパラメータ値は、わざわざテンプレートタグで呼び出さなくてもそのままベタ打ちでイイんじゃないか…と思いました。デフォルトで「charset=”UTF-8″」なんてもう決まっているのですし。
で、みなさんはどうしているのだろうと思ってググってみると、こんな記事を発見。
件名タイトル
自作WordPressテーマの国際化（翻訳）の方法（Welcart カスタマイズ ブログ）
なるほど、僕のように完全に個人で使うのならベタ打ちでも構わないんだけれど、誰かに配布したりする場合は、その人の環境も考慮して汎用の効くようにしておこう、というワケなのですね。
投稿記事のタイトルと本文を表示させる
WordPressをインストールして、テーマがまだ「Twenty Fourteen」の時に、動作確認を兼ねてタイトル「今日は金曜日」本文「うそだぴょーん。×３」というテスト投稿をしておきました。それらの入力データはMySQLのデータベースに格納されるのですが、それをＤＢから読み出すのに「ループ」を組みます。
WordPressを思い出す（その１ー２）
<?php /* WordPressを思い出す（その１ー２） */?> <!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="<?php bloginfo( 'stylesheet_url' ); ?>" media="all"> <title><?php bloginfo( 'name' ); ?></title> </head> <body> <?php if(have_posts()): while(have_posts()): the_post(); ?> <h2><?php the_title(); ?> </h2> <?php the_content(); ?> <?php endwhile; endif; ?> </body> </html>
14行目：if(have_posts()): while(have_posts()): the_post(); 19行目とセットで「ループ」を構成します。
16行目：the_title(); 投稿した記事のタイトルを取得。
17行目：the_content(); 投稿記事の本文を取得。
19行目：endwhile; endif; ここで「ループ」を閉じます。
Safariで表示の確認をすると下図のようになります。基本設定では１０本の投稿記事が連続で表示されるようになっていて、インストール時に予め投稿されていた「Hello world!」も一緒に表示されています。style.cssはスタイルの初期値リセットをした以外はまだ白紙なので、装飾などは全く施されていません。つづく。
だんだん…思い出して来たような。ここでは自分に必要なものだけを抜き出して進めているので、詳しくはWordPress レッスンブック 3.x対応を参考にどうぞ。
2014-05-28 ＞ VPS＆WordPress引っ越しメモ