WordPress に TwitterCards を設定してみた

twitterをみているとURLの詳細が表示されているものが時々あります。

こんなやつ
twittercards

これは「Twitter Cards」という機能で、メタタグを設定して、twitterに申請することで使えるようになります。

WordPressの場合はプラグインを使うと簡単に設定できるので、やってみました。

1 メタタグの設定用プラグイン

 「WordPress SEO by Yoast」をインストールして、有効化
 管理画面の左メニューに追加された「SEO」>「Social」
 下のほうにTwitter Cards設定があるので「Add Twitter card meta data」をチェックして、「Site Twitter Username」にユーザーネームを@抜きでいれます。

 最後に「Save Setting」で完了です。

2 Twitterへの申請

 申請は次のページです。
 https://dev.twitter.com/docs/cards/validation/validator

 開くとCardsのサンプルが表示されるので、適当に選択
 「Validate & Apply」タブを選択して、メタタグを設定したページ(ここでは適当
な記事のページ)を入力して「Go!」を押します。
 メタタグの設定状況がチェックされて、申請がまだの場合は申請するためのボタン
が表示されるので、クリックすると登録する入力フォームがでるので、必要項目を入
力したら申請完了です。
 承認がでるまで時間がかかるようなのでしばらく待ちましょう。

<参考にしたエントリー>

WordPressカスタマイズのメモ

WordPressを少々弄ったので、忘れないようメモを残しておきます。

  1. 各記事にソーシャルボタンを設置
  2. サイドバーにTwitterの投稿を表示
  3. ソースコードの表示を強化
  4. 記事末尾のメタデータを修正

以上の4つです。
プラグインのインストール方法に関しては、マニュアル等を参照してください。以前の記事にも少し書いてあります。

ソーシャルボタン設置

WP Social Bookmarking Lightプラグインを管理画面からインストールし、幾つかの項目を設定しただけです。実に簡単。
日本の方が作っておられるらしく、国内のSNSにも対応しているのが嬉しいところ。

Twitter投稿表示

プラグインもありますが、今回はTwitterから提供されている公式ウィジェットを利用します。
ブラウザでTwitterにログインし(当然ながら既にTwitterアカウントを持っている必要があります)、設定 › ウィジェット にある新規作成ボタンを押してください。
好みに合わせて設定を選んだのち、「ウィジェットを作成」すると、例えば以下のようなソースが表示されますので、クリップボードにコピーしておきます。
[html]
<a class="twitter-timeline" href="https://twitter.com/ODprject" data-widget-id="******************">@ODprject からのツイート</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>
[/html]
続いてWordPress側の設定を行います。管理画面から、外観 › ウィジェット を開いてください。
そこに「テキスト」という自由に文章を置くためのウィジェットがありますので、これをサイドバーに設置し、先ほどのソースコードをペーストします。
最後にウィジェットを「保存」すれば完了です。

ソースコード表示強化

こちらは「SyntaxHighlighter Evolved」というプラグインを使いました。
様々なプログラミング言語に対応(HTMLやBash、SQLにも!)しているらしく、色々なところで使われているのを目にします。
インストール後、記事の中で該当箇所を[言語名]~[/言語名] で囲みます。例えばHTMLなら、

[html]
<p>
	ある人が変わる力は、何ごとかを「したい」という自分の声に耳をすませることだ。
</p>
[/html]

と書きます。すると、
[html]
<p>
ある人が変わる力は、何ごとかを「したい」という自分の声に耳をすませることだ。
</p>
[/html]
…と、このように表示されます。環境によっては表示されないようですが。
この時、ソースコード部分に関してはHTMLのエスケープをしなくて良いので、そのまま貼りつけることが出来ます。
デザインを変更したり、行番号を非表示にするだけでなく、特定の行をハイライトする機能もあるようです。

記事のメタデータ修正

細かいところですが、各記事の下部にあるメタデータ(カテゴリやタグ、投稿日など)の表示も修正しています。
タグを設定している場合、どうしても横に長くなってしまいがちなので適当なところで改行を入れてみました。
タグ未設定の場合は問題無さそうですのでそのままです。
記事のメタデータの例

