それ以外にも、WordPressが動いているサーバーのドメインを変更しなくてはならなかったり、ステージングサーバーから公開サーバーにデータコピーをしたりと、WordPressを移設して動かすタイミングって、割と多かったりします。

移設の問題点

移設を行う場合の一番の問題点は、公開URLが変更になることです。

1. テーマファイルのCSSやJavaScriptが読み込まれないためデザインが崩れる
2. 公開URLが正しくないとWordPressの管理画面にログインができない
3. 記事中に設定したリンクや、メディア（画像やファイル）が全てリンクが切れてしまう

1. 2. については公開URLの設定さえ元に変更してしまえば問題無いのですが、一番の問題は 3. で、記事中に設定した内部リンクやら、画像やら添付ファイルやらが全てリンク切れを起こしてしまうことです。

Search Regexという正規表現などで記事を検索してURLを置換できるツールなどが、まず考えつく1つの方法です。

• WordPress › Search Regex « WordPress Plugins
• 【WordPress】全記事から検索して一括置換出来るプラグイン「Search Regex」が素晴らしい | nori510.com

しかしこのSearch Regexは、通常の投稿や固定ページの内容は置換できますが、カスタム投稿は検索できません。（カスタマイズすれば可能ですが）

またなにより大きな問題として、このプラグインではカスタムフィールドに入力された内容は対象外となってしまうため、カスタムフィールドに画像のURLや記事のURLなどが入っている場合、こちらを修正することができません。

カスタムフィールドの問題

そのため、カスタムフィールドの値を一気に書き換える場合には、DBから直接UPDATEクエリなどを使って修正するしかなくなりますが、この方法にもまた問題があります。

WordPressのカスタムフィールドには、PHPのシリアライズされたデータが格納されていることがあるからです。

シリアライズされたデータというのは、下記のようなテキストデータです。
これはPHPの配列やオブジェクトなどを文字列に変換したもので、PHPのunserialie関数を通すことで元の配列などに戻すことが可能です。

a:2:{i:2;a:4:{s:5:"title";s:0:"";s:5:"count";i:0;s:12:"hierarchical";i:0;s:8:"dropdown";i:0;}s:12:"_multiwidget";i:1;}

このシリアライズされた文字列には、元の配列やオブジェクトの中のデータ形式や、格納されているテキストの長さなども保持されていて、単純に中のテキストを置換したりしてしまうと、テキストの長さが保持されているデータと合わなくなってしまい、データが復元できなくなってしまいます。

そのため、UPDATEクエリを使って一気に直すことができません。

全て解決！便利なPHPスクリプト

そこで活躍するのが下記で公開されている SEARCH REPLACE DB というスクリプト。

• WordPress Serialized PHP Search Replace Tool | Interconnect IT – WordPress Consultants, Web Development and Web Design

海外の方が開発されCODEXにも記載されている非常に有用なスクリプトで、シリアライズされたデータも含めて、DBにあるレコードから特定の文字列を一気に置換することが可能になります！

まずはダウンロード

下記のリンクをクリックしてファイルを保存してください。

解凍したファイルをWordPressと同ディレクトリにアップ

解凍して出てきた searchreplacedb2.php を、WordPressのwp-config.phpが存在するディレクトリにアップします。

ファイルにアクセス

下記のような画面が表示されればOKです。

Submitをクリックして次に進んでください。

DBへの接続情報を確認

wp-config.php と同じディレクトリにアップされていれば、自動的にwp-config.phpに存在するDB情報を読み取って表示してくれます。

Submitをクリックして次に進んでください。

書き換えたいテーブルを選択

書き換えたい文字列があるテーブルを選択します。
最低限、投稿本体が格納されている posts およびにカスタムフィールドの格納されている postmeta、設定値が格納されている options は選択しましょう。

その他のテーブルについては、必要に応じて選択してください。
ユーザーのプロフィールなどにも書き換えたい文字列が存在するようならば、usermeta なども選択する必要があるでしょう。

検索する文字列と置換する文字列を入力

検索する文字列、すなわち書き換え元となる文字列と、置換する文字列を入力します。

WordPressを移設した場合は、以前に設置してあったURLを検索する文字列に、新しく設置した先を置換する文字列に指定します。

例えば http://example.com/blog/wp に設置してあったWordPressを http://hogehoge.com/wp に移設した場合は、下記のように記述してください。

検索する文字列

example.com/blog/wp/

置換する文字列

hogehoge.com/wp/

ポイントは http:// を抜くことです。

これはデータベースの中に http:// を抜いたドメインの状態で保存されているレコードがあるため、一部書き換わらないレコードが出てきてしまうためです。

入力が終わったらSubmitをクリックしましょう。

置換完了

めでたく置換が完了しました。

総計で何レコードが書き換えられたかなどがレポートされます。

最後にファイルを削除

置換が正しく完了したら、設置した searchreplacedb2.php は必ず削除してください。
放置しておくとパスワード認証も何も無くデータベースを書き換えられてしまうため、非常に危険です。

たったこれだけ

たったこれだけのステップで、面倒なURLの置換作業が全て完了します。
慣れればFTPからアップして5分もかからず作業を終えることができるでしょう。

1点注意として、データベースを書き換える作業になるため、作業前には必ずデータベースのバックアップをとった上で作業をしてください。
置換するテキストなどが間違えていた場合に、取り返しのつかないことになる場合があります。

WordPressの移設はとても手間だと悩んでいた方、是非お試しください。

Logicoolから発売されているゲーミングマウスG700sは通常のマウスと違い副ボタンが7つも存在しており、デザインにさえ目をつぶってしまえば（笑）、大変に便利なマウスです。

• LOGICOOL 充電式ゲーミングマウス G700s

この副ボタンにはアプリケーション毎に各種ショートカットや、メディアキーなどの機能を割り当てることができます。

例えばブラウザを利用しているときには「ボタン4で履歴を戻り、ボタン5で履歴を進む動作を行う」。
PHPStormを使っている時には「ボタン4で切り取り、ボタン5で貼り付け、ボタン6でファイル検索ウィンドウを立ち上げ、ボタン7でクラス検索を立ち上げる」といった使い方ができます。

Mac OS 10.8上での問題

購入してから大変便利に利用しているのですが、Mac OS 10.8で利用していると、ボタン4〜11をクリックしながらマウスを少しでも動かしてしまうと、なぜか左クリックが発生するという現象に悩まされてきました。

これがどういったことかというと、ブラウザのリンク上でボタン4を押して「戻る」を行った場合、ボタン4をクリックしながらマウスを少しでも動かしてしまうと、リンクがクリックされたことになってしまい、新しいリンクが開いてしまいます。

解決策

マカー御用達のKeyRemap4MacBookを利用します。

• KeyRemap4MacBook – OS X用のソフトウェア

こちらのprivate.xmlに下記のXMLコードを貼り付けて保存します。

<?xml version="1.0"?>
<root>
  <item>
    <name>Extra Mouse Button Click Ignore</name>
      <item>
        <name>Button 4</name>
        <identifier>extra_mouse_button_click_ignore.button_4</identifier>
        <autogen>__PointingButtonToPointingButton__ PointingButton::BUTTON4, PointingButton::NONE</autogen>
      </item>
      <item>
        <name>Button 5</name>
        <identifier>extra_mouse_button_click_ignore.button_5</identifier>
        <autogen>__PointingButtonToPointingButton__ PointingButton::BUTTON5, PointingButton::NONE</autogen>
      </item>
      <item>
        <name>Button 6</name>
        <identifier>extra_mouse_button_click_ignore.button_6</identifier>
        <autogen>__PointingButtonToPointingButton__ PointingButton::BUTTON6, PointingButton::NONE</autogen>
      </item>
      <item>
        <name>Button 7</name>
        <identifier>extra_mouse_button_click_ignore.button_7</identifier>
        <autogen>__PointingButtonToPointingButton__ PointingButton::BUTTON7, PointingButton::NONE</autogen>
      </item>
      <item>
        <name>Button 8</name>
        <identifier>extra_mouse_button_click_ignore.button_8</identifier>
        <autogen>__PointingButtonToPointingButton__ PointingButton::BUTTON8, PointingButton::NONE</autogen>
      </item>
      <item>
        <name>Button 9</name>
        <identifier>extra_mouse_button_click_ignore.button_9</identifier>
        <autogen>__PointingButtonToPointingButton__ PointingButton::BUTTON9, PointingButton::NONE</autogen>
      </item>
      <item>
        <name>Button 10</name>
        <identifier>extra_mouse_button_click_ignore.button_10</identifier>
        <autogen>__PointingButtonToPointingButton__ PointingButton::BUTTON10, PointingButton::NONE</autogen>
      </item>
      <item>
        <name>Button 11</name>
        <identifier>extra_mouse_button_click_ignore.button_11</identifier>
        <autogen>__PointingButtonToPointingButton__ PointingButton::BUTTON11, PointingButton::NONE</autogen>
      </item>
      <item>
        <name>Button 12</name>
        <identifier>extra_mouse_button_click_ignore.button_12</identifier>
        <autogen>__PointingButtonToPointingButton__ PointingButton::BUTTON12, PointingButton::NONE</autogen>
      </item>
      <item>
        <name>Button 13</name>
        <identifier>extra_mouse_button_click_ignore.button_13</identifier>
        <autogen>__PointingButtonToPointingButton__ PointingButton::BUTTON13, PointingButton::NONE</autogen>
      </item>
      <item>
        <name>Button 14</name>
        <identifier>extra_mouse_button_click_ignore.button_14</identifier>
        <autogen>__PointingButtonToPointingButton__ PointingButton::BUTTON14, PointingButton::NONE</autogen>
      </item>
      <item>
        <name>Button 15</name>
        <identifier>extra_mouse_button_click_ignore.button_15</identifier>
        <autogen>__PointingButtonToPointingButton__ PointingButton::BUTTON15, PointingButton::NONE</autogen>
      </item>
  </item>
</root>

すでにprivate.xmlを記述してある場合は、適宜マージしてください。

有効化

設定ウィンドウからXMLをリロードすると下記のように設定が表示されます。

表示された設定の「Extra Mouse Button Click Ignore」から、クリックを無効にしたいボタンにチェックを入れます。

これで単純にボタンに割り当てた機能だけが動作し、左クリックは発生しなくなります。

僕は普段はPHPStormでプログラミングをしますが、CSSやJavaScript、PHPなどをちょこっと編集する際はほとんどコレを利用しています。

しかしながらこのエディタ、起動時に前回開いたファイルがそのままタブとして開かれてしまい、何となく気持ち悪い。

そういうときは Preferences > Settings - User を開き、設定値として下記を追加します。

{
	"hot_exit": false,
	"remember_open_files": false,
}

ポイントなのは hot_exit も合わせて false にすることで、remember_open_files のみを false にしただけでは、動作に変わりがありません。

どちらも false とすることで、次回から起動した際にブランクの状態で開かれるようになります。

Sublime Textはバージョン２が主流ですが、最近になってバージョン3がパブリックベータとしてリリースされ、その動作の軽さに惹かれて早速インストールをしました。

Sublime Text – Download

Sublime Textは非常に軽くて使い安い便利なテキストエディタですが、唯一の欠点としてShitf JISやEUCなどの日本語のエンコーディングに対応していません。
昨今のWeb開発では滅多にお目にかかりませんが、CSVファイルや古いHTMLデータを開く場合などにはどうしても必要になります。

Sublime TextではConvertToUTF8というプラグインがリリースされており、こちらを利用することでShiftJISなどのエンコードが利用できるようになります。

seanliang/ConvertToUTF8 · GitHub

MacOS版のSublime Text 3で発生する問題

しかしながらMacOS版とLinux版に限り、Sublime Text 3ではConvertToUTF8プラグインが正しく動作しません。

これはプラグインの作者も注意事項として記載していて、こちらを解決するには別途プラグインをインストールする必要があります。

** For Linux users: ConvertToUTF8 relies on several dynamic libraries which are missing in embedded version of Python of Sublime Text 2 and 3. This plugin can not work fully until you install them manully.

** For OS X users: Sublime Text 3 uses an embedded Python which is facing the same problem as Linux version.

** I’ve reported this problem to Jon but did not get any response yet, so I will create extra plugins to solve it. If you are eager to use this plugin before they are released, please contact me for more information.

解決するためのプラグイン

Codecs33というプラグインを下記のリポジトリからダウンロードして解凍し、手動でPackagesディレクトリに設置します。

seanliang/Codecs33 · GitHub

設置方法

Sublime Text 3のPreferencesから、Browse Packagesを選択すると、ファインダーでPackagesディレクトリが開きます。
その直下に、Codecs33という名前で解凍したディレクトリを設置します。

解決

これで、Sublime Text 3でも正しくConvertToUTF8プラグインが利用可能になります！

しかし逆に、デフォルトの「投稿」機能から「カテゴリー」や「タグ」といった、 デフォルトで設定されている分類機能を取り外したいといった場合の情報はあまり見つかりません。

そんな時は下記のコードをfunctions.phpに記述して利用します。

function my_unregister_taxonomies()
{
	global $wp_taxonomies;

	/*
	 * 投稿機能から「カテゴリー」を削除
	 */
	if (!empty($wp_taxonomies['category']->object_type)) {
		foreach ($wp_taxonomies['category']->object_type as $i => $object_type) {
			if ($object_type == 'post') {
				unset($wp_taxonomies['category']->object_type[$i]);
			}
		}
	}

	/*
	 * 投稿機能から「タグ」を削除
	 */
	if (!empty($wp_taxonomies['post_tag']->object_type)) {
		foreach ($wp_taxonomies['post_tag']->object_type as $i => $object_type) {
			if ($object_type == 'post') {
				unset($wp_taxonomies['post_tag']->object_type[$i]);
			}
		}
	}

	return true;
}

add_action('init', 'my_unregister_taxonomies');

これだけで簡単に「カテゴリー」や「タグ」などを外すことができます。

HTML5のVideoプレイヤーとFlashのビデオプレイヤーを併用し、いろいろな環境に合わせて動画再生を行える非常に便利なスクリプト「Video-js」。

• HTML5 Video Player | Video.js

私も多々利用させて頂いて居るのですが、ここにきてタイトル通りのバグ「ループ再生の2回目以降で、再生ボタンが表示されっぱなしになる」に遭遇し、解決したのでその方法を記載します。

まず、バグが発生する環境は下記の通り。

• Video-jsのFlashプレイヤーで再生をしている
• autoplayオプションをON
• loopオプションをON
• controlsオプションをON

HTML5のプレイヤーでも発生するかは未検証です。

原因

Video.jsでは動画の再生・停止などに合わせイベントを発行しており、内部の動作についてもそのイベントに依存して制御を行っているようです。

今回の問題はループ再生の場合にのみ発生するのですが、その発生機序としては下記のようなものでした。

1. 1回目の動画再生が開始：playイベントが発生
2. playコールバックの処理(1)：「再生ボタン」が「display:none」になる
3. 1回目の動画再生が終了：endedイベントが発生
4. endedコールバックの処理(1)：「ループ再生なら、再度最初から再生」という処理が実行される
5. 2回目の動画再生が開始：playイベントが発生
6. playコールバックの処理(1)：「再生ボタン」が「display:none」になる
7. endedイベントに登録された2つめ以降のコールバックが発生
8. endedコールバックの処理(2)：「再生ボタン」を再表示させる

要はコールバックの登録の順番が悪いというもので、endedイベントの最初のコールバックで再生処理を行ってしまっているものだから、endedイベントに登録された2個目以降のコールバックが、なぜかplayイベントの次に実行されるという訳のわからない状態に。

というわけで、このあたりのコードをさくっと修正すればバグも解消します。

コード修正

video.js（version 3.2.0現在）の926行目付近：

  init: function(player, options){
    this._super(player, options);

    player.addEvent("play", _V_.proxy(this, this.hide));
    player.addEvent("ended", _V_.proxy(this, this.show));
  },

下記のように改善します。

  init: function(player, options){
    this._super(player, options);

    player.addEvent("play", _V_.proxy(this, this.hide));
    
    if (!player.options.loop) {
      player.addEvent("ended", _V_.proxy(this, this.show));
    }
  },

要は「ループ指定がされていない場合のみ、再生終了時にボタンを再表示してねん」という処理に変更をかけます。

これで晴れて2回目以降の再生でも、再生ボタンがしっかり消えたままになります。

特にメディア関してはフィルタをするような項目がなく、自分が投稿したもののみを表示するような仕組みが用意されていません。

そのため、自分が投稿した画像を他人に利用されてしまったり、逆のこともできたりと、少々お粗末な管理になってしまっています。

フィルターフックを使って表示を制限

WordPressではWP_Queryクラスを利用して、一覧や詳細画面を表示する際にデータベースから投稿を取得してきます。

そこで、WP_Queryクラスが投稿を取得する前に、今現在ログインしているユーザーの投稿やメディアのみを取得するようにクエリを書き換える事で、上記のような問題を解決することができます。

下記のコードをfunctions.php等に記述してください。

function my_pre_get_posts_filter(&$wp_query)
{
	global $pagenow;
	$user = wp_get_current_user();

	if (WP_ADMIN && ($post_type = $wp_query->get('post_type'))) {
		if (in_array($pagenow, array('media-upload.php', 'upload.php')) && $post_type == 'attachment') {
			// メディアの表示情報を制限
			$wp_query->set('author', $user->ID);
		}
	}
}

add_action('pre_get_posts', 'my_pre_get_posts_filter', 10, 1);

管理画面で表示しているかどうかの条件判断についてはもっと良い方法があるかと思うんですが、とりあえず上記コードで問題無く動作しています。

WordPress等を利用している場合に、コメントシステムとして大変人気のあるDISQUSというコメントシステムがあります。

詳しくは下記のサイトなどをご覧頂くとして、このDISQUSはPC向けだけでは無く、スマートフォンなどでも表示できるモバイルテーマが標準で附属しています。

しかしこのモバイルテーマ、なぜかPC向けと違い、FacebookやTwitterでログインする機能が省略されてしまっています。

かといってPC版のインターフェースをスマートフォンで利用しようとすると、コメント部分は普通に利用できるものの、ログインウィンドウが画面からはみ出してしまい、相当解像度の高いスマートフォンではないとログインに支障がでてしまいます。

• 投稿の編集 ‹ INSPIRE TECH — WordPress

スマートフォン向け対応できるCSSを書いた

DISQUSはAPIの管理画面から、独自にCSSを適用することが可能です。

そこで、PC向けのログインウィンドウをスマートフォンで見た際にも、綺麗に画面内に収まるようカスタムCSSを作成してみました。

.dsq-popup[id] {
	position: absolute !important;
}

.dsq-popup-container .dsq-popup-close {
	right: 5px;
	top: 5px;
	position: absolute !important;
	z-index: 1200 !important;
}

.dsq-popup-container .dsq-popup-title {
	position: relative !important;
}

.dsq-popup-container .dsq-popup-title h3 {
	font-size: 12px !important;
}

.dsq-popup .dsq-tabbed-modal {
	background: none !important;
}

#dsq-popup-message #dsq-login-disqus iframe {
	height: 300px !important;
}

.dsq-popup-body {
	width: auto !important;
}

.dsq-login-box .dsq-popup-body {
	width: 300px !important;
}

.dsq-popup .dsq-modal-tabs {
	width: auto !important;
	float: none !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li {
	float: left !important;
	width: 43px !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li a {
	padding: 4px 6px !important;
	text-align: center !important;
	font-size: 0px !important;
	border-bottom: none !important;
}

.dsq-popup .dsq-tab-container {
	padding: 10px !important;
	font-size: 12px !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li.dsq-active a {
	border-bottom: none !important;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	background: #eee !important;
}

#dsq-popup-message.dsq-popup .dsq-modal-tabs li.dsq-active a:hover {
	border-bottom: none !important;
}

適用方法

適用したいアカウントのアピアランスパネルを開きます。

スクロールして中ほどより下にある、Custom CSSの欄に上記コードを記述して保存します。

JavaScriptの設置

上記CSSだけではポップアップウィンドウの位置がおかしくなるため、下記JavaScriptを設置してください。

jQuery(function($) {
	setInterval(function() {
		$('#dsq-popup-message').css({
			'position': 'absolute',
			'top': $(window).scrollTop() + 10
		});
	}, 1000);
});

スマートフォンでの表示

こんな感じで表示されます。

注意

カスタムCSSはPC版にももれなく適用されてしまうため、PCとスマートフォンで利用する場合には、上記CSSにスマートフォンのみのクラス名やIDなどを追加するなどして、環境によって表示を切り替えられるよう工夫が必要です。

しかしながら、実際にアップロードしたファイルのURLを取得すると、
/{account_name}/files/{year}/{month}/{file_name} というURLが帰ってきます。
これは、マルチサイト用の .htaccess にURLの書き換え処理が記載されているためです。

# uploaded files
RewriteRule ^([_0-9a-zA-Z-]+/)?files/(.+) wp-includes/ms-files.php?file=$2 [L]

このURLに直接アクセスすればファイルは表示されますし、通常の利用上では全く問題はありません。

しかしながら、サムネイルを生成する際に非常に便利なライブラリである TimThumbなどを利用する際に、この書き換えられたURLが問題になります。

• TimThumb

TimThumbは、与えられたURLから実際のファイルパスを計算し、ファイルを読み込もうとします。

しかし、この与えられたURLは .htaccess により書き換えられたダミーのURLのため、実際にこの場所にはファイルは存在しません。

そのため、書き換えられる前のURLが必要になります。

関数作った

下記のような関数を作ってみました。

function ms_calc_media_url($blog_id, $media_url)
{
	global $wpdb;

	switch_to_blog($wpdb->siteid);
	$url = preg_replace('|^' . get_blog_option($blog_id, 'siteurl') . '/(files/[\d]{4}/[\d]{2}/.+)$|', get_bloginfo('url') . '/wp-content/blogs.dir/' . $blog_id . '/$1', $media_url);
	restore_current_blog();

	return $url;
}

$blog_id に当該のファイルをアップロードした子ブログのIDを指定して、$media_url にファイルのURLを与えれば、書き換えられる前のURLを計算して出力します。

この関数を使うことで、問題無くTimThumbなどのライブラリを活用できます。

親サイトの functions.php に下記の記述をするだけです。

function default_theme_setting()
{
	update_option('template', 'theme_name');
	update_option('stylesheet', 'theme_name');
	update_option('current_theme', 'Theme Name');
}

add_action('populate_options', 'default_theme_setting');

theme_name となっている箇所は、テーマのディレクトリ名を入れます。
Theme Name となっている箇所は、テーマの名称を入れておきます。

子テーマを指定する方法

上記の設定で、あるテーマの子テーマを設定しようとすると上手くいきません。
これは、下記の記述にすることで対応可能です。

function default_theme_setting()
{
	update_option('template', 'parent_theme_name');
	update_option('stylesheet', 'child_theme_name');
	update_option('current_theme', 'Child Theme Name');
}

add_action('populate_options', 'default_theme_setting');

parent_theme_name は親テーマのディレクトリ名を入れます。
child_theme_name は子テーマのディレクトリ名を入れます。

要は stylesheet というオプションに子テーマ名を設定し、template というオプションには親テーマを設定しておかなきゃイカンよ、ということです。