テーマをハミングバードに変えてから行ったカスタマイズ一覧【随時更新】

hummingbird-customise

ブログのテーマ(WORDPRESSテンプレート)を「Simplicity」から「ハミングバード」に変えました。

あらかじめ言っておくと、Simplicityの機能自体には何の不満もありませんでした。というか今でもすごい良いテーマだと思っています。

ただ、1年間同じテーマでやってきて、他のテーマも勉強してみたかったことがテーマ変更の理由です。

実際にテーマを変えてみると、表示やプラグインのいくつかに不具合がでました。

また、Simplicityには実装されているけど、ハミングバードでは考慮されてない機能なんかもあるので、そういったものはプラグインを追加して対応しました。

この記事では、そういったハミングバードに変えた後に行ったカスタマイズについてまとめてみたいと思います。

内容は、その時々の状況で随時更新していきます。ハミングバードを使っている人の参考になれば幸いです。

念のため書いておきますが、function.phpなどの記載をミスると編集画面にアクセスできなくなる可能性があります。作業前にはバックアップを忘れずに。

ブログカードの表示

他のブログ記事なんかを引用するときに、アイキャッチや抜粋文を一緒に表示できるのがブログカードです。

Simplicityにはこのブログカード機能があったのですが、ハミングバードでも使えるようにテーマのための関数とスタイルシートに以下を追記しました。

まずはテーマのための関数(function.php)です。

 

スタイルシート(style.css)はハミングバードの設定にあわせて以下のようにしています。

 

記事内でブログカードを作るときは、テキストエディターで以下のようにurlリンクの形で記述しています。

 

これらの設定は、わいひらさんの記事を参考にしました。Simplicityから他のテーマに変えたのに、Simplicityの製作者の記事にお世話になるっていう……。ありがとうございます!

ツイッターカードの表示

Simplicityには標準で備わっていたツイッターカードの表示は、プラグインで対応しました。

使ったプラグインは「All in One SEO」です。

今さら説明するまでもない有名プラグインで、解説もあちこちにあるので、ここでの紹介は省略します。

AmazonJSの表示不具合の修正

アマゾンの商品リンクを簡単につくれるプラグイン「AmazonJS」の表示に関する不具合を修正しました。

スタイルシートを少しいじったんですが、細かい解説は別の記事でまとめていますので、そちらを読んで下さい。

ツイッターでシェアするときの二重画面

ハミングバードではデフォルトと記事の上下にシェアボタンがついています。

独自にツイッターのフォローボタンなどをつけている場合、この記事上下のツイッターボタンを押すと、ポップアップが二重に表示される不具合があります。

この不具合は以下の手順で簡単に解消できます。

  1. ファイル転送ソフトなどを使って、親テーマの「parts_sns.php」「parts_sns_short.php」を子テーマにコピー
  2. 両ファイル内に以下の部分を見つけて、削除
 

詳細はこちらの記事を参考にしてください。

見出しタグ(hタグ)の修正

これはもう好みの問題ですが、hタグをちょっとだけいじりました。

もともとのh2、h3タグがこんな感じ。

htag-before

修正前の見出しタグ

 

修正後がこんな感じです。

htag-after

修正後の見出しタグ

 

子テーマのスタイルシートに以下を記載しました。サイドバーのウィジェットタイトルもh2タグと同じテイストに変えています。

俵万智がシェアを促してくれる

この記事の下を見てもらえるとわかりますが、このブログは俵万智さんがシェアを促してくれます。具体的には今日の日付を取得して、それを表示しているわけですが、こんなカスタマイズも簡単にできます。

そう、ワードプレスならね。

詳細は別の記事としてまとめていますので、参考にして下さい。

更新日の表示

ハミングバードでは個別記事のタイトルの上に投稿日が表示されます。ここに更新日も表示するようにカスタマイズしました。こんな感じになってるはずです。

更新日

投稿日、更新日の表示

作業は大きく2つ。子テーマのfunction.phpとsingle.phpに追記、修正します。

まず、function.phpに以下を追記します。

 

続いて、single.phpを修正しています。single.phpはもともと子テーマにはないので、FTPソフトなどを使って親テーマからコピーしてください。

このsingle.phpの日付取得箇所を以下のようにします。ちなみに投稿日、更新日ともにアイコンフォント(それぞれ時計とリフレッシュマーク)に変更しています。

 

また、このコードではgoogleに記事の更新日を伝えるような設定になっています。

この設定方法などはまたもsimplicity作者のわいひらさんの記事を参考にさせてもらいました。感謝!

「ABOUT この記事を書いた人」の削除

ハミングバードでは記事の下に「ABOUT この記事を書いた人」という形で、アバターの画像とユーザーの説明が載ります。

僕の場合はウィジェットに簡単な自己紹介を入れていることもあり、この部分は削除しました。

まず、親テーマからFTPソフトなどを使ってparts_singlefoot.phpを子テーマにコピーします。

続いて以下をごっそり削除。

 

これでABOUT欄が綺麗さっぱり消えます。

WpProQuizの表示不具合対応(現在苦戦中)

このブログではいくつかの記事でブログ内にクイズやアンケートを簡単に実装できるプラグイン「WpProQuiz」を使っているんですが、ハミングバードと相性が悪いのか、不要なリストマークなどが表示されてしまいます。

こちらは現在修正作業中ですが、ちょっと苦戦しています。