投稿のアイキャッチにデフォルトの画像を設定する仕組み
しばらく書いていませんでしたが、WordPressテーマの作成を続けています。
この投稿では、作成したindex.phpを振り返りながら、ループやWordPressの関数についてメモをしておきたいと思います。
まずはコードを貼り付けます。(前回からだいぶ変わりました。)
ループの役割
WordPressでは「ループ」という単語がよく使われています。
(3行目:<?php if(have_posts()):?><?php while(have_posts()):the_post();?>)
これがあることによって、クエリに応じた各種の情報がデータベースからページ内に取り込まれて、記事の表示ができるようになります。
また、ループでは一つ一つのページに含まれる情報が多次元配列によってページごとの配列で返ってくるので、例えばarchive.phpなんかでは、foreachを使ってページごとにカテゴリ情報を吐き出して表示することができたりします。
この辺り、想像しただけでコアの作成は大変なんだろうなと思いますね。
WordPressには便利な関数が色々用意されていますが、ループの中でしか使えない関数というのも多くあるので注意しておきたいところです。
ちょっと変なところでループを始めてる理由
多くのテーマでは、header.phpにheaderが書かれていて、各テンプレートファイルにループが書かれているのですが、今回そうしませんでした。
headerって、そのページやセクションが何者であるのか?を簡潔に提示すべき場所なんじゃないかなあと思っていて、タイトルとしてのH1、カテゴリ系のナビ、抜粋、サムネイルを入れています。
その中で抜粋を表示する the_excerpt( ) ; がループの中でしか使えなかった。
そういうわけでheaderの中でループが始まって始まっています。
管理コストは上がるんですが、自分で使うだけなのでいいかなと。
header.phpの中で別にループさせてもやりたいことはできていましたが、それもなんだか気持ち悪くてこの形に落ち着きました。
ヘッダーの現状
サムネイルをフルサイズで出力して、かつpositionでheaderの裏に回して、グラデーションを効かせて、タイトル、抜粋、カテゴリ系のナビ。結構気に入っています。
We Project9月の振り返り
WordPressのテーマを作る中で、HTMLと文書構造とか色々と悩んでしまって手が止まっていたこともあり、1ヶ月ぶりの更新となりました。ひとまず9月の振り返りをします。10月も終わるじゃないか!という時期ではありますが。
WeProject 9月にあったこと
さいたまDTPデザイン勉強会に参加しました
9月2日に開催された、さいたまDTPデザイン勉強会に参加しました。
デザインは素人もいいところなのですが、やはりこれからはデザインも多少わかっていないと仕事に差し支えるなと思うところです。
デザイナーが基本とする原則をこちらがわかっていればコードを書くのもスムーズになるでしょうし、何よりできる仕事の幅が広がるのはいいこと。
WordCampTokyoに参加しました
9月16日、WordCampTokyoに参加しました。多くのセッションを聞いて非常に刺激を受けたことにより、その後更新頻度が劇上がりしました。しかしWordPressテーマ制作の過程で文書構造に悩まされ、更新がストップ。
勉強時間の記録
9月はイベントが参加があったため、それなりに勉強時間を取れていたと思いきやそうでもなかった。約25時間。一応月間目標は35時間なので、10時間のマイナス。イベントも時間にカウントしてしまいたい!けど我慢。
Activity Type | Duration | Percent |
---|---|---|
Total | 719:59 | 100.0% |
勉強 | 18:30 | 2.6 |
読書 | 02:01 | 0.3 |
PHP | 06:52 | 1.0 |
Python | 01:07 | 0.2 |
Git | 00:30 | 0.1 |
WordPressテーマ作成 | 07:59 | 1.1 |
BLOG | 06:39 | 0.9 |
今年の自主勉強時間は9月までで約178時間。やばい目標に対して160時間足りない。
archive.phpの作成|WordPressテーマの作り方
r珍しく二本更新します。今回はarchive.phpを作成します。archive.phpはカテゴリーやタグなどのリンクをクリックされた時に呼び出されるテンプレートです。
多くは、タイトル、カテゴリー、タグ、投稿日、、アイキャッチ画像、記事の抜粋が表示されます。記事の一覧ページといえばわかりやすいでしょうか?
とはいえ、先日までに作成したindex.phpとほぼ変わりません。
コード
アイキャッチの有効化と表示
見た通りほとんどはindex.phpと同様なのですが、index.phpから追加、変更された部分として20~26行目の内容があります。
post_tumbnails関数で表示をコントロールする
まず、post_thumb_nailはアイキャッチ画像と呼ばれる画像に関わるものです。記事一覧のページを開くと、そのページを象徴するような画像が表示されていることが多いですが、そういった画像のことをアイキャッチ画像と言います。
アイキャッチ画像は記事の投稿画面から設定可能になるのですが、初期状態ではその機能がオフになっているため、functions.phpに以下のコードを挿入する必要があります。
add_theme_suportでアイキャッチを有効化
theme suportはWordPressであらかじめ用意されている各種の機能を利用するための関数で、今回利用したpost-thumbnails以外にもカスタムヘッダーなどのいくつかの機能があります。詳しくはCodexにて。
関数リファレンス/add theme support - WordPress Codex 日本語版
アイキャッチを有効化することで、記事作成画面で以下のエリアが表示されるようになりました。わぷーかわいい。
excerptで抜粋文を表示する
26行目は、index.phpでthe_contentが書かれていた代わりにexcerptを書きました。記事一覧画面ですので、全文表示をしてしまっては何かを探しているユーザーのみなさんにとっては不親切、、ということで抜粋文を表示することにしました。
テンプレートタグ/the excerpt - WordPress Codex 日本語版
文字数や、デフォルトで[...]となっている部分を変更可能になっています。
次回はページ送りを搭載していきたいと思います。
カテゴリ、タグ、投稿日を表示する|WordPressテーマの作り方
今日はHTML5カンファレンスですね。Webエンジニアを目指す身としては是非とも行きたいところでしたが、今月は色々イベントに参加していて、自粛致しました。来年はどうだろう?
投稿の基本情報を表示する
さて先日までで最低限、投稿内容とメニューが表示されるようになりましたが、今回は投稿の各種情報を表示させる機能を追加します。
各種の情報とは、投稿日、カテゴリー、タグの三つです。
コード
処理内容のメモ(リンクはCodexです。)
2,3行目のget_the_category、get_the_tagsでそれぞれの情報を取得して、変数に代入。
ifと!emptyにて、値がからかどうか?で条件判定を行なったのちに、foreachにて変数の中身をそれぞれに代入して展開。
今回はそれぞれ別のulにて用意をしました。
カスタムメニューの登録と表示”register_nav_menus”|WordPressテーマの作り方
カスタムメニューの使い方
とりあえず、全開で至極簡単な表示はできたので、今度はWordPress純正のメニューを表示させてみる。
WordPressCodexをみると、流れ的には以下。
カスタムメニューを表示させるまでの流れ
- functions.phpでフック?アンカーになる文字列と、管理画面上での名前を決めてメニューを登録。
- その文字列をパラメータに持つwp_nav_menuをテーマに書き込む。
-
メニューを作って、表示させたいところにチェックを入れる。
注意点
widgetばっかり使ってきて、この方法は初めて。簡単に注意点を書いておく。
- wp_nav_menu一つに対して一つしかメニューは表示できない。(当然すぎるな)
- メニュー管理画面では、表示させたい部分に対してチェックボックスのチェックを入れるのだけど、違うメニューを同じところに表示させようとしても特に警告なしで上書きされる。
次はwp_nav_menuの細かいパラメータをCodex見ながら試してみたい。(CSSとかの読み込みはメニューのスタイル当てるときにでも。。)
最低限からのWordPressテーマ構築記録を開始
訂正
index.phpの内容に誤りがあったので訂正しました。
3行目のhave_postsの( )がありませんでした。
誤:have_posts
正:have_posts( )
テーマ作成への考え方が変わった
これまでの投稿で、仕様を決めたりファイルを用意したりしていたけれども、ちょっと大きく方向転換をすることにした。
これはWordCampで聞いた
による影響が大きい。
正直なところ、作りたいなと思っていたのはこれと対極にあるカスタムフィールドをガンガン使ったものでした。
しかし、確かにカスタムフィールドを使うということは他のテーマへの移行をし難くするということだし、さらにいってしまえば今後Gutenbergがメインエディタになった時、必要ないじゃん?となる気がしたから。
というわけで、今まで多少作成を進めていたものも一旦まっさらにして、やり直すことにした。Bootstrapも削除して、綺麗さっぱりここからスタートします。
WordPressをとりあえず表示するだけ5点セット
我ながら、どんだけ最初から晒すんだ?!という気がしないでもないけど、自分のための記録半分以上だから、と無理やり納得させての公開ですので、指導は喜んで頂戴します。
styleの読み込み方法とかが既に推奨の方法でない気がするので、明日はその辺りを調べて調整していこうと思います。
年内完成できるのかな?