WordPressにFont Awesomeを導入する

最終更新:2017/01/15

WordPressの基本テーマのひとつであるtwentyfifteenは、コンテント・フッターのメタ情報などの表示にGenericonsを使用していて、それに関連するファイルも内蔵して配布されている。本ブログのテーマもtwentyfifteenを親テーマとしてGenericonsを引き継いで使用している。

GenericonsはGenericons Neueへ

ところが最近(2016年後半?)、GenericonsはGenericons Neueと名前が変わった。インターネット・サービスのブランドなどに関連する一部のアイコンが削除され、従来のアイコンのデザインも変わり、装いも新たになった。しかしながら、SVGを使う方式がメインになったのか、使い方が変わってしまったようだ。WordPressをはじめとする、レンタルサーバーなどで運用されている一般のサイトに実装するためのガイドが書かれているわけでもない。

GitHubを見るとicon-fontというフォルダに旧Genericonsと似たような構成のファイルもあるようだけど、ダウンロード用パッケージが用意されているわけではないので、ちょっとハードルが高い。もともとWordPressのデフォルト・テーマを流用していただけなので旧Genericonsの使い方をちゃんと理解しているとは言い難く、旧版のコードの書き方も今となっては調べようがない。そのため、仮にバイナリを含むファイルをダウンロードできたとしても、その先どうしたらいいのか見当がつかない。プログラミング言語は世界共通語と言え、言葉は通じなくてもやりたいことが伝わることもよくあるから、説明は英語で書いてあっても、コード例が書いてあればなんとなくわかることも多いんだけども。

いずれにせよ、新アイコンを使うならファイルの差し替え程度では済まないので、Genericons Neueをちゃんと理解してテーマを改造しなければならなくなった。個人利用でも商利用でも目的に制限を受けないGPL-2.0ライセンスだったのは魅力だったんだけど、使い方を理解できないのでは仕方ない。Genericons Neueを使うために膨大な作業時間と試行錯誤を要することが予想されるのも気が進まない理由のひとつ。

そこで、旧Genericonsと似たようなフォント感覚で使用できるFont Awesomeを試してみることにした。

本記事を書いている時点でFont Awesomeのバージョンは4.7.0。

Font Awesomeのアップロード

Font AwesomeのWEBサイトからzipアーカイブのパッケージをダウンロードして作業フォルダに解凍する。zipアーカイブにはバージョン番号がついているので、削除してフォルダ名をfont-awesomeとしておくと後の作業がしやすい。

使用しているテーマが存在するディレクトリにfont-awesomeフォルダごとアップロードする。実際にはどこのパスにアップロードしてもいいんだけど、テーマ内のディレクトリのほうがわかりやすいだろう。今回はCSSを使用して導入するので、赤字以外のディレクトリとファイルは必要ないので削除するけど、あっても特に支障はない。

  • font-awesome
    • css
      • font-awesome.css
      • font-awesome.min.css
    • fonts
      • FontAwesome.otf
      • fontawesome-webfont.eot
      • fontawesome-webfont.svg
      • fontawesome-webfont.ttf
      • fontawesome-webfont.woff
      • fontawesome-webfont.woff2
    • less
    • scss
    • HELP-US-OUT.txt

なお、上のリストのフォルダアイコンやファイルアイコンはFont Awesomeで実現している。

functions.phpからFont Awesomeを組み込む

Font Awesomeは、<head>要素内の<link>要素からCSSをリンクして使用する。WordPressに正しくスタイルを取り込ませる方法として、wp_enqueue_style関数を使用する。テーマのfunctions.phpに次のコードを追加する。引数にはget_stylesheet_directory_uri関数を使用してstyle.cssのある場所を参照し、その後に続く相対パスを連結して指定する。get_stylesheet_directory_uri関数は末尾にスラッシュ(/)を返さないので、相対パスの前に必ずスラッシュを書き足しておく。

function enqueue_font_awesome_stylesheets(){
	wp_enqueue_style('font-awesome', get_stylesheet_directory_uri() . '/font-awesome/css/font-awesome.min.css');
}
add_action('wp_enqueue_scripts','enqueue_font_awesome_stylesheets');

header.phpに直接<link>要素を書き込んでも結果は同じだけど、WordPressに「style.css以外にどういったスタイルシートを組み込みたいのか」を明確に知らせることができる。twentytwelve以降はfunctions.phpからCSSを読み込む仕組みになっているはずなので、そこに追加するという意味合いになる。繰り返しになるけど、本ブログのテーマはtwentyfifteenをベースにした子テーマを使用している。

