カテゴリー別アーカイブ: WordPress

2013年7月2日 02:06

[WordPress] WordPressカスタマイズのメモ(2)

Posted by


先日の記事に引き続き、WordPressの設定を少し弄ってみました。
今回は以下の2項目です。

  1. コメントスパム対策
  2. カスタマイズ用テーマ作成

コメントスパム対策

どこから嗅ぎつけてこられたのか定かではありませんが、開始して間もない当Blogもコメントスパムの洗礼を受けることになりました。
管理画面で各コメントを「承認」しないとページには表示されないため、そこまで大きな被害があったわけではないのですが、そんな無意味なことで手間を取らされるのはハッキリ言って面白くありません。
スパム防止の手段は幾つかありますが、WordPressのプラグインで何か便利なものがないか探してみましょう。

新規追加のページで検索してみたところ、予想通り多くのプラグインが見つかりました。
今回はBestWebSoftが配布しているCaptchaプラグインを導入してみました。

Captchaプラグイン導入後のコメント欄

Captchaプラグイン導入後のコメント欄


画像のハイライト部分を見ていただければ分かりますが、コメント投稿フォームに簡単な計算式が表示されるようになります。
正しい答えが入力されていなければ、スパム投稿と判断されるようです。
ここでは漢数字の足し算が表示されていますが、設定によって算用数字のみにしたり、計算式の種類(と言っても減算&乗算くらいですが)を変更することも出来ます。

巷でよく見かける画像の文字を入力してもらうタイプに比べるとSPAM排除の精度は少し下がってしまいそうですが、とりあえずの対策としてはこれで十分かなと思います。
これでどうなるか、しばらく様子を見ることにします。

カスタマイズ用テーマ作成

前回、記事の末尾に表示されているメタデータ部分を変更しようと、WordPressのテーマファイルを修正しました。
それの続きとなります。

現在、当Blogで使用しているテーマファイルは「TwentyTwelve」で、これはWordPressの2012年デフォルトです。
公式で配布されているテーマファイル(デフォルトテーマを含む)は、WordPressに備わっているアップデート機能の対象となっているらしく、せっかくカスタマイズしてもWordPress本体の更新により元の状態に戻されてしまいました。
その対策として、TwentyTwelveのテーマファイル(ディレクトリ)を複製した、カスタマイズ専用のデーマを用意することにします。
参考にしたのは以下のサイトです。

デフォルトテーマの複製

ではまず、FTPクライアントなりターミナルなりを使用して、(WordPressインストールディレクトリ)/wp-content/themes へアクセスします。
そこで元になるテーマファイルをコピーします。

$ cd ~/(インストールディレクトリ)/wp-content/themes
$ cp -a twentytwelve odproject_mytwentytwelve

新規テーマファイルの名前は分かりやすいものが良いでしょう。
ここでは TwentyTwelveの改造版という意味を込めて、My TwentyTwelve(ファイル名としては odproject_mytwentytwelve)という名前にしてみました。
そして各テーマディレクトリの直下にある style.css に、このテーマファイル自体のメタ情報(名称や説明など)が記述されていますので、これを適当に書き換えます。

Theme Name: My TwentyTwelve
Theme URI: 
Author: ODプロジェクト
Author URI: http://odproject.net/
Description: 公式テーマTwentyTwelveのカスタマイズ用
Version: 

一旦ここでWordPressの管理画面を覗いてみましょう。
外観 – テーマ のページに、無事「My TwentyTwelve」が表示されています。ここまではどうにか成功のようです。

TwentyTwelveの複製

TwentyTwelveの複製

言語ファイルの複製

次に言語ファイルを用意します。こちらはテーマファイルとは異なり wp-content/languages/themes に置かれています。
先程と同様に、これもコピーしてしまいましょう。

$ cd ~/(インストールディレクトリ)/wp-content/languages/themes
$ cp -a twentytwelve-ja.po odproject_mytwentytwelve-ja.po
$ cp -a twentytwelve-ja.mo odproject_mytwentytwelve-ja.mo

*.poファイルと*.moファイルが言語ファイルです。
これらの説明、および編集方法については前回の記事を参照してください。

参照する言語ファイルの指定

テーマファイルと言語ファイルの複製が完了しました。ですがこれだけでは正しくカスタマイズ出来ません。
今のままでは元テーマの言語ファイル(twentytwelve-ja.mo)を読み込んでしまいますので、この参照先を修正しましょう。

