blockquoteタグの確認とWordPressのPressThis調整

Wordpress

自分のブログは見た目にはあまり気を使っておりません。そこはもう少し改善の余地があると思っています。それはいずれ。

しかし、他のサイトのページを引用する際はちゃんとblockquoteタグを使うように心がけています。なんとなく。それぐらいはしなきゃと思っています。でも、実際のところblockquoteってタグの正しい使い方を知らないので、改めて調べてみました。

まずは自分が昔からお世話になっているサイトをチェック。
<blockquote> – 引用.
特に目新しい事は書いていない。むしろ「フローコンテンツ」とか「セクショニングルート」とか「パルパブルコンテンツ」の方が気になる。
HTML5.
HTML5になってブロックとインラインという考え方からカテゴリとコンテンツモデルという考え方に変わったのね。HTML5はシンプルになったと思っていたけど、考え方は複雑になっちゃったのかな。

それは置いといて、使ったことのない機能でciteという属性があるらしい。一部のブラウザでは「引用元へジャンプ」みたいな機能があるって書いている人もいるけど、手元のFF、Chrome、IEでは発動せず。そんなブラウザあるのか？あっても必要か？リンクが目に見えてた方が分かりやすいし使いやすいと思う。

そしてciteはタグも存在する。
<cite> – 参照.
引用元を示す。でもリンクにはならない。リンクにしたかったらaタグを中に。

ちなみに、このblockquoteタグ、Googleさん的に中身はノーカウントらしいです。SEO的にはちょっと残念？でも使わないで引用がバレるとマイナスらしい。
blockquote・citeの使い方とSEO効果～Googleのペナルティを避ける.
この人はすぐバレるって書いてるけど、どうなんだろうね。堂々とblockquote使わないでまとめサイト作ってる会社があるけど、けっこう出てくるよね。まー、それは置いておこう。

というわけなんで、今後はこんな感じで引用を記載しようと思う。

<blockquote>引用文
<cite>引用元: <a href="引用ページURL">引用ページタイトル</a>.</cite></blockquote>

うん、いい感じ。見た目も変わる。前よりは少し見やすくなったかも。

でもblockquoteとciteは見た目を調整するタグではありません。昔はblockquoteをインデントさせるのに使っていた時代もあったそうですが、今はCSSで簡単に調整できるのでそっちを使いましょう。それにブログとかの中で使うとテーマによって見栄えが異なる。自分が今使っているTwentyFifteenだとインデントされないし、逆に両サイドのマージンが減る。ちょっと好かない。そしてblockquote内が斜体になり、その中のciteが斜体じゃなくなる。自分的には全体的に小さめの文字で引用文が非斜体、引用元表示が斜体なんだけど、まー、そのうちやろう。ってか、本文が明朝なのも嫌。読みにくい。早くやんなきゃなー。

で、この引用表示、毎回手作業で書くのは面倒。そこでWordPressにはPressThisという機能があります。とりあえず公式の説明にリンクしておきます。
Press This – WordPress Codex 日本語版.
簡単に言うとブラウザにブックマークレットを置いておいて、文章を選択してブックマークレットをクリックすると引用文をセットした編集ページを開いてくれるもの。

でも、このPressThisが出してくる内容は先ほどまとめた文章構造にはなっていません。WordPressが用意したテンプレートになっています。これを変更したい。Codexを見たけど、それを捕まえられそうなフックは見当たらない。何かあるのかな？分からないので、とりあえずコアをいじっちゃうよ。

$ svn di wp-admin/press-this.php
Index: wp-admin/press-this.php
===================================================================
--- wp-admin/press-this.php     (リビジョン 49)
+++ wp-admin/press-this.php     (作業コピー)
@@ -634,18 +634,18 @@
                );

                $content = '';
-               if ( $selection )
-                       $content .= $selection;
-
                if ( $url ) {
-                       $content .= '<p>';
-
                        if ( $selection )
                                $content .= __('via ');

-                       $content .= sprintf( "<a href='%s'>%s</a>.</p>", esc_url( $url ), esc_html( $title ) );
+                       $content .= sprintf( "<a href='%s'>%s</a>.", esc_url( $url ), esc_html( $title ) );
                }

+               if ( $selection )
+                       $content = '<blockquote>'. $selection. '<p><cite>'. $content. '</cite></p></blockquote>';
+               else
+                       $content = '<p>'. $content. '</p>';
+
                remove_action( 'media_buttons', 'media_buttons' );
                add_action( 'media_buttons', 'press_this_media_buttons' );
                function press_this_media_buttons() {

元のコード、文章の先頭から作っていってるのがちょっと。特に if ( $selection ) が2回出てくるのが好きじゃない。自分は、とりあえず共通するURLの表記を生成し、$selection の中身があったら引用文とblockquoteタグとciteタグで挟み込む、みたいな感じにしました。好みかもしれないけど、元のコードの感じでやると if 文がさらに増えるんだよね。

という感じで、PressThisから意図した構造のコンテンツが生成されるようになりました。めでたしめでたし。