調べてみたところ、現在使っているWordPressテーマ「Twenty Twelve」version 1.1では、wp-content/themes/twentytwelve/functions.phpにある twentytwelve_entry_meta() 関数でメタデータ用の表示文字列を生成していることが分かりました。
[php firstline=”323″ highlight=”330″]
/**
* Prints HTML with meta information for current post: categories, tags, permalink, author, and date.
*
* Create your own twentytwelve_entry_meta() to override in a child theme.
*
* @since Twenty Twelve 1.0
*/
function twentytwelve_entry_meta() {

[/php]
さらに読み進めてみると、以下のような処理がありました。
残念ながら英語のままではありますが、__(文字列) という記述になっているのが気になります。
おそらく引数の文字列を元に、言語環境と照らし合わせて該当する翻訳文字列を検索し、あればその文字列を返す、無ければ引数そのまま返す……というような処理をしているのだろう、というのがPHPに無縁な僕でも何となく分かります。

[php firstline=”350″]
// Translators: 1 is category, 2 is tag, 3 is the date and 4 is the author’s name.
if ( $tag_list ) {
$utility_text = __( ‘This entry was posted in %1$s and tagged %2$s on %3$s<span class="by-author"> by %4$s</span>.’, ‘twentytwelve’ );
} elseif ( $categories_list ) {
$utility_text = __( ‘This entry was posted in %1$s on %3$s<span class="by-author"> by %4$s</span>.’, ‘twentytwelve’ );
} else {
$utility_text = __( ‘This entry was posted on %3$s<span class="by-author"> by %4$s</span>.’, ‘twentytwelve’ );
}
[/php]

ならばどこかに対訳ファイルがあるはずです!
探してみたところ、wp-content/languages/themes にそれらしきファイル twentytwelve-ja.po と twentytwelve-ja.mo を発見しました。
先のWordPressテーマファイルとは別のディレクトリなのが曲者です。

*.poがテキストファイルで、*.moはそのキャッシュ(バイナリ)です。
WordPress側は*.moファイルを参照するので、両方を更新する必要があります。

今回、これらを編集するのに、Poeditを使用しました。
Peditを立ち上げ twentytwelve-ja.po の中を覗いてみると、
[html]
カテゴリー: %1$s | タグ: %2$s | 投稿日: %3$s | <span class=\"by-author\">投稿者: %4$s</span>
[/html]
というテキストがありましたので、
[html]
カテゴリー: %1$s | タグ: %2$s |<br/>投稿日: %3$s | <span class=\"by-author\">投稿者: %4$s</span>
[/html]
と、タグのあとに改行を入れてみます。
そのまま保存ボタンを押せば*.moファイルも自動的に更新されるようです。

最後に、この2つをアップロードして終了です。

WordPressでサイトURL設定を間違えたとき

WordPressはユーザの目的に合わせて様々なカスタマイズに対応していますが、それゆえ僕のような初心者が弄ってしまうと途端に動かなくなってしまう場合があります(ありました)。
そのうちの1つが、設定 › 一般設定 にある「サイトアドレス(Site URL)」です。

WordPressのサイトアドレス設定
WordPressのサイトアドレス設定

そのBlogの各ページへのリンク生成に必要となる文字列で、この値を間違えるとスタイルシートが読み込めずに表示が崩れたり、正しく別ページへ移動できなくなってしまいます。
最悪の場合、WordPressの管理ページにもアクセスできなくなりますので、お手上げになってしまいかねません。

検索してみると、このミスは大変多くの人が経験しているようで、解決策もあっさり発見できました。
もしかして定番中の定番なのでしょうか。
今回、修正の参考にしたのは以下のページです。

WordPress › フォーラム » 階層変更後ログインできない

この問題の修正方法は、大雑把に分けて2つ。

  1. データベース(DB)を直接編集
  2. wp-config.phpで設定を上書き

WordPressの投稿データや設定等は、基本的にDBに格納されます。これを直接編集してしまえば当然ですが元に戻ります。
また、DBに設定が保存されていてもwp-config.phpに記載があればそちらが優先されるらしく、その仕組みを利用することも出来ます。
手軽なのは2番でしょうか。

wp-configを上書きする

FTPでウェブサーバにアクセスし、WordPressディレクトリの直下にあるwp-config.phpをダウンロードします。
[php]
define(‘WP_SITEURL’, ‘http://odproject.net/blog’);
[/php]
PHPには余り明るくないのですが、定数定義の構文のようですので、これを追記してみます。
ローカルマシンで修正した後はウェブサーバに戻す(アップロードする)必要があります。
この一手間が面倒なら、ターミナルでログインし、直接phpファイルを編集してしまいましょう。

いずれにせよ、復旧したら管理画面からサイトアドレスを再設定しておいた方が良さそうです。

データベースを編集する

今回、実はこちらの面倒な方法を使って復旧させました。
昨今のレンタルサーバですと、ウェブからDBを操作できるツール「myPHPadmin」が導入されていることが多いので、そちらを使用するのが得策です。
ただし僕はmyPHPadminを使ったことが無く、また変な操作をしてしまっては面白くありません。
ですので確実な方法でDBにアクセスすることにしました。はい、例によってターミナルからログインです。

[bash]
% mysql -u USER_NAME -h mysql***.db.sakura.ne.jp -p
[/bash]
ターミナルからコマンドラインツールのmysqlを起動します。
WordPressのDBは別の場所にあるらしく、サーバを指定しなければなりません。
オプションの意味についてはMySQLのリファレンスを参照してください。

[sql]
mysql> use DATABASE_NAME;
Database changed

mysql> show fields from wp_options;
+————–+———————+——+—–+———+—————-+
| Field | Type | Null | Key | Default | Extra |
+————–+———————+——+—–+———+—————-+
| option_id | bigint(20) unsigned | NO | PRI | NULL | auto_increment |
| option_name | varchar(64) | NO | UNI | | |
| option_value | longtext | NO | | NULL | |
| autoload | varchar(20) | NO | | yes | |
+————–+———————+——+—–+———+—————-+
4 rows in set (0.00 sec)
[/sql]
WordPressの各種設定は、wp_optionsテーブルに保存されています。
option_nameフィールドからそれっぽいものを探してみると、「siteurl」という文字列を発見しました。

[sql]
mysql> select * from wp_options where option_name =’siteurl’;
+———–+————-+————————-+———-+
| option_id | option_name | option_value | autoload |
+———–+————-+————————-+———-+
| 1 | siteurl | http://example.net/blog | yes |
+———–+————-+————————-+———-+
1 row in set (0.00 sec)

mysql> update wp_options set option_value="http://odproject.net/blog" where option_name =’siteurl’;
Query OK, 0 rows affected (0.00 sec)
Rows matched: 1 Changed: 1 Warnings: 0
[/sql]

というわけで、さくっとUpdateしてしまいましょう。

WordPressの高速化(キャッシュプラグイン)

WordPressは高機能な分、ちょっと重いところもあるので高速化プラグインをいくつか入れてみました。

1 ページキャッシュプラグイン

 毎回DBにアクセスせずに、キャッシュしたページを表示してくれるプラグインを
入れます。
 調べると「W3 Total Cache」が有名なのですが、最近、脆弱性が発見されているというのと、サーバのリソースをがっつり食うようなので、今回は「Quick Cache」をインストールすることにします。

○インストール方法
「プラグイン」>「新規追加」>「Quick Cache」を検索
「いますぐインストール」を選択して、インストールが完了したら
「プラグインを有効化」で機能をONにします。

メニューの中から「Quick Cashe」>「Config Options」
Caching Enabled? の所を「ON(Enabled)」を選択して保存

2 MOファイルキャッシュプラグイン

 Wordpressの翻訳ファイルであるMOファイルをキャッシュします。
 「MO Cache」というのが有名そうですが、他のObject Cache も同時必要
 今回は、単体でキャッシュしてくれる「001 Prime Strategy Translate Accelerator」を導入します。

3 MySQL クエリキャッシュプラグイン

 データベースもキャッシュします。
 「DB Cache Reloaded Fix」をインストールして有効化

とりあえず、定番のプラグインを3つほどいれてみました。

<参考にしたページ>

さくら(スタンダード)にWordPressを導入してみました

WordPressをインストールしてみましたのでそのメモ

さくらサーバの契約を確認すると「ライト」ではインストールできない様子。
「スタンダード」以上で入れましょう。

1 データベースを新規作成

WordPressはデータベースを使います。
さくらのサーバコントロールパネルから新規データベースを作成
https://secure.sakura.ad.jp/rscontrol/

文字コードは「UTF-8」を選択
データベース名、パスワードははあとで使います。
作成されたデータベースはサーバ名が表示されているのでこれもメモ

2 WordPressをダウンロード

公式ページからダウンロードして解答

ホーム

FFFTPあたりで適当なフォルダにまるごとアップロード
いつもアップロードしてから、パーミッションの設定をしていたのですが、
アップロードのタイミングで自動で設定してくれる機能があるようです。
FFFTPの[環境設定]→[オプション]→[転送3]
今回は「*.php」を「705」に指定します
FFFTP

3 URLにブラウザからアクセス

「ファイルが見つかりません」といわれるので「wp-config.php ファイルを作成する」ボタンを。
あとは自動でインストール作業が始まります、
このとき、1で作ったデータベース名、ユーザ名、パスワード、サーバ名が必要になります。