VALUおじさんのつくりかた。その３。テーマの中身をいじくりまわすよ！
某ブログを引き続きパクっていきます。
WEBエンジニアに憧れを抱きつつもつまらないSEをしていたアルパカ（シャーマンタイプ）（VALUに飛びます）が、wordpressを触るところから1日がかりで儀式を始めてどうにかこうにかMacBookおじさん.comのコピーサイトを召喚するに至った記録の３回目です。
今回はようやく、テーマの中身であるphpファイルをいじっていきます。
前回はこちらです。VALUおじさん.comのつくりかた。その１。ツールとかの準備。|アルパカのサンドバッグ
VALUおじさんのつくりかた。その２。WordPress側の画面設定（テーマ、固定ページ）|アルパカのサンドバッグ
VALUおじさんってなにさ、という方はこちらの記事をご覧ください。VALUおじさん.comを公開しました。|アルパカのサンドバッグ
テンプレートの変更
テンプレートは前回ですでにアップロードされていると思いますので、エディタで変更してFTPでアップロード後に表示確認、という流れになります。
ローカル環境がある人はそれで。
というか僕もローカル環境作らなきゃ……。
functions.php
特に変なことはしていないです。
add_theme_supportとregister_nav_menuくらい？
他にも試行錯誤の過程で色々書いてはいるものの、消してしまっていいはず。
footer.php
特に機能はないので、コピーライトを変えるだけです。
header.php
メニュー、バーガーボタン、バーガーボタン制御のjavascript、GoogleAnalyticsのスクリプト、ツイッターやFacebook用のメタタグなどを追加しました。
参考にしたのはこの辺。
といっても基本的にプラグインを追加するか、テンプレートに直接埋め込むだけなんですけど。
ちなみに、メニューやボタンなどの画面に表示される部分は本家のソースをガン見しながら設定しました。
page.php
結局のところテンプレートの仕組みを理解しないままで作成してしまいました。
そのため最適な形とは程遠く、ページの種類ごとに必要なコードを生成させている状態です。
構造としてはこんな感じ。
ふええ……めちゃくちゃだよぉ……
共通化できるのは理解しつつも、速度優先で開発したので個別に。
まあ、問題なく動きます。
それぞれの中身は、本家ソースをガン見してタグとクラス、IDが一致するように並べました。
具体的には、idがcontentsになっているdivの中身を生成しています。
また、おじさんと若者とニュースに関しては、表示する内容を記事として投稿して表示させます。
おじさんや若者の名前やメッセージ、「おじさんが何人になりました」とかの部分ですね。
ここについては後述します。
single.php
記事の表示内容です。
記事の表示方法は若者もおじさんも同じレイアウトなので、やはり本家を見ながら真似していきます。
page.phpで固定ページを表示したときと全く同じ方法でいけます。
記事ページか固定ページかは、ワードプレスさんが勝手に判断してくれるわけです。
投稿内容の表示
さて、ここまで真似すると、一通りのサイトの表示ができるようになったのではないでしょうか？
あとはおじさんと若者が並べば完成ですね。
おじさんと若者（あとニュース）は（本家はどうだか知りませんが）VALUおじさん.comでは記事として作成しています。
記事の中から、おじさんだけとか若者だけとか、条件を決めて取得して、それを並べればいいわけですね。
これはテンプレートの中に処理として組み込みます。
こうすると、本来のコンテンツとして『VALUおじさん』の画像を表示して、その下におじさん一覧を表示する、なんてことができるようになるわけです。
画面としてはこんな感じですね。
ソースで表すとこんな感じ。
取得方法
さて、もうソースも表示してしまっているんで不要かもしれませんが。
have_postとかいうのを使う方法と、WP_queryとかいうのを使う方法の２つが見つかると思います。
WP_queryの方じゃないとできませんでした。
参考にしたのはこちら。
で、これを使うとカテゴリーで絞り込みができるので、ページごとに絞り込みの条件を変えて作成します。
ちなみに、『category_name => “uncle”』とかで絞り込んでいます。
他の方法もあるんですけどいまいちうまくいきませんでした。
IDを指定するとか。
完成。
というわけでここまでやるとVALUおじさん.comが完成すると思います。
あとは記事を作成するだけです。
記事の更新は手動なんですが、たぶんもっとうまくやる方法があったなーと後悔中です。
urlをツイッターIDにしておけばコンテンツ中にいちいちボタンを作成する必要はなかったのに……。
