ゲームプログラミングレシピ集

Wordpressの基本的な機能はだいぶ覚えてきたと思うのでちょっとPHPから離れてHTMLとCSSによるデザインをやっていきましょう。デザインといっても特に難しいことをするわけではなく、ごく簡単なHTMLとCSSで見た目を整えていくだけです。

実はWordpressのテーマ作りの基本は前回で終わっています。あとはWordpressの使い方になってくるので、細かい所の説明をしていきます。今回はwp_head()が出力する要らないコードを消したい！という人のためにWordpressのヘッダ(HTMLタグのheadタグの中)部分に焦点をあてていきます。

Wordpressでは1つのphpファイルにまとめていては管理しづらくなってくるので、サイト(ブログ)全体に共通している部分はモジュール化（いわゆるパーツ別にファイルを分ける事）をしてしまおうという考えです。モジュールとは単体だけでは機能しませんが、組み込むと1つの機能として働くことを指します。

前回までfunction.phpと記述していましたが、正しくはfunctions.phpです！ファイル名を「function.php」にしている人は「functions.php」に変更してください！！すみませんでした！前回作ったウィジェットを使えるように設定していきます。

私自身がWordpressを使ってウィジェット機能というものを殆ど使ったことが無く基本的に自力で実装してたことが多いので、今回学習も兼ねてWordpresのウィジェットの作り方を公開していこうと思いました。

wp_head()はheadタグの中に居れましたが、wp_footerはbodyの閉めタグて前においてOKです。index.phpのみに記述しているだけだと、ライブプレビューで謎のロードだけ入って画面が切り替わらずそのままになります。なんかおかしいなと思ったらsingle.phpに記述するのを忘れていたのが原因でした。

ループによる記事の取得を前回で覚えたので実際に作っていくテーマに反映させてみます。まずはトップページの記事一覧を作ってみましょう。デザインは多少崩れていても記事個々のデータが取れていたら問題なしです！

テーマの土台となるHTML+CSSを用意できたので、今回はhave_postsを呼び出して記事タイトルリストを作ってみようと思います。既存のブログでテストしてもいいですし、新ブログでテストしても大丈夫です。

まずはテーマの見た目を整えるのに毎回アップロードしていては、超絶非効率なのでローカル開発環境を作ってしまいましょう。まずはHTML+CSSだけでやるので特別な開発環境は必要ありません。が、メモ帳ではなくちゃんとしたエディタを使うべきです。

管理画面からのアップロードで用意したCSSが反映されていなかったのですが、Wordpressのテーマ情報はCSSから読み取っているので読み込まれてはいるようです。単純にテーマの出力部でCSSが読み込まれていないだけっぽいので修正して、自由にCSSを書けるようにしていきます。