JOURNAL クリエイティブとマーケティングの話

WordPressテーマを制作するときに参考になった記事まとめ

自分が運営しているブログやウェブサイトで使いまわせるWordPressテーマがほしいということで、あらかじめいろいろ機能を詰め込んだものを作ってみました。

サイトによって扱うテーマやジャンルが違うので、デザインは極力シンプルを目指しております。主な使用は以下の通り。

  • レスポンシブwebデザイン
  • ヘッダーのレイアウト3パターン選択可能
  • メインビジュアルに画像、スライダー(2種類)、Youtubeを選択可
  • 1カラム、2カラム、3カラムからレイアウトを選択可
  • サイドバーのメニューをウィジェット or カスタムメニューからも設置可
  • Googleアドセンスの広告をウィジェットから設置可
  • シングルページに関連記事一覧を表示
  • カスタムメニューからフッター部分のサイトマップを編集可
  • テーマカスタマイザーからフッター部分のSNSアカウント編集可

上記の仕様を実装したい場合は、以下のリンクに目を通して頂けると幸せになれるかもです。

レスポンシブWebデザインのブレイクポイント

ブレイクポイントについてはどれが正解というのはないと思うし、今後どんなサイズの端末が出てくるかによっても設定が変わってくるかと思います。

僕は現段階ではスマホ、大きめのスマホ＆小さめのタブレット、タブレット、大きめのタブレット＆小さめのPC、PCでブレイクポイントを5つ設定しています。

レイアウトによってはスマホ、タブレット、PCの3つ程度で十分な場合もあるだろうし、逆にもっと細かく設定した方がいい場合もあるかもしれません。

スマートデバイスの急速な進化は今後もしばらく続くと思うので、それに合わせてどこにブレイクポイントを置くか、悩ましいところではあるのですが、試行錯誤は続けるべきところかと思います。

コーディング時のCSSクラス名

メンテナンス性などに影響してくるので、CSSのクラス名をつけるのは地味にストレスのかかる作業だと思います。

できればパッと見て分かるように、短すぎず長すぎず、自分以外の人が見てもどこのスタイルを指定しているのか分かるように、というのが理想ですね。

アイコンフォント

スマホでの閲覧などを考慮すると、できるだけ画像の使用は控えたいところです。

となると当然アイコンフォントを使おうという流れになるんですが、なかなかしっくりくるものがなかったり、ほしいアイコンがなかったりします。

アイコンフォントではFont Awesomeが有名で、いろいろなサイトで使われているのを見かけます。

しかしFont Awesomeはアメリカの人が制作したアイコンフォントのため、日本などアジアを中心に人気があるLINEのアイコンがパッケージに含まれていません。

地味に困っていたのですが、以下の記事を参考にしてIcoMoonで解決しました。

jQueryスライダー

レスポンシブWebデザインで扱いやすい、カスタマイズがしやすい、MITライセンスなどの条件で探し、jQueryプラグイン「slick.js」を使うことにしました。

オプションも豊富なので、これ一つで大体のことはできるかな？と思います。

Youtube埋め込み

レスポンシブWebデザインにする際、地味に困るのがYoutubeの埋め込みです。

しかし一度以下の記事を参考にスタイルを指定しておけば、あとは使いまわせるのでおすすめです。

calc()ファンクション

レスポンシブWebデザインでブロック要素をフロートさせる場合などにとても便利。

最新のブラウザ(※2016年1月現在)はほぼ対応していますので、今後ますます重宝しそうです。

jquery.heightLine.js

フロートで左寄せしたブロック要素の高さを揃えたりするのに非常に便利。

jQueryプラグイン版とそうでないものがありますが、個人的には使い勝手のよいjQueryプラグイン版がおすすめです。

ブラウザ幅によって高さを揃えるか否かを指定できるので、例えばPCでの表示の時にはフロートして横に並べるけど、スマホの際はフロートさせないので高さを揃える必要がない、むしろ揃えたくない、という場合に本当に便利。

ちなみに、

