Sabakura Blog

ブログやサイトの記事を作成したあとで、あとから細かな修正や編集を行いたくなることはよくあると思います。その際に、いちいち別ページの編集画面に遷移して、修正して、また確認して……というプロセスを何度も踏むのはとても面倒です。

そこでおすすめしたいのが、WordPressプラグインの「Front-end Editor（フロントエンド・エディタ）」です。このプラグインを導入すると、画面遷移なしでそのまま記事を直接編集できるようになります。

Front-end Editorのインストール

とくに難しい作業はなく、一般的なプラグインのインストール手順で大丈夫です。

1. プラグイン配布ページである「Front-end Editor | scribu」に行きます。
2. 右サイドバーの「Download」ボタンから、プラグインをダウンロードします。
3. ダウンロードした「front-end-editor.2.2.zip」を解凍します。
4. 解凍したフォルダ内にある「front-end-editor」をWordPressの「plugin」フォルダにFTPでアップロードします。
5. WordPressにログインし、ダッシュボードを表示します。
6. 「プラグイン」の項目から、「フロントエンド・エディタ」を有効化します。

Front-end Editorの設定と使い方

Front-end Editorの使い方についてですが、Front-end EditorにはHTMLソースを編集するモードと、HTMLタグやCSSによる修飾がなされた本文を直接編集できるWYSIWYGモードの二通りがあります。
このうち、初期設定ではWYSIWYGモードが有効になっています。

WYSIWYGモード時の使い方

1. 記事の本文中にマウスポインタを合わせると、左側に「Edit」ボタンが表示されます。
   
2. 「Edit」をクリックすると、編集用のWYSIWYGエディタが表示されます。
   
3. 「Format」タブでは、文字の太字、イタリック体、下線、リスト、番号付きリスト…など文字に関する装飾が行えます。
4. 「Inset」タブでは、画像、テーブル、リンクの挿入が行えます。
5. またエディタ右上の押しピンボタンをクリックすることで、エディタの位置を固定することができます。（固定しないと画面スクロールにあわせて勝手に移動します）
6. 「保存」をクリックすると編集内容が保存されます。

WYSIWYGモードの注意点

さてWYSIWYGモードは記事が直接編集できて便利なのですが、実を言うと私はほぼ使っていません。これはなぜかというと、現在のFront-end EditorはHTMLタグしか認識してくれないため、たとえば「<?php」のようなコードがあると、「<」が実体参照の「＆lt;」に変更されてしまい、PHP部分が動かなくなってしまいます。

また太字や下線といった基本的な装飾は行えるものの、CSSで特定のclassやIDを付与するといった使い方はできません。そのため結局編集画面に移動することが多くなってしまうので、私は最初からHTML編集モードに切り替えて使っています。

HTML編集モードへの切り替え

1. WordPressのダッシュボードにログインします。
2. 「設定」の「フロントエンド・エディタ」をクリックします。
3. 「Enable the WYSIWYG editor.」のチェックを外します。
4. 「変更を保存」をクリックします。

HTML編集モード時の使い方

HTML編集モードでも、基本的な使い方はWYSIWYG時と変わりません。ただしエディタは表示されないので、直接テキストエリア内を編集する形になります。

1. 記事の本文中にマウスポインタを合わせると、左側に「Edit」ボタンが表示されます。
   
2. 「Edit」をクリックすると、編集用のテキストエリアが表示されます。
   
3. 「保存」をクリックすると編集内容が保存されます。

まとめ

私自身は使ってはいませんが、記事内でこまかなclassやIDをつけたりしない、PHPコードなどを本文中に入れないという方には、WYSIWYGモードもとても便利だと思います。

どちらのモードを使うにしても、画面遷移なしで編集できるというのは非常に快適ですので、しょっちゅう記事を修正するという方はぜひ「Front-end Editor」を導入してみてください。

WordPressの利用にはMySQLデータベースの利用が必須になっています。
というのも、投稿記事の内容からコメント、カテゴリやタグの情報まですべてがMySQLのデータベース内で管理されているからです。

しかしサイトを色々とカスタマイズするなかで、このWordPressをインストールしたデータベースとは別のデータベースの情報を参照したい場合もあります。
もちろんこれは可能なわけですが、その際、最後にWordPressのデータベースに再接続する必要がありますので注意してください。

以下、具体例を用いながら説明してみます。

WordPressとは別のMySQLデータベースから情報を取り出す

ここでは仮に、WordPressをインストールしたデータベースを「wpdb」、そしてユーザーの情報を格納しているデータベースを「userdb」とします。

このときWordPress内でユーザーの情報を表示するには、まずuserdbに接続します。
※なお記事やページの本文中でPHPを実行するには、runPHPプラグインを別途導入する必要があります。

<?php
mysql_connect("MySQLサーバ名", "ユーザー名", "パスワード") or die("DB接続エラー");
mysql_select_db("userdb") or die("DB接続エラー");
?>

これでuserdbに接続し、そこから自由にユーザー情報を引き出すことができます。

ただし、このままだとWordPressのデータベースからは切り離されています。そのため、たとえばフッターなど、ユーザー情報を表示した場所以下の描画が行われなくなってしまいます。

そのためユーザー情報の取り出しが終わったら、以下のようにして再度WordPressのデータベースに接続してください。

mysql_select_db("wpdb") or die("DB接続エラー");

これで問題なくWordPressは動作します。

もちろんごく簡単な情報であれば、わざわざ別のデータベースを作らずとも、WordPressのデータベース内に新規テーブルを作ることでも解決できます。しかし複数のテーブルを抱える場合など、別のデータベースを作る必要があるときもあるでしょう。
そうした場合には、上記の再接続の手順を忘れないように注意してください。

なるべくサイトの読み込み速度を早くしたい、というのはウェブ制作に関わる人共通の希望だと思います。
Googleの検索順位を左右するという噂話はともかくとしても、ページの読み込み速度は直帰率や滞在時間に大きく影響します。

このブログはWordPressで作成していますが、今回ページ速度改善のための興味深いプラグインを見つけたので導入してみました。

001 Prime Strategy Translate Accelerator

導入したのは「001 Prime Strategy Translate Accelerator」というプラグインです。
下記の紹介ページにて、詳しいインストール方法も合わせて紹介されています。

WordPressの実行速度を短縮させる「001 Prime Strategy Translate Accelerator」をリリースしました – Simple Colors

WordPressは標準で多言語対応していますが、そのぶん翻訳のための様々なファイルを読み込んでいます。このプラグインは、ja.moという翻訳のためのファイルをキャッシュすることで、読み込みを高速化させようとするものです。

導入してみた感想

サイトの読み込み速度自体は、もともと自作テーマのため多言語対応ではなかったこともあり、とくに高速化された感じはしませんでした。

しかしダッシュボード（管理画面）は本来の英語から日本語へ翻訳されたものを表示していますので、こちらに関してはかなり表示が早くなりました。ダッシュボードの遷移が遅いのも意外とストレスが溜まりますので、なかなかありがたいプラグインでした。

おそらく多言語対応のテーマをお使いの方であれば、通常の読み込み速度もかなり改善されると思いますので、ぜひ導入を検討してみてください。