WordPressでは多言語対応の手段として、__()_e() 等の関数を用意しています。
これら翻訳関数に引数として英語の文章を渡すと、それに対応した別言語の文章が返り、無ければ英文のまま返ってくるという仕組みです。
リファレンスやテーマファイルの記述を読むと、第2引数としてテーマファイル名(正確にはテキストドメインと呼ぶようです)を与えることで、テーマに応じて参照する言語ファイルを設定できることが分かります。

*.phpファイルのあちらこちらに以下のような記述がありますので、これを片っ端から置換します。
自力でやる場合、数が多いので面倒かもしれません。ターミナルからsedコマンドを叩いた方が楽だと思います。

<?php
	_e( 'English Message', 'twentytwelve' );
?>
<?php
	_e( 'English Message', 'odproject_mytwentytwelve' );
?>

また、function.phpには、テキストドメインを指定しているらしき箇所がありますので、これも修正してしまいましょう。

/*
 * Makes Twenty Twelve available for translation.
 *
 * Translations can be added to the /languages/ directory.
 * If you're building a theme based on Twenty Twelve, use a find and replace
 * to change 'odproject_mytwentytwelve' to the name of your theme in all the template files.
 */
 load_theme_textdomain( 'odproject_mytwentytwelve', get_template_directory() . '/languages' );

おそらく、これで odproject_mytwentytwelve-ja.mo を読んでくれるようになったはずです。



2013年6月18日 19:50

[WordPress] WordPress に TwitterCards を設定してみた

Posted by


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!」を押します。
 メタタグの設定状況がチェックされて、申請がまだの場合は申請するためのボタン
が表示されるので、クリックすると登録する入力フォームがでるので、必要項目を入
力したら申請完了です。
 承認がでるまで時間がかかるようなのでしばらく待ちましょう。

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



17:20

[WordPress] WordPressカスタマイズのメモ

Posted by


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

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

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

ソーシャルボタン設置

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

Twitter投稿表示

プラグインもありますが、今回はTwitterから提供されている公式ウィジェットを利用します。
ブラウザでTwitterにログインし(当然ながら既にTwitterアカウントを持っている必要があります)、設定 › ウィジェット にある新規作成ボタンを押してください。
好みに合わせて設定を選んだのち、「ウィジェットを作成」すると、例えば以下のようなソースが表示されますので、クリップボードにコピーしておきます。

<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>

続いてWordPress側の設定を行います。管理画面から、外観 › ウィジェット を開いてください。
そこに「テキスト」という自由に文章を置くためのウィジェットがありますので、これをサイドバーに設置し、先ほどのソースコードをペーストします。
最後にウィジェットを「保存」すれば完了です。

ソースコード表示強化

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

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

と書きます。すると、

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

…と、このように表示されます。環境によっては表示されないようですが。
この時、ソースコード部分に関してはHTMLのエスケープをしなくて良いので、そのまま貼りつけることが出来ます。
デザインを変更したり、行番号を非表示にするだけでなく、特定の行をハイライトする機能もあるようです。

記事のメタデータ修正

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

調べてみたところ、現在使っているWordPressテーマ「Twenty Twelve」version 1.1では、wp-content/themes/twentytwelve/functions.phpにある twentytwelve_entry_meta() 関数でメタデータ用の表示文字列を生成していることが分かりました。

/**
 * 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に無縁な僕でも何となく分かります。

	// 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' );
	}

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

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

今回、これらを編集するのに、Poeditを使用しました。
Peditを立ち上げ twentytwelve-ja.po の中を覗いてみると、

カテゴリー: %1$s | タグ: %2$s | 投稿日: %3$s | <span class=\"by-author\">投稿者: %4$s</span>

というテキストがありましたので、

カテゴリー: %1$s | タグ: %2$s |<br/>投稿日: %3$s | <span class=\"by-author\">投稿者: %4$s</span>

と、タグのあとに改行を入れてみます。
そのまま保存ボタンを押せば*.moファイルも自動的に更新されるようです。

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



12:35

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

Posted by


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をダウンロードします。

define('WP_SITEURL', 'http://odproject.net/blog');

PHPには余り明るくないのですが、定数定義の構文のようですので、これを追記してみます。
ローカルマシンで修正した後はウェブサーバに戻す(アップロードする)必要があります。
この一手間が面倒なら、ターミナルでログインし、直接phpファイルを編集してしまいましょう。

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

データベースを編集する

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

% mysql -u USER_NAME -h mysql***.db.sakura.ne.jp -p

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

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)

WordPressの各種設定は、wp_optionsテーブルに保存されています。
option_nameフィールドからそれっぽいものを探してみると、「siteurl」という文字列を発見しました。

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

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



06:00

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

Posted by


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つほどいれてみました。

<参考にしたページ>