HOME  /WordPress(初級)
 /EmEditor Free版のインストールと利用事例
2020年03月27日

EmEditor Free版のインストールと利用事例

WordPressのCSSファイルやPHPファイルを編集する為には、WPの約束事である『UTF-8のBOMなし』のテキストエディタが必要になります。

私も幾つかのテキストエディタを試しましたが、現在は株式会社エムソフト様が個人向けに無償提供してくれている『EmEditor Free版』を使用させてもらっています。

特徴は

・コメントと本文を色分け表示してくれるために非常に見やすい。

・検索機能が充実しているので、何処に何が記述されているのかを探しやすい。

・インストールプログラムなのでファイル識別子と紐づけられる。

等のメリットを感じています。説明は下記の流れで説明します。

1.EmEditor Free版のインストール

2.WordPressで利用する為の設定変更

3.ファイル識別子との関連づけ

4.使い方の一例

1.EmEditor Free版のインストール

1-1.EmEditorのサイトから、プログラムをダウンロードする。

EmEditor Free版のサイト(左記URL)をアクセスし、表示された画面の下の方にある赤字のEmEditorのダウンロードの文字をクリックします。(下図参照)

ダウンロードのページが開いて、自動的にPCを判断して、ダウンロードが開始されます。

※私のPCは64ビット版なので『emed64_15.1.6.exe』がダウンロードされました。

1-2.ダウンロードしたEXEファイルを実行して、インストールする。

①OKで先に進む

②『次へ』で先に進む

③『次へ』で先に進む

④使用許諾に同意して『次へ』で先に進む

⑤インストールタイプ『標準』を挿入して、先に進む

⑥『インストール』ボタンを挿入する

⑦『完了』を挿入して、インストールを終了する。

⑧EmEditorが起動して、更新画面が出るので『OK』で終了する。

⑨購入方法の画面が出るが『閉じる』で終了する。

1-3.EmEditorをダウングレードして、無償版の設定にする

①コマンドの『ツール→すべてのコマンド』を選択する。

②表示されたコマンドから『ヘルプ→ダウングレード』を選択して、ダウングレードする。

③下記画面で出るので、『はい』で終了します。

2.WordPressで利用する為の設定変更

WordPressで修正するファイルの種類には下記の物があります。

①PHPファイル(.php)

PHPの正式名称はPHP:Hypertext Preprocessorになります。
またPHPはPersonal Home Pageの略称で、WEBページを記述するサーバーで動くスクリプト言語です。
WordPressはこのPHPで記述されており、機能のカスタマイズはこのファイルを修正する必要があります。 

②CSSファイル(.css)

CSS(Cascading Style Sheets)はWEBページのスタイルを定義するための言語です。
画面の構成やサイズ及び出力変数の表示フォーマット等が定義されており、画面のカスタマイズはこのファイルを修正する必要があります。 

③JavaScript

PHPはサーバ側で動くスクリプト言語ですが、JavaScriptはデバイス(PCやスマホ)側で動くスクリプト言語です。
スマホでスワイプしたり、タップ等はこのJavaScriptが検知して、デバイス側だけで色々処理をします。

④htaccessファイル(.htaccess)

.htaccess(ドットエイチティーアクセス)はWEB管理者がサーバ管理者に頼まなくてもディレクトリ単位でWordpresが動いているAppachの設定の一部変更するファイルです。
アクセスされるURLとプログラムが実行されるディレクトリの橋渡し等の設定等に使われます。

­ ­メモ

WordPressで扱うファイル形式はUTF-8のBOMなしが要求されるのですが、EmEditorのデフォルト設定は下記になっています。

・PHPファイルとJavaScriptファイル

UTF-8のBOMなし

・CSSファイルと.htaccessファイル

設定が異なっています。

そこで下記の設定変更が必要となります。

2-1.EmEditorの設定変更

①EmEditorを起動しツール→設定の選択→設定の定義を選択する。

②表示された画面で『CSS』を選択しプロパティボタンを挿入する。

③表示された画面から『ファイル』タブを選択『utf-8を優先する』にチェックを付け、『OK』で終了する。

④次に設定の定義画面で『TEXT』を選択し、、プロパティボタンを挿入する。

※.htaccessファイルは、TEXTになります。

⑤CSSと同様に『utf-8を優先する』にチェックを付け、『OK』で終了する。

⑥閉じるで、設定変更を終了します。

