WP自作テーマ講座

前回はヘッダを整えてブログっぽくなりました。しかしメニューとかが背景の青で見えにくくなっているし、画面全体に広がってしまっているのでデザインしてやります。

WP自作テーマ講座

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

WP自作テーマ講座

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

WP自作テーマ講座

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

WP自作テーマ講座

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

WP自作テーマ講座

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

WP自作テーマ講座

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

WP自作テーマ講座

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

WP自作テーマ講座

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

WP自作テーマ講座

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

Page 1 of 4
1
2
3
»