function(){

で読み込ませると高さの値を正常に取得できない場合があります。

そんなときは

$(window).load(function(){

で最後に読み込むといい感じです。

wp_headでスクリプト出力

head内wp_headでスクリプトを出力する方法。

header.phpが複数ある場合にfunction.phpを編集するだけで済むので便利です。

カスタムメニュー

カスタムメニューを追加。

グローバルナビゲーション、サイドバーメニュー、フッターナビゲーション、サイトマップなどをWordPress管理画面から編集できるように。

カスタム投稿タイプ

カスタム投稿タイプを使うと、WordPressでできることがグンと増えます。

もしまだ使ったことがないなら、ぜひ試してみてください。

functions.php

WordPressテーマのfunctions.phpで、WordPressにいろいろな機能を追加することができます。

プラグインをインストールすればいろいろな機能を追加できますが、プラグインが増えすぎるとWordPressの動作が遅くなるので、プラグインはどうしても外せないものだけにして、できるだけfunctions.phpを活用するといいかもです。

フィルターフックとアクションフック

フィルターフックとアクションフックは、WordPressのデフォルトの動作を変更したいときや、独自の機能を追加したいときなどに使います。

WordPressのコアファイルを編集せずに、WordPressテーマのfunctions.phpから機能を変更・追加できるのでとても便利です。

テンプレートタグ

テンプレートタグは、WordPressで動的にページを生成する際に使います。

ブログ名を表示したりトップページのURLを取得したりといったごく基本的なことから、テンプレート内で別のテンプレートを読み込んだりといった場合に使います。

WordPress管理画面

WordPress管理画面をカスタマイズする方法。

クライアントに納品する際に、管理画面トップページにトラブルシューティング的なコンテンツを作成しておいたり、お問い合せページへのリンクを設置しておいたり、工夫次第でサポートを充実できそうです。

ウィジェット

ウィジェットは、サイドバーやフッターなど指定した場所に、メニューや検索フォームなどさまざまパーツを表示させることができる機能です。

利用するためにはfunctions.phpにて設定する必要があります。

関連記事を表示

『Yet Another Related Posts Plugin』など、WordPressに関連記事を表示させる便利なプラグインがいくつかありますが、今回はプラグインなしで実装したかったので、以下の記事を参考にさせて頂きました。

カスタムヘッダー

メインビジュアルの画像をWordPress管理画面から手軽に変更できるようになります。

今回は slick.js と組み合わせてスライダーにしました。

人気記事一覧を表示

こちらも上記の関連記事と同様、プラグインなしで実装したかったので、以下の記事を参考にさせて頂きました。

月別アーカイブ

こちらもウィジェットなしで実装したかったので、以下の記事を参考にさせて頂きました。

ログイン画面

WordPressのログイン画面に独自のスタイルを指定する方法。

わりとどうでもいい部分ではあるかもしれませんが、納品物の場合にはこの辺りもやっておくといいかもしれません。

  • WordPress：ログイン画面をオリジナルにカスタマイズする方法 | NxWorld

OGP設定

ちょっと前まではOGP設定系のプラグインは動作が不可解なものばかりだったのですが、現在は人気のSEO対策プラグイン Yoast SEO で簡単に設定することができます。

そのため、わざわざプラグインなしで設定する必要はないかもしれませんが、少しでも動作を軽くしたいのと新規でWordPressサイトを立ち上げるたびにプラグインをインストールする手間を省きたかったので下記を参考に実装しました。

metaタグのnoindex設定

WordPressによって動的に生成されるアーカイブページなどのコンテンツは、Googleによって重複コンテンツをみなされるおそれがあります。

その対策として、アーカイブページや検索結果ページなどのmetaタグにnoindex設定をしておくことをおすすめします。

条件分岐でトップページや固定ページ、シングルページはindex、アーカイブページや検索結果ページ、404ページなどはnoindexになるようにしておくといいかと思います。

wp_headによるtitleタグ自動生成

WordPress 4.1から、wp_headにてtitleタグを自動生成できるようになりました。

この機能を利用するにはウィジェットやサイドバーと同じようにfunctions.phpに設定する必要があります。

  • <title>タグを表示する | WordPressカスタマイズ事典

1件目の記事だけ大きく表示

地味に要望の多い、ブログの1件目(最新記事)のみ大きく目立つように表示するレイアウト。

これもあらかじめ実装しておくことにしました。

  • 最新記事だけ大きく表示する方法・改訂版

まとめ

以上です。

日頃制作していて、要望が多いと感じていた機能は今回のテーマにほぼ詰め込めたのではないかと思います。

現在、複数の方にお願いして試しに使って頂いており、後日フィードバックを頂く予定でいます。

頂いた内容によって機能を追加したり不具合の修正をしたりしますので、またその際に参考にさせて頂いた記事は随時上に追加していきます。

制作に携わる人間としては、いかに労力を省いて品質の高いものを作るかということを考えるのも大事かと思います。

それがひいては価格やサポートの質につながってくると思うので、定期的に知識を整理する意味でもクライアントワーク以外でこういった制作をするのもよいなと思いました。

それでは！

この記事を書いた人
柴田 竹思

フリーランスWebディレクター／デザイナー。Webデザイン事務所Bamboo Works代表。中小企業・個人事業主のWebサイト制作のほか、官公庁や大手企業のプロジェクトにも携わる。神戸とベトナムの二拠点生活中。

記事一覧 記事一覧
関連する記事