以上でPHPファイル、JavaScriptファイル、CSSファイル、.htaccessファイルがUTF-8のBOMなしで呼び出せるようになりました。

2-2.その他の設定

①行番号の表示

Editorの左側に行番号を表示させたい場合は、メニュのツール→設定の選択→設定の定義で修正する形式(css等)のプロパティを選択し、基本タブの『行番号を表示』にチェックを入れると行番号が表示されるようになります。

②タブの桁数

タブキーを挿入した時に4文字シフトするのがデフォルトです。

これを変更する場合は、上図の下の方にある『タブインデント』ボタンを挿入します。

表示された画面でタブの桁数を変更して下さい。 

③複数ファイルの表示方法の切り替え

複数のファイルをタブ形式で表示する場合は『ウィンドウ→タブを有効にする』を選択すると複数ファイルがタブ形式で表示されます。

チェックを外すと複数のファイルが別ウィンドウで表示されます。

3.ファイル識別子との関連づけの変更

Windowsの基本設定はPHPファイル等をダブルクリックてもメモ帳が開く設定になっています。
これをEmEditorに変更する必要があります。

(このやり方はWindows8及びVistaの場合で、Windows7の場合は環境がないので未検証です)

①phpファイルを右クリックして、『プロパティ』を選択します。

②表示された画面から、『変更』を選択します。

③表示された画面から、『EmEditor』を選択します。

④OKで終了します。

⑤同様に、CSSファイルも、.htaccessファイルもメモ帳からEmEditorに変更してください。

以上でファイルをダブルクリックするとEmEditorが開かれます。

4.使い方の一例

EmEditorを開く方法は、下記の2つの方法があります。

①EmEditorのプログラムから起動する。

②PHPファイル等をダブルクリックして開く

①の場合でも②の場合でも、既存ファイルの編集の場合は読み込んだファイルの種類が特定できるため、EmEditorはそのファイルの種類でコメントやコマンドを自動判定してくれます。

例えば下記phpプログラムがあるとします。

<!-- 本文の出力-->
<div id='primary' class='site-content-w'>
  <?php /* 固定ページのdisp-wordpressを読み込んで表示する */
   $data = get_page_by_path('disp-wordpress');
   echo '<div class="entry-content">'.apply_filters('the_content', $data->post_content).'</div>';
  ?>
</div>

これをEmEditorに読み込むと表示は下記になります。

コメントの所がグリーンで表示されて一目でコメントとわかる表示になります。

­ ­メモ

PHPファイルはHTMLで記述される部分とPHPで記述される部分があり、コメントは下記になります。

HTMLのコメントは、<!–で始まり、–>で終わります。

PHPのコメントは、/*で始まり、*/で終わります。

以上でEmEditor Free版が、自由に使えるようになります。

 

尚、ローカル環境では上記の設定でEmEditorが自由に利用でき様になりましたがリモートからでもこれが行えると便利です。
Synology社のNASを利用している場合はWEBDAV接続を設定する事により、外出先からでもローカル環境と同様にEmEditorを利用する事が可能になります。

これを利用する場合は『Synologyカテゴリ』の当該ドキュメントを参照してください。

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「Wordpress(初級)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

「wordpress」に関連するドキュメントを表示しています。尚、このページネーションはJquryで制御しています。

WordPressをインストールするとディフォルトではサイトURLはドメイン名/WordPressフォルダになります。これをドメイン名だけにする為にSynologyの仮想ホスト機能を使います。本ドキュメントはこの使い方を解説しています。

WordPressの動作環境を変更すると、DBをダイレクトに変更しなければならないケースがあります。このドキュメントはphpMyAdminのエクスポートとインポートを使って修正した事例を紹介しています。

ここではSynoligyサーバを「Hyper Backup」アプリケーションで、Googleドライブにバックアップ/リストアする方法を解説しています。

Synologyを複数台持っている場合は、Synology間でバックアップを相互に持たせる事ができます。ここではその方法を解説しています。

SynologyのMariaDBから、mysqldumpを使ってDBを定期的にダンプする方法と、それを利用してWordPressを過去の時点に戻す方法を解説しています。

フロントページやカテゴリページを使って最終的なメニュ構成を作成する方法を紹介しています。

Contact Form 7では確認用のe-mailアドレスをチェックする方法がありません。このドキュメントはContact Form 7のフィルターフックの機能をfunctions.phpに記述する事によりこれを可能にする方法を紹介しています。

