15 March 2018

WordPressをローカル環境でブログエディタとして使ってみる?

event_noteMarch 15, 2018

 この記事の趣旨は、WordPressを、サーバーを介さずスタンドアロンで、単なるブログエディタとして使う、というものです。当ブログは、Bloggerというブログサービスを使っているのですが、Bloggerの記事編集画面がやや使いづらいところがあるので、Windows Live Writer に文字を打って、<p>タグのついたソースをコピー&ペーストするという方法をとっていました。ただ、Windows Live Writer もタグの自動調整の点でクセが強く使いづらい部分があるため、より良いエディタとして、利用者が多くカスタマイズの手段も豊富そうな、WordPressが使えるのではないかと考えました。

 サーバーを介する実際のWordPressの使用方法については全く分からないのですが、この方法は、ローカル環境で好きなように色々できるので、WordPressを実際に使っている方であったとしても、気になっていたテーマやプラグインを気軽に試したり、ローカルでスタイルシートをカスタマイズできる等の点で有用性があるのではないかと思います。

必要なもの

以下は、Windows上で動作するソフトウェア

・WordPress Portable

https://wordpress-portable.webnode.com/

(ダウンロードできない場合はこちら から)

・WordPress最新版

https://ja.wordpress.org/releases/

・TinyMCE Advanced (ブログエディタとして使う場合)

https://ja.wordpress.org/plugins/tinymce-advanced/

 

WordPress Portableの起動

"WP-Portable-3-5.zip"を解凍します。

最新版のWordPressを使いたい場合

WP-Portable-3-5\www\wordpress にある"wp-config.php"をどこか違うところにコピーした上で、"www"フォルダの中の"wordpress"を削除し、最新版を解凍した中にある"wordpress"フォルダを "WP-Portable-3-5\www" に配置します。その後 先ほどコピーした"wp-config.php"を、WP-Portable-3-5\www\wordpress の中に配置します。

 (2018年2月時点での最新版である wordpress-4.9.4-ja ではこの方法でいけましたが、今後のバージョン改定に伴う仕様変更によっては、この方法が通用しなくなる可能性はあります)

 

 "WP-Portable.exe"を実行すると、以下のような許可画面が出るかも知れませんが、あくまでブログエディタとして使うという目的では、アクセスを許可しなくても、問題ありませんでした。

 "WP-Portable.exe"を実行するとタスクバーの通知領域にWordPress Portable のアイコンが表示されます。この時に、

 ブラウザから http://localhost/wordpress/wp-login.php へとアクセスすれば、ログイン画面となります。

 Username と Password にはそれぞれ  admin  と入力すればOKです。もしも、ユーザー登録などを求められる場合は、"wp-config.php"の配置が誤っている可能性があります。

 

 毎回入力するのも手間なので、自動化したい場合は、以下のコードをコピーしてメモ帳などのテキストエディタに貼り付け、任意のファイル名で .html ファイルとして保存してください。

  WP-Portable_Login.html

<html>
<head>
<body onLoad="document.WP.submit();">
<form action="http://localhost/wordpress/wp-login.php" id="WPForm" method="post" name=WP>
WordPress Portable
<input name="log" type="hidden" value="admin" /></input>
<input name="pwd" type="hidden" value="admin" /></input>
<input type="submit" value="Log In" >
</input>
</form>
</body>
</html>

 この HTMLファイルを、"WP-Portable.exe"を実行した後に開けば、自動で WordPress Portable のメイン画面に移行するはずです。ただし、仕様変更によって使えなくなってしまう可能性はあります。

 

 初回ログイン時は、以下のような画面になるかもしれません。"Update WordPress Database"を選択し"Continue"。

 "wordpress-4.9.4-ja"時点では、日本語表示にしたい場合は、メニューの Settings>General にある Site Language から日本語を選択し、一番下にある Save Changes を押せばOKでした。

 

プラグインやテーマの導入

 プラグインやテーマは、 WordPressのソフト内の "アップロード" 機能からは私の環境ではうまく入れることができませんでしたが、手動で配置してみたところ上手くいきました。

 WordPress.org などから、直接各種テーマやプラグインのZIPファイルをダウンロードして解凍し、