(非推奨)header.phpに直接Font Awesomeを組み込む

※この節の方法は、functions.phpからwp_enqueue_style関数でスタイルシートを組み込んでいない古いタイプのテーマでのみ使うべき。誤った作業の記録として残してある。

Font Awesomeは、<head>要素内の<link>要素からCSSをリンクして使用するようになっている。テーマのheader.phpを次のように編集し、スタイルシートを読み込ませるのが最も簡単な方法。相対パスを指定すると、各投稿ページのURLをベース・ディレクトリとしてそこからFont Awesomeを探してしまうので、長くなっても絶対パスを指定する。

<head>
	<meta charset="<?php bloginfo( 'charset' ); ?>">
	<meta name="viewport" content="width=device-width">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
	<!--[if lt IE 9]>
	<script src="<?php echo esc_url( get_template_directory_uri() ); ?>/js/html5.js"></script>
	<![endif]-->
	<?php wp_head(); ?>
	<!-- Font-Awesome 4.7.0 stylesheet -->
		<link rel="stylesheet" href="http://example.domain.name/wp-content/themes/twentyfifteen-child/font-awesome/css/font-awesome.min.css">
</head>

表示例

 camera-retro
recycle (Ver. 4.1)
bus (Ver. 4.2)
motorcycle (Ver. 4.3)
battery-3 (Ver. 4.4)
hashtag (Ver. 4.5)
question-circle (Ver. 4.6)
thermometer-three-quarters (Ver. 4.7)
snowflake-o (Ver. 4.7)

<i class="fa fa-fw fa-2x fa-camera-retro"></i> camera-retro
<i class="fa fa-fw fa-2x fa-recycle"></i> recycle (Ver. 4.1)
<i class="fa fa-fw fa-2x fa-bus"></i> bus (Ver. 4.2)
<i class="fa fa-fw fa-2x fa-motorcycle"></i> motorcycle (Ver. 4.3)
<i class="fa fa-fw fa-2x fa-battery-3"></i> battery-3 (Ver. 4.4)
<i class="fa fa-fw fa-2x fa-hashtag"></i> hashtag (Ver. 4.5)
<i class="fa fa-fw fa-2x fa-question-circle"></i> question-circle (Ver. 4.6)
<i class="fa fa-fw fa-2x fa-thermometer-three-quarters"></i> thermometer-three-quarters (Ver. 4.7)
<i class="fa fa-fw fa-2x fa-snowflake-o"></i> snowflake-o (Ver. 4.7)

関連記事

参考記事


固定ページに構造化データを考慮してパンくずリストを追加する

最終更新:2017/01/13

WordPressの固定ページにパンくずリストを追加する。どうせ追加するなら、Googleが収集して階層構造を認識してくれる構造化データを考慮したマークアップ記述にしたい。

基本的に、構造化データの記述を支援してくれるBreadcrumb NavXTプラグインを利用する。本記事を書いている時点での最新バージョンは5.6.0

インストール方法に特別変わった手順は必要ないので省略する。

パンくずリストを追加すること自体はそれほど難しくはないけど、構造化データを考慮するとなると話が異なってくる。最初は気付かずにだいぶ古い記事を参考にしていたのでGoogleの構造化データテストツールで試行錯誤しても一向にエラーが解消されずに苦労したので、改めて書き留めておく。

Breadcrumb NavXTの設定

Breadcrumb NavXTにはデフォルトでパンくずリストの各要素のためのマークアップがあらかじめ設定されているけど、Googleのパンくずリスト(Breadcrumbs)に関するドキュメントやサンプルを見ると若干異なる。今回は、RFDa形式のマークアップを参考にした。

また、Googleのサンプルには<li>要素にパンくずリスト用のプロパティやフィールドが直接記述されているけど、Breadcrumb NavXTの設定画面でそれをやろうとすると拒否されてしまう。そのため、<span>要素をもうひとつ追加し、その中にプロパティを記述することにした。

リンクありのマークアップ

次のマークアップは固定ページ用、あるいはホームページ用の「リンクあり」のパンくずリストの要素。見やすくするために改行、インデントしてあるけど、実際の設定画面に入力する時は改行やタブを削除する。

<li>
	<span property="itemListElement" typeof="ListItem">
		<a property="item" typeof="WebPage" href="%link%" class="%type%">
			<span property="name">%htitle%</span>
		</a>
		<meta property="position" content="%position%">
	</span>