固定ページに必要なのは、読者からの問い合わせを受けるメールフォームです。これを実現する為に『Contact Form 7』のインストールと設定、更にメールを送るためのSMTPとして、『WP-Mail-SMTP』のインストールと設定事例を紹介しています。

カテゴリページの表示を抜粋表示に変更してもこのカテゴリーの何処にどの様なドキュメントがあるか?は良く分かりません。そこで解説ページを固定ページに書き、カテゴリページの表示の時に、この固定ページを表示させる方法を解説しています。

このドキュメントは投稿ページと固定ページの違いや固定ページのプログラム構造を説明し、この固定ページを広幅表示に変更するための具体的カスタマイズ方法を紹介し更に固定ページのタイトルを非表示にする方法も解説しています。

Twenty twelve 投稿ページには各種の一覧ページがありこの表示方法に全文表示と抜粋表示があります。その中で検索ページは抜粋表示ですがそれ以外は総て全文表示になっています。このドキュメントは一覧表示の物は総て抜粋表示にする方法が記載されています。

ヘッダーはWEBサイトの顔になりますがTwenty Twelveのヘッダーは貧弱です。ヘッダーはタイトル、説明及びメニューから構成されており、このドキュメントはこれらをカスタマイズする方法が記載されています。

このドキュメントはウィジェットエリアの考え方とCSSを編集して少し見栄えの良いウィジェットエリアする方法を解説しています。

一般のテキストボックスを使ってPHP/HTMLソースを記述するとhttp画面で正しく表示されない問題が発生します。
このドキュメントはTinyMCE Advancedに整形済みテキスト(preformatted text)を使ったボックスを作成する方法を紹介しています。

このドキュメントはsingle.phpとcontent.phpをカスタマイズし、投稿ページの<前の記事><次の記事>のリンクを削除。メタ情報はカテゴリと投稿日を削除し編集のみとし、最後に記事タイトルの前に更新日をいれ、記事タイトルを装飾した事例です。

Twenty Twelve のフッターには『Proudly powered by WordPress』という文字が出力されます。これを通常サイトの様に『Copyright表現』に変更する方法を記載しています。

本ドキュメントではBreadcrumb NavXTのインストールからそれを表示させる為のheader.php及びCSSの編集方法と表示されたパンくずリストをビジュアルアイコンを使ってよりビジュアルにする方法を説明しています。

アイコンも文字を使ったWEBサイトをよく目にしますが、WPのビジュアルエディタで使えるプラグインが『WordPress Visual Icon Fonts』です。このドキュメントには、インストールの仕方と簡単な使い方を紹介しています。

このドキュメントはTinyMCEのビジュアルエディタとhttp画面を一致させる設定や、見出しや段落等のテキストエリア要素の設定、テキストボックスの新設方法、及び表がビジュアルエディタで利用できる設定等TinyMCEの使いこなす為のテクニックを紹介しています。

このドキュメントはCSSのカスタマイズ編です。内容はTwenty Twelveの画面構成解説、子テーマの作り方、CSSを編集する際の注意点、具体的なCSSカスタマイズ事例。事例はスマートデバイスにも対応させる為に%指定をしています。

本投稿はTwenty Twelveの投稿のカテゴリ設定や文書の作成について事例と注意点を記載しています。

WordPressをインストールする時に、ログインユーザ名を指定しますが、デフォルトのままではブログの表示名も上記ログインユーザ名が使われます。これを変更する方法を解説しています。

WordPressをインストールして、WPのテーマを『Twenty Twelve』決めた次に悩んだのは、ダッシュボードにある『設定』をどの様に設定したら良いか?です。本ドキュメントではこのWEBサイトの設定をどの様にしたのか?を解説しています。

本サイトのWordPressのテーマは、Twenty Twelveで構築しました。本ドキュメントでは何故、このテーマを選択したのか?の背景と設定方法を解説しています。

SynologyのWordpressパッケージをインストールする方法を解説しています。

画像を取り込むツールとしてOnePerss Image Elevator、サムネールの再構築にRegenerate Thumbnailsを利用しています。このドキュメントは画像に関するツールと管理方法について解説しています。

SynologyのNASに日本語版WordPressをインストールするやり方を解説しています。複数のWordPressも同一手法で稼動させることができます。