キタジマ タカシ Snow Monkey アドベントカレンダー13日目の記事です。
10日目はものくろさん、
11日目は花井さん、
12日目はさとうさんが参加してくださいました。
まさか3日も連続で参加者の方がいる状況になるとは思っていなかったので驚いております。しかもみなさん Snow Monkey オンラインコミュニティに参加してくださっている方で、オンラインコミュニティをつくったことで、Snow Monkey にこうやって関わってくれる方が増えるというのはとても嬉しいです。そういう意味で、花井さんの記事は僕が目指していることをズバッと書いてくださっていたので感動してしましました。
ということで、13日目は最近のアップデート情報を書きます。本当は Tips やら思想的なものを書きたいのですがちょっと余裕がなく…でもかなり細かい修正やバグフィックスをいれているので、この記事にも意味はあると信じたい！
主な修正更新箇所は以下の通り。
- 目次ウィジェットのアップデート
- キャッシュがリセットされるように設定の見直し
- スマホでは表示しないことを選択できるように
- 目次に表示する見出しレベルを選択できるように
- テキストが長い場合に、テキストが数字の下に回り込む不具合を修正
- 公開日・更新日の構造化データマークアップ
- シェアボタン（公式ボタン）
- フィードボタンの大きさを修正
- Facebook シェアボタンをいいねボタンに変更
- iPad で詳細ページのヘッダーに表示されるアイキャッチ画像のサイズがおかしくなる不具合を修正
- フィルターフック
snow_monkey_entry_meta_itemsをアクションフックに変更 - ヘッダーレイアウトが「1行」のときの余白バランスの調整
- グローバルナビゲーションが未設定の場合のヘッダーの余白バランスの調整
- カスタマイザー内のチェックボックス項目で選択/非選択してもプレビューが更新されない不具合を修正
- ロゴのサイズが横長の場合にサイトブランディングウィジェットでロゴが潰れる不具合を修正
- パスワード保護記事のときに
moreタグを入れることでその前の文章を表示する機能を追加 - HTTPS サイトの場合に、非 HTTPS サイトをブログカードで表示する際のサムネイル・faviconの取得条件を修正
- ショーケースウィジェットの format-3 で、サムネイルが未設定の場合の下余白のバランスを調整
- ビジュアルエディタのスタイルをリファクタリング
- iframe の自動レスポンシブ化は、特定のサイトのものに限定するように変更
- コメント・トラックバックエリアの表示/非表示条件の修正
しばらくアップデート情報をお知らせするのをサボっていたので結構な数ですね^^; これは！というものについて詳しく書きます。
公開日・更新日の構造化データマークアップ
「今までのテーマでは、記事を更新する度に Google の検索結果に表示される日付が更新されていたのに、Snow Monkey では更新されない」というお問い合わせを頂きまして、果たしてこの対処法でそれが解決するのかはわかりませんが、記事ページに表示される公開日と更新日について構造化データを仕込みました。
フィルターフック snow_monkey_entry_meta_items をアクションフックに変更
記事ページの公開日、更新日、著者名などのメタ情報部分はこれまで snow_monkey_entry_meta_items というフィルターフックを通して表示するようにしていました。そうすることで子テーマから必要ない項目を消したり、新しい項目を追加したりしやすいからですね。ただ、ここをフィルターフックにしていると開発上ちょっとめんどくさい問題があります。
フックした関数内で HTML をつくって return することで表示されるようになるわけですが、return する場合は全部をサニタイズしないとテーマの品質チェックのためにいれている wpcs が怒るんですよね。明らかにそこはサニタイズしなくてもええやろという部分にも突っ込まれるのは、仕組み上仕方ないとはいえちょっと気持ちが悪かったので、アクションフックに変更して、サニタイズすべき部分だけサニタイズしておけば怒られないようにしました。
カスタマイザー内のチェックボックス項目で選択/非選択してもプレビューが更新されない不具合を修正
例えば「プロフィールボックスを表示」とか「目次を表示」とかの項目のことですね。僕はどうせカスタマイザーの項目の設定を書くときにデフォルト値も書いているのに、また get_theme_mod() とか get_option() するときにもデフォルト値を指定するのはめんどくさいなと思い、それぞれのフィルターフックを使って良い感じに勝手にデフォルト値を返してくれるようにしています。で、ほとんど問題ないのですが、恐らくチェックボックスの場合は未チェックの場合は値が送信されない？ために僕の書いたコードではちょっと問題が起こっていたようです（多分）。結局はっきり原因を見つけきれなかったのですが、最終的にチェックボックス項目の sanitize_callback に
return function( $value ) {
return (int) ( true === $value || 'true' === $value || 1 === $value );
};
というようにして、true、false じゃなくて 0、1 を返すようにしたら正しく動作するようになりました。
パスワード保護記事のときに moreタグ を入れることでその前の文章を表示する機能
これは超おすすめの機能です！WordPress には記事のパスワード保護機能があります。記事編集画面の「公開状態」で「パスワード保護」を選択すれば、パスワードを入力しないと記事が見れなくなります。ただこれ、記事がまるっと全部見えなくなっちゃうんですよね。僕はオンラインコミュニティ参加者限定のコンテンツを書くようにしようと思っていて、そのために、途中までは読めるけど、途中からパスワードで保護されて読めない、というようにしたいと考えました。Capital P でも有料会員向けの記事はそのようになっていますね。
ショートコードとかを使えば比較的簡単に実装できますが、なるべく WordPress の既存機能の組み合わせでやりたいなと思ったので、more タグ を入れた場合はそれより前は読めるけど、それより後はパスワード保護されて読めない、となるようにしました。下記やってみたサンプルです。
HTTPS サイトの場合に、非 HTTPS サイトをブログカードで表示する際のサムネイル・favicon の取得条件を修正
自分のサイトが HTTPS の場合、HTTP なサイトの URL を記事にはってブログカードを表示した場合、サムネイルと favicon が HTTP なものになってブラウザに「非 SSL コンテンツ云々」みたいな通知がでていました。
そこで、自分のサイトが HTTPS でリンク先が HTTP の場合は HTTPS なサムネイルと favicon が取得できるか確認し、できない場合は表示しないようにしました。また、ついでにサムネイルや favicon が404などの場合も表示しないようにしました。
ビジュアルエディタのスタイルをリファクタリング
上記の記事でエディタースタイルについて書きましたが、一部実際の画面とビジュアルエディタとでスタイルのあたり方の順序がことなる部分があったので、全体的にリファクタリングしました。
この辺参照。
iframe の自動レスポンシブ化は、特定のサイトのものに限定するように変更
これまで、Snow Monkey では全ての iframe が勝手に自動的にレスポンシブ化されるようにしていましたが、その際の表示比率が 16:9 もしくは 4:3 固定で、場合によっては微妙な感じで表示されるという問題がありました。そこで、基本的にはレスポンシブ化せず、特定の URL の iframe のときだけレスポンシブ化するようにしました。今のところ
- YouTube
- Slideshare
- Speakerdeck
の場合だけレスポンシブになるようにしています。僕があまり iframe で何かを埋め込む外部サービスに詳しくないので、これも追加して欲しい！というものがあればお知らせくださいまし。
明日は
昨日から風邪を引いてしまいまして、なんとか書きかけだったこの記事だけ仕上げましたがちょっと明日についてはまだ考えきれていません^^; 皆さんも体調にはくれぐれもお気をつけください。
