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をとりあえず表示するだけ５点セット
我ながら、どんだけ最初から晒すんだ？！という気がしないでもないけど、自分のための記録半分以上だから、と無理やり納得させての公開ですので、指導は喜んで頂戴します。
styleの読み込み方法とかが既に推奨の方法でない気がするので、明日はその辺りを調べて調整していこうと思います。
年内完成できるのかな？
WordCampTokyo2017参加してきた。現状スライドまとめ、来年へ向けた反省など。
WordCampTokyoに参加してきました。日が経って忘れてしまう前に、書き残しておきたい。スライドまとめは最後にありますので、まとめをご覧になりたい方はそちらへ！
後悔したこと
のっけから後悔したことを書くってどうなのよーという感じですけども。人は得られたはずの利益を遺失した時、その価値は3倍（確か）に感じるようで、人間の本能であるということで許してください。
個人名刺を作っておきたい
１番の公開はこれ。こういったイベントで会社の名刺、、でもいいのかもしれないけどやっぱりなんだか違和感がある。twitterは会社と完全分離させているし、イベントではtwitterで繋がってる方としか多分会わないので、なおさら。自分を何者にするか？からしっかり考えて作りたい。
バッグ小さかった
ボディバッグで会場に向かいましたが、最初のセッション開始前にもう超パンパンになってしまいまして。
なぜかというと、ノベルティや販促物のことをすっかり忘れていて、色々頂いていたら全然足りなかった、という感じです。
辞書２冊分くらいはあったんじゃないかなあ。
セッション開始と終了の時に、メモを出すのも大変という結構面倒なことになっておりましたww
↓頂きものたち。
普段お世話になっている各企業のノベルティということもあって、どれもこれも可愛い、かっこいい！と興奮しちゃいました。
懇親会も参加した方がいい
今回、色々とタイミングが悪く、WordCampの懇親会には参加できませんでしたが、それについてはちょっと後悔があります。
というのも、やはりスピーカーのみなさんや、遠方から参加される方はひとまず懇親会に参加されていて、そういった方々と実際にお会いする数少ないチャンスを逃してしまったから。
僕の場合は「SNSだけで繋がっている方々と会う」が今回の目的の一つなので、ちょっと失敗したかな、、と思っています。東京近郊の方であれば、その気になればお会いできるので。
スピーカーの方、プラグイン作者の方、ここでしか会えないかもしれない方がたくさんいるはずです。
会いたい人とは事前に打ち合わせする方が良かった
今回、結果的に５名の方にお会いできたのですが、結構バタバタでちょっと失礼をしてしまったこともありました。。可能なら事前にスケジュール組めてたら良かったなーと。
よかったこと
良かったことはまあみなさん大体同じ様なことになるのかなーと思いますが、書かせて頂きます。
会いたい人に会うことができる
WordCampは一年を通して最も大きなWordPressイベントですし、参加費もとても安いので、非常に多くの人が参加されます。ということは、普段はネット上でしかやりとりしていない人に会うことができる可能性も格段に上がる訳で、実際に多くの方にお会いできました。大規模イベントだからこそですね。
新たな知識を得ることができる
これも当然ですが、今まで持っていなかった考えや具体的手法を取り入れることができます。見積もりに「レビュー」項目を入れるなんてのはものすごく大事で即効性のあることで、これだけで来た甲斐があったな、という感じです。
新たな繋がりが生まれる
僕はWordCampTokyoとは違う懇親会にいって来ましたが、とても魅力的な方々とご一緒できて、大きな刺激をいただくことができましたし、色々と相談させてもらったりして本当に楽しかったです。
来年に向けて
今年、初めてWordCampに参加してみて思ったのは「ただ参加するだけじゃなんか申し訳ないな」ということでした。
これはテーマが「join」だからということは関係なく、例えば宮内さんの熱い思いや、スポンサーの皆様の厚意や、行き届いた会場整備、運営に触れて、自然と湧き起こった感情です。
という訳で。来年はスタッフTシャツを来ているかも。
最後に、現時点で公開されているスライドまとめておきます。公式が発表されるまで、ご利用いただければと思います。
スライドまとめ
補足を含むブログが公開されました。
それでは。
videoタグの再生終了後にposterを表示させる方法
posterの再表示で詰まる
HTML5のvideoタグは使い方も簡単ですし、動画がトップにどーんとあるだけで、サイトの印象を一気に変えることができるので重宝しますよね。
再生のループや待機画像（poster）なんかの設定もHTMLだけで完結できて、とても使いやすく出来ています。
そんなvideoタグですが、先日ちょっと詰まってしまったことがありました。
「アクセス時は自動再生して、再生終了したらループはさせないで、posterを表示させて。」
videoタグには色々と便利なイベントが用意されていたので、その方向で調べるも撃沈。結果的には以下の内容で対応しました。
posterが表示されるのは再生されるまで
早速コードを。
HTML
JS
ずーっと、どうしたらposterを表示できるのか考えていたのですが、ググっても出てこず。ふと、autoplayをオフにしてた時はposterが表示されていたな、と思い出し、上記のような方法に落ち着きました。
HTML上ではautoplayをオンにしておいて、1度目は再生させて、videoタグに用意されているイベントのendedが発生したタイミングでloadメソッドで再読み込み、読み込み終了後、autoplayをオフに。
こうすることで、videoが読み込まれたけど、再生はされない→posterが表示される、という状況を作ることが出来ました。
実はこの方法にたどり着くまで数日を要していたのですが、終わってみれば処理的には何も難しいことはなかったですね（汗）。
しょっちゅう思うことですが、発想を変える、アプローチを変えるっていうのは本当に大事ですね。思考が凝り固まってないか？常に気にした方がいいなあと感じます。
さいたまデザインDTP勉強会に参加してきた。
9月2日、ソニックシティで開催されたデザインの勉強会に参加してきた。
普段デザインを行うこともなく、これまで勉強してきたわけでもなく、更にはまだまだフリーダムな子どもたちを連れて完全エンジョイ勢として参加してきて、正直周りの皆様に失礼＆ご迷惑であったのではという気持ちもありますが。
楽しかったなあ。
今回の勉強会で使用するツールは「レイアウトを工作する」という名のとおり、ハサミ、カッター、色鉛筆、定規なんかがメインで、こういう道具に触れること自体がまあ新鮮！
脳の普段使わない場所にじゅわ～っと血が流れる感じがした。
それと、同じテーマで作られた制作物を一度にたくさん見られるのはとても貴重だと思った。
作品を見て、その意図を汲み取る。自分の考えが正解かはもちろん分からないのだけど、「あぁ、そういうことか！」みたいな感覚になると、そしてさらにその思想みたいなものが自分と近しいと、作品を通して理解し合ったような、不思議な感覚になった。大半は根拠のない感覚なんだけど、とても気持ちのいい体験だったなあ。
しかし！
自分のなんというか、ビジュアル面での技量、技術ってもののなさには打ちひしがれました。もっと描けたら。もっときれいに出来たら。と思いながら提出...。
ときには落書きしてみようかな。。