</li>

リンクなしのマークアップ

次のマークアップは固定ページあるいはホームページのもので、現在表示されているページなど、リンクする必要がないページのパンくずリスト。

<li>
	<span property="itemListElement" typeof="ListItem">
		<span property="name">%htitle%</span>
		<meta property="position" content="%position%">
	</span>
</li>

投稿などのフォーマットについて

ブログ記事などの投稿(post)にパンくずリストを表示したいケースもあるだろうし、Breadcrumb NavXTにも設定項目が備えられてはいる。ただ、投稿の場合は複数のカテゴリを設定できるために親子関係が複雑になりがちで、Breadcrumb NavXTの設定以外にも考えなければならないことが多くなる。基本的な考え方やマークアップは固定ページと同じだけど、本記事ではとりあげない。

テンプレートにパンくずリストを追加する

いつも使っているテーマのテンプレートにパンくずリストを追加する。次のコードは、twentyfifteenテーマの一般用固定ページを表示するcontent-page.phpに変更を加えた例。

	<header class="entry-header">
		<?php /* breadcrumbs */ ?>
			<ol class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
				<?php if(function_exists('bcn_display'))
				{
					bcn_display();
				}?>
			</ol>
		<?php /* breadcrumbs */ ?>

		<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>
	</header><!-- .entry-header -->

RFDa形式の構造化データとしてリスト化したい場合は、3行目と8行目のパンくずリストを囲むタグを<ol>要素にして順序のあるリストにしておくことをGoogleは推奨している。

Googleで受け付けてくれる構造化データを意識しない場合は、Breadcrumb NavXTのインストールガイドにもあるように3行目と8行目は<div>タグでもよく、リストの各要素はデフォルト設定のような<span>要素でも構わない。特にCSSを設定しなくても簡素なテキストとして横一列にパンくずリストが並ぶ。

CSSの調整が手間だったので、パンくずリストをエントリ・ヘッダーの中に入れてしまったけど、サイトのデザインや他の構造化データの問題で都合が悪い場合は外に出してしまっても問題ない。構造化データというのは、ブラウザに表示されない<meta>要素などとは異なり、検索エンジンが識別に使用するクラス、プロパティ、フィールドが設定してありさえすれば、どういう文脈のところに入っていても識別される。つまり、検索エンジンが識別するためだけの特別なデータを別に用意する必要はなく、人間が見るための情報を検索エンジンに意味をわからせるためのデータとして兼ねてしまえるということ。

テンプレート・ファイルの変更が済んだらWordPressのサーバーにアップロードする。

構造化データのテスト

念のため、エラーが出ていないか構造化データ テストツールで固定ページ固有のURLを入力し、テストする。マークアップの改善がテストツールにすぐに反映されない場合は、ページのソースを表示させてパンくずリストの部分だけコピーしてエラーや警告が出ている部分に貼り付けたり、手入力で修正することでチェックだけはできる。

RFDa形式の場合、Googleによって解釈されたパンくずリストは次のように表示される。問題ないようならば、Googleボットがクロールに来るのを待つ。

クローラーが来て情報が収集されると、構造化データに従い、次の画像のようにパンくずリストが検索結果にも表示されるようになる。

CSSの追加

最後に、パンくずリスト用のCSSをテーマのstyle.cssに追加する。構造化した上で普通のテキストでいい場合はリストを横並びにするCSSだけでいいはず。

デザインは好みの問題が大半を占めるので、次のCSSはあくまでも例に過ぎない。特に、最近のCSSは高度化していて画像を使っていないのが不思議なくらい非常に凝った作りになっているものも多いので、CSSのコードを眺めているだけでは何を意図したプロパティなのかはわかりにくいと思われる。気になるデザインのパンくずリストを見つけたらブラウザの要素解析ツールで検証してみるといいだろう。

.breadcrumbs {
	list-style: none;
	display: table;
	margin-bottom: 2px;
	font-size: 12px;
}

.breadcrumbs li {
	display: table-cell;
	position: relative;
	left: 20px;
	padding: 0 20px 0 0;
	margin: 0;
	background-color: #c7dcef;
	line-height: 20px;
/* 	color: #fff; */
}

.breadcrumbs li > span {
	position: relative;
	padding: 0 10px;
}

.breadcrumbs li:after {
	content: "";
	position: absolute;
	top: 0;
	right: -4px;
	border: 0 solid #fff;
	border-left: 10px solid #c7dcef;
	border-top: 10px solid #c7dcef;
	border-width: 10px 10px;
	width: 0;
	height: 0;
}

.breadcrumbs li:before {
	content: "";
	position: absolute;
	top: 0;
	left: -20px;
	border: 0 solid #c7dcef;
	border-left: 10px solid transparent;
	border-top: 10px solid transparent;
	border-width: 10px 10px;
	width: 0;
	height: 0;
}

上記のCSSを使うと、次のようにパンくずリストが表示される。リストの各要素の前(:before疑似要素)と後(:after疑似要素)に斜めの切り欠きを追加している。

参考記事


Twitterの埋め込みタイムラインをカスタマイズ

最終更新:2017/01/14

以前はTwitterからのツイートの取得が比較的簡単にできて、WordPressのプラグインにも色々な特徴があるタイムライン表示ツールがあった。このブログにも自分のツイートを表示していた。でも、いつだったかTwitterがAPIを大幅に変更したとかで、使えなくなってしまったプラグインがあって、しばらくの間ブログにツイートは表示しないでいた。

Twitterの公式ウィジェット機能を使うと自分のウェブサイトにタイムラインを表示するための埋め込みコードを取得できるんだけど、あまり使い勝手が良くないという印象しかなかった。最近はかなり改善されたようで、WordPressのウィジェットくらいの小さなスペースでも綺麗に表示されるようになった。また、埋め込んだウェブサイトやWordPress側のコードにパラメータを与えるとカスタマイズできるようになっていて自由度が増した(単に知らなかっただけかもしれない)。

特に、日本語表示のタイムラインは、「@VANGUARD_FLIGHTさんのツイート」の「ツイート」の文字だけ妙に大きくて不格好なのが不満だったので、従前の英語表示に変更することにした。公式ウィジェットのコードは次のようなもの。

<a class="twitter-timeline" href="https://twitter.com/VANGUARD_FLIGHT" data-widget-id="xxxxxxxxxxxxxxxxx">@VANGUARD_FLIGHTさんのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

これにいくつかの属性を次のように追加する。

<a class="twitter-timeline" href="https://twitter.com/VANGUARD_FLIGHT"
data-widget-id="xxxxxxxxxxxxxxxxx"
data-chrome="transparent"
data-border-color="#808080"
data-lang="en">@VANGUARD_FLIGHTさんのツイート</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

基本的には、属性名に「data-」というプレフィックスをつけるようにする。

data-chrome="transparent"は、ウィジェットの背景を透明にする設定。ウェブサイトの背景色に馴染まない時に。
data-border-color="#808080"は、ツイート間の境界線の色の設定。
data-lang="en"は、表示言語を英語にする設定。この設定だけはプレフィックスなしでlang="en"でも同様の表示になる。

パラメータ

Twitterのウィジェット設定画面で設定を変更したのに埋め込みタイムラインに反映されないことがあるので、埋め込みタイムラインのコード側で設定を強制することができる。使いどころがありそうなものを一覧にした。他にもパラメータはあるけど使い道のよくわからないものは省略した。詳細は参考記事を参照。

パラメータ一覧
属性名 効果 有効な値
data-chrome ウィジェットの表示要素をなくす。非表示にする要素をスペース区切りで指定する。ただし、noheaderを指定した場合は、Twitterの表示要件を満たすようにしなければならない。 noheader
nofooter
noborders
noscrollbar
transparent
data-tweet-limit タイムラインに表示するツイート数。 1~20
data-lang ウィジェットの言語コード。ツイートの内容には影響しない。lang=”en”でも同様の効果。 en
ja
es
data-theme ウィジェットのテーマ。Twitterアカウント画面でのテーマ設定が反映されない時に強行できる。 dark
light
data-link-color ツイートのリンク色。16進トリプレット表記 #0080ff
(16進数)
data-border-color ウィジェットの境界線の色。16進トリプレット表記 #dddddd
(16進数)
width ウィジェットの最大幅をピクセルで指定する。 180~520
height ウィジェットの高さをピクセルで指定する。tweet-limitパラメータが指定されているときは無効。 200以上

WordPressのウィジェットへの表示

WordPressのウィジェットにツイートを表示させたい場合は、ダッシュボードから外観を選んで「ウィジェット」で設定する。もっとも一般的な「テキスト」ウィジェットをドラッグ&ドロップして、上記のコードをコピー&ペーストすればいい。

参考記事