プラグインの場合は、WP-Portable-3-5\www\wordpress\wp-content\plugins へ、
テーマの場合は、WP-Portable-3-5\www\wordpress\wp-content\themes へ、
バージョン番号のない (一つ中の) フォルダを配置します (例えば、"konichiha.6.9.2" というプラグインがあったとすると、その中の "konichiha" フォルダを配置)。

 

TinyMCE Advanced を使ってエディタとして使いやすくカスタマイズ

 TinyMCE Advanced というプラグインはWordPressをブログエディタとして使う上で、とても便利です。

 WP-Portable-3-5\www\wordpress\wp-content\plugins へ、解凍した"tinymce-advanced" フォルダを配置し、プラグインのメニューからTinyMCE Advancedを有効化。

 設定メニューから TinyMCE Advanced を選択します。

 下のほうにある設定項目の、Font Sizes や Create CSS classes menu にはチェックを入れておくのがおすすめです。

 (Create CSS classes menu でエラーが出ている場合は、現在選択しているテーマが editor-style.css のオプションに対応していないのだと思います。特にテーマにこだわらないのであれば、初めから入っている Twenty Seventeen というテーマにしておけば大丈夫だと思います)

 Keep paragraph tags については、Twenty Seventeen テーマでしか確認していませんが、チェックを入れ設定を保存すると、記事を書くビジュアルエディタで<p>タグが自動挿入されるようになりました。

 

 また、設定画面の上のほうにあるツールバーの設定では、マウスによるドラッグ&ドロップで、ツールバーのアイコンを自分好みにカスタマイズできます。その中の項目の一つである "Fullscreen"をツールバーに加え、ビジュアルエディタを使っているときに選択すると (もともと右上にあるフルスクリーンボタンと紛らわしいですが別物です) 、サイドメニューが一時的に消えるのでとてもすっきりします。

 ところで、設定しているテーマによってはビジュアルエディタで文字を打っていると横幅がすべて埋まっていないのに、文字が折り返してしまう、ということがあると思うのですが、これは恐らく、テーマの記事部分の横幅とビジュアルエディタの横幅を同じにする機能によるものです。

 この横幅を変更するには、先ほど見た TinyMCE Advanced の設定画面の、Create CSS classes menu にチェックを入れて設定を保存し、エディタに入ることで作成される editor-style.css ファイルを編集するのが手軽だと思います。

Twenty Seventeen テーマを設定している場合は、

WP-Portable-3-5\www\wordpress\wp-content\themes\twentyseventeen\assets\css

の中に作成されている、editor-style.css をワードパット等で開き、body のmax-width の値を既定の 580px よりもっと大きな値に変更すればOKでした。

 

その他 ブログエディタとして使うのに便利だと思われる設定やプラグイン

 

BI Button Changer — WordPress Plugins

https://wordpress.org/plugins/bi-button-changer/

 WordPressのエディタにある 「Bタグ」ボタンを押すとなぜか<strong>タグで、「Iタグ」ボタンを押すと<em>タグで囲まれてしまうという、よく分からない仕様を解消するためのプラグインです。このプラグインを導入し有効化すれば、アイコン通りに<b>タグや<i>タグで囲まれるようになります。

 

WordPressの自動保存・リビジョンの違いと無効・制御する方法 | アクロマニア

https://acr0mania.com/wp-autosave-revision/

 こちらのサイトでは、WordPressの編集画面での記事の自動保存等を無効化する方法について詳しく書かれていました。

 自動保存やリビジョンを無効化することで、多少WordPressのエディターの表示スピードが速くなったような気がします。

 また、記事中で紹介されている WordPress Disable Revisions and Autosave plugins は現在本家サイトはなくなってしまっているようですが、Internet Archive に保存されており、ダウンロードが可能でした。

 

WordPress Importer — WordPress Plugins

https://ja.wordpress.org/plugins/wordpress-importer/

 WordPressのメニューにある Tools>Export からエクスポートした記事などのバックアップファイル (.xml) を、 Tools>Import >WordPress からインポートするためのプラグインです。 レビューを見る限り不具合が多そうです…記事をインポートする分にはこれで十分な気がしますが、もっといい方法があるかも知れません。




 

Reference

・手軽にできる!「WordPress Portable」を使ってWordPressのローカル環境を作る
http://scope.minibird.jp/niji-life/archives/251