月: 2017年1月

JanetterでRTユーザーにも相互フォローアイコンを表示する

最終更新：2017/02/01

TwitterクライアントJanetterでは、ツイートの発信元のユーザーと相互フォローになっている場合はツイート・ヘッダーに相互フォローアイコンとしてスマイル・マークが表示される。どのユーザーと相互フォローなのかひと目で判るJanetterの特徴のひとつ。本家Twitterの純正クライアントではタイムラインに相互フォローかどうかを示す情報は直接表示されない。

しかしながら、ツイート・フッターに表示される、リツイートしたユーザーを示す「Retweeted by （ユーザー名）」には同様のアイコンは表示されない。そこで、リツイートしたユーザーも相互フォローかどうかを判定し、ユーザー名にアイコンを表示するように改良する。

免責事項

本記事で紹介しているコードを使用したことによって生じた事態に当方は一切責任を負えない。動作を保証するものではないし、動作したとしても運用上生じたあらゆる問題にも同様に責任を負いかねる。相互フォローアイコンはあくまでもTwitterサーバーの応答を元にした目安であって、アイコンが表示されていないことをもってフォローを解除してしまったりして相手の心証を害することになっても関知できない。

決まり文句だけど、大事なことなので。

テンプレートの加工

Janetterカスタム・テーマのtweet.tplからリツイートユーザーを表示している次のようなコードを探す。独自にあちこち変更しているので、行番号はおおよその位置。

カスタム・テーマの作り方がわからない場合は、以前の記事をよく読んでもらって、新しくカスタム・テーマを追加する。くれぐれも、コモン・コードや標準で実装されているテーマに手を加えて上書きしてしまわないこと。

tweet.tpl
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<div class="tweet-footer-text">
    <p class="from">
        <span class="source">
            {if $sender}{* DM *}
                {if $isMe}
                    &nbsp;to&nbsp;{$recipientName}
                {/if}
            {elseif $sourcevisible}
                {if $retweeted_status}{* RT *}
                    via&nbsp;{$retweeted_status.source}
                {else}
                    via&nbsp;{$source}
                {/if}
            {/if}
        </span>
    </p>
    {if $retweeted_status}
        <p class="retweetedBy">
            <span class="icon-rtby"></span><span>Retweeted by </span>
            {$retweetedBy}
        </p>
    {/if}
</div>

位置を特定できたら、「Retweeted by」のテキストとユーザー名を示す{$retweetedBy}の間に次のようなコードを追加する。

ツイート・ヘッダーと同じようにユーザー名の後にアイコンが続くようにしてデザインを統一したいと思うかもしれないけど、ユーザー名が長い場合はタイムラインからはみ出した部分が自動的にカットされてしまうので、相互フォローアイコンが見えなくなる。

tweet.tpl
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<div class="tweet-footer-text">
    <p class="from">
        <span class="source">
            {if $sender}{* DM *}
                {if $isMe}
                    &nbsp;to&nbsp;{$recipientName}
                {/if}
            {elseif $sourcevisible}
                {if $retweeted_status}{* RT *}
                    via&nbsp;{$retweeted_status.source}
                {else}
                    via&nbsp;{$source}
                {/if}
            {/if}
        </span>
    </p>
    {if $retweeted_status}
        <p class="retweetedBy">
            <span class="icon-rtby"></span><span>Retweeted by </span>
            {if $friendvisible && $user && $user.both_following}
                <span class="friend-rt"/>
            {/if}
            {$retweetedBy}
        </p>
    {/if}
</div>

Janetterのデバッグ・モードを使えばわかるんだけど、122～124行と125行のコードを入れ換えればユーザー名の後にアイコンを表示すること自体はできるので、どうしてもアイコンの位置にこだわりたい人はデベロッパ・ツールを駆使して調べてみるといいだろう。

CSSの追加

上のテンプレートのコードでは、friend-rtというクラスを新しく使用しているので、tweet.cssの任意の場所に次のCSSを追加する。200行あたりに相互フォローアイコンに関する設定があるので、その辺がちょうどいいかもしれない。行番号は同じく大体の位置。

tweet.css
224
225
226
227
228
229
230
span.friend-rt{
    display: inline-block;
    width: 9px;
    height: 9px;
    text-indent: -99999px;
    background-image: url(../../../Common/images/timeLine/smile.png);
}

ちなみに、float: left;かfloat: right;などを追加すると、相互フォローアイコンだけ独立して表示させることもできる。改行されてしまって見栄えはあまり良くないので、お好みで。

関連記事

WordPressのビジュアルエディタにFont Awesomeを表示する

最終更新：2017/01/16

本記事は、前の記事の方法でFont Awesomeを導入していることを前提としています。

Font Awesomeを導入しただけでは、プレビューを含む実際のサイトの表示にしか反映されない。ビジュアル・エディタにも表示されるようにしないと、プレビューでマークアップが間違っていないか逐一確認しなければならないので執筆の能率が落ちる。Font Awesomeは便利だけど、能率が悪くなると使う動機が薄れていく。可能ならばビジュアル・エディタにもFont Awesomeを表示させたい。

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

WP Visual Icon Fontsは更新が停滞中

Font Awesomeをサイトとビジュアル・エディタの両方に表示させるプラグインとしてはWP Visual Icon Fontsが有名だけど、更新が年単位で滞っている。Font Awesome 4.0.3の時点で止まっているので、比較的最近追加されたアイコンフォントには対応していない。最初はその方法しか見つからなかったので試してみたけど、WordPress 4.7.1でも動作はするようだ。

使えないアイコンがあるとなると少々気持ち悪い。メジャーどころのアイコンは4.0までで実装されていたので実用上はそれほど困らないだろうけど、WP Visual Icon Fontsがいつまで使えるかはわからない。なんとかプラグインに頼らない方法はないか調べることにした。

エディタのCSSにスタイルを追加する方法

当初は、Font Awesome用のCSSをeditor-style.cssに単純にインポートすればいいのではないかと考えたんだけど、どうもそれではうまくいかない。強引に全体をコピー&ペーストする方法も考えたけど、Font Awesomeがバージョンアップする度にそれをやるのでは今後のメンテナンス作業に手間がかかりすぎる。CDN（Contents Delivery Network）を使って本家からCSSを引っ張ってくる方法を紹介している記事もあったけど、せっかく自分のサーバーにFont Awesomeを導入したのにビジュアル・エディタの表示のためだけにCDNを使うのでは二度手間になる。

そこで、functions.phpに次のコードを追加する。念のため、不具合があった時にすぐに戻せるように子テーマを編集するほうが好ましい。add_editor_style関数は、WordPress 3.0で追加された比較的新しい関数で、editor-style.cssに記述されているビジュアルエディタ専用スタイルシートに更にスタイルを追加するもの。引数にはFont AwesomeのCSSを指定するわけだけど、テーマが存在しているディレクトリ（フォルダ）から見て相対パスで指定する。

functions.php
1
2
3
4
function vf_add_editor_styles() {
    add_editor_style( 'font-awesome/css/font-awesome.min.css' );
}
add_action( 'admin_init', 'vf_add_editor_styles' );

functions.phpを保存してテーマのディレクトリにアップロードする。

表示の確認

新規記事を用意してテキスト・エディタでマークアップを打ち込んだ後、ビジュアル・エディタに切り替えると次のように表示される。Font Awesome 4.1～4.7で実装されたアイコンも表示されているので、WP Visual Icon Fontsを無効化し忘れたということはないことがわかる。

問題点

綺麗にまとまったように思えるけど、欠点もある。

WP Visual Icon Fontsは、TinyMCE（ビジュアル・エディタ）にアイコン挿入用のドロップダウンメニューを追加し、視覚的にアイコンを選べるようになっている。これはこれで便利で、上記の方法を使う場合は従前のようにFont Awesomeのページに行って、使いたいアイコンとそのクラス名を調べてこなければならない。

最新のアイコンは使えなくてもいいから手軽にアイコンを入力できるほうがいいか、プラグインの更新に左右されずに最新のアイコンと機能を使えるほうがいいかを選択することになる。同居させてもおそらく問題は起きないだろうけど、CSSは重複してお互いに打ち消し合う。

もっとも、WP Visual Icon Fontsのドロップダウンメニューでアイコンを選んだ場合でも、次のようなマークアップが挿入されてしまう。公式では<span>要素は文脈上必要でない限り、必須ではないとされている。

1
<i class="fa fa-camera-retro"><span style="color: transparent; display: none;">icon-camera-retro</span></i>

Font Awesome 4.0の頃はこれが正式な書き方だったのかもしれないけど、場合によってはテキスト・エディタに移って消して回らなければならないという問題も起こりえるため、一概にどちらが優れているとは言えないかもしれない。

関連記事

参考記事

WordPressにFont Awesomeを導入する

最終更新：2020/01/18

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関数は末尾にスラッシュ（/）を返さないので、相対パスの前に必ずスラッシュを書き足しておく。

functions.php
1
2
3
4
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を探してしまうので、長くなっても絶対パスを指定する。

header.php
13
14
15
16
17
18
19
20
21
22
23
24
<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-three-quarters (Ver. 4.4)
hashtag (Ver. 4.5)
question-circle (Ver. 4.6)
thermometer-three-quarters (Ver. 4.7)
snowflake (Ver. 4.7)

1
2
3
4
5
6
7
8
9
<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-three-quarters"></i> battery-three-quarters (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"></i> snowflake (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>要素をもうひとつ追加し、その中にプロパティを記述することにした。

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

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

1
2
3
4
5
6
7
8
<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>

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

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

1
2
3
4
5
6
<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に変更を加えた例。

content-page.php
1
2
3
4
5
6
7
8
9
10
11
12
<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のコードを眺めているだけでは何を意図したプロパティなのかはわかりにくいと思われる。気になるデザインのパンくずリストを見つけたらブラウザの要素解析ツールで検証してみるといいだろう。

style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
.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疑似要素）に斜めの切り欠きを追加している。

参考記事