サーバーのファイルを編集!FTPソフト(FFFTP)&便利なテキストエディタ(Atom)の使い方と編集したいファイルの見つけ方

2019年6月4日WordPressの設定&カスタマイズの基礎知識

WordPressをカスタマイズしようとしたときに.htaccessを編集しましょうとか、テーマファイルを直接編集しましょうとか、〇〇〇.phpを作りましょうといった方法が出てくると

どこで編集するの!?

と困ってしまう初心者の方もいるはず。

FTPソフトを使ってWordPressのファイルに直接アクセスし、書き換えてアップロードする必要があります。

初心者にとってはそこまでしなくてもいい!と思うかもしれませんが、一回覚えてしまえば特に難しい作業ではありません。

カンタンな作業だけど、エラーが起きると大変な代わりに上手く使えばとっても便利です。

ファイルの編集&アップロード-FFFTP-Atom

FTPソフトの使い方とおすすめのFTPソフト

WordPressのウェブサイトは、サーバーに置いてある複数のフォルダーとファイルから成り立っています。

複数のファイルが組み合わさってサイトが構成されていて、WordPressのダッシュボードを使えば自動的にファイルの中に編集者が書き込んだデータ(データベースMySQLに入っている)が表示したいページに呼び出されるようになっています。

FTPソフトを使って直接編集する
サーバーに置いてあるファイル=枠組みとデータを組み込むための指示書

WordPressのダッシュボードで編集できる
データベースMySQLに保存されているデータ=コンテンツの中身(ページの本文、カテゴリーやタグなど)

サーバーにあるWordPressのファイルには、データの呼び出し方を決めるものや、ページに何を表示するかを決めるもの、CSSやフォントなどが保存されているものがあります。

データをページ内で呼びだすとき、何をどこに呼び出して表示するかを決めているのがテンプレート内にあるテーマファイルです。

FTPソフトとは?

FTPクライアントとも呼ばれ、F(fife-ファイル)T(transfer-転送)P(protocol)手段・方法の決まり事の略です。
サーバーに置いてあるファイルに直接アクセスするためのソフトです。
サーバーにあるファイルは公開されているウェブサイトを表示するために使われるため、サーバーにアップロードする=公開されます。

コンテンツを表示する仕組みそのもののファイルをダウンロードし、編集してからアップロードすることでサイトを編集することができます。

WordPressそのものにアクセスすることになるため、間違えるとサイトそのものが崩れたり表示されなくなったりしてしまうので、ダッシュボードからはアクセスできないようになっています。

おすすめのFTPソフトをダウンロードして使ってみる

「FFFTP」定番FTPクライアントソフト―窓の杜

こちらからFFFTPというFTPソフトをダウンロードします。

有名なフリーソフトなので、使い方の説明記事がたくさんあります!

FFFTP インストール (使い方)

ソフトが開けたら、メニューのタブの接続から接続を選び、出てきたボックスの新規ホストを選択します。

FFFTPでサーバーに接続

ホストの設定名には自分が好きなわかりやすい名前をつけ、ホスト名(アドレス)ユーザー名パスワード/パスフレーズには、使っているサーバーの情報を入力します。

Xサーバーでは、レンタルしたときに送られてくるメール【Xserver】■重要■ サーバーアカウント設定完了のお知らせ[試用期間]に情報が書いてあります。

■FTP情報
 ——————————————————–
 FTPホスト名(FTPサーバー名)  : sX0000.xserver.jp
 FTPユーザー名(FTPアカウント名): XXXXXX
 FTPパスワード          : XXXXXXXXXXX
 ——————————————————–

こちらの情報をFFFTPの設定画面に入力したら、接続をおすとサーバーに接続されます。

FFFTPの画面左側のカラムが自分のPCのファイル、画面右側がサーバーに置いてあるファイルです。

FFFTPの使い方

PC内やサーバー内でドラッグ&ドロップでファイルを移動、PCとサーバー間でドラッグ&ドロップするとファイルをコピーします。

サーバーにあるファイルを編集するときは、ファイルを選んだら、PC内のフォルダーに入れて編集し、サーバーにコピーして上書きします。

それぞれのフォルダーをダブルクリックするとファルダ―が開かれ、ファイルをダブルクリックするとファイルがテキストエディタで開かれます。

フォルダーをダブルクリックして中身へ、上のフォルダーに戻るときは青色で囲まれたところにあるボタンで戻れます。

必要なファイルを見つけたらドラッグ&ドロップでファイルを移動して編集して上書きするのが基本の操作です。

これだけ覚えておけば細かい他の操作はわからなくても問題ありません!

便利なテキストエディターAtomをインストール&ファイルを編集する

FFFTPのデフォルトではファイルはメモ帳で開かれるようになっていますが、WordPressのファイルをメモ帳で編集するのは非推奨です。

HTML・CSS・PHP・javascriptなどをハイライト(見やすいように色分け)してくれ、検索置換や操作の取り消しなどの機能が豊富で使いやすいテキストエディターをダウンロードして使いましょう。

Atom

DownloadからAtomをダウンロードします。

Atomも非常に有名なソフトなので、操作に困ったら検索すればすぐに解決策や解説記事が見つかります。

Atom 使い方

ダウンロードしたら日本語化を行います。

Atomの日本語化の方法

Atomが開けたら、メニューバーの一番左にあるfileをクリックし、Settingsを開きます。

Settingタブが開いたら+Installを選択し、入力欄にJapanese-menuと入力し、出てきたらインストールします。

Atomで折り返し設定をする方法

デフォルトだと文が折り返さずに表示され、すべて見るには左右にスクロールしなければなりません。

特にコードなどでは全体の構造を見られる方がわかりやすいため、見えている範囲で文が折り返されるように設定しておきます。

ファイル環境設定を開き、<>エディタ設定を開きます。

ソフトラップにチェックを入れたら完了です。

Atomの使い方と注意

ファイルから編集したいファイルを開いたり、フォルダーを開いておいたり、保存することができます。

編集から取りけすやり直すなどの動作ができます。

検索から検索や置換ができます。

これだけの動作ができればOKです。

一般的なショートカットも使えます。

FFFTPなどでファイルをダブルクリックしたときにAtomで起動するように設定しておくと、その都度新しいウィンドウでAtomが開くため、混乱しないようにしましょう。

そのまま上書き保存しておくのではなく、FFFTPで転送するときにわかりやすい所にフォルダーを作成しておき、Atomで編集したファイルはすべそのフォルダーに保存するようにすると、ファイルが簡単に見つけられていちいち混乱せずに済みます。

WordPressの編集したいファイルを見つける方法

サーバーに接続したら、編集したいサイトのドメイン名がついたフォルダーを開きます。

WordPressのフォルダーは、Public_htmlに入っています。

WordPressをインストールしたディレクトリ直下とは、このPublic_htmlの中、開いた場所のことです。

よくカスタマイズで編集するファイルとしては、.htaccessなどが置いてあります。

そこでwp-contentのフォルダーを開くと、プラグインのファイルが入っているpluginsやテーマのファイルが入っているthemesがあります。

編集したいファイルが見つからなかったときは、その都度検索しましょう

wordpress header.php 場所

テーマファイルを編集するときは、子テーマのフォルダーに保存する

header.phpfunctions.phpなどのテーマファイルを編集するときは、themesの中にある親テーマLightningを開いて編集したいファイルを見つけ、編集したら子テーマlightning_child_sampleの中に保存します。

themesに入っているファイル以外では、元あった場所に上書きします。

元のファイルが親テーマに残るので、何か間違えてしまったら親テーマのファイルをダウンロードしてやり直せます。

間違って親テーマのファイルを上書きしてしまった場合は、こちらのサイトから元のファイルを見つけることができます。

Atomを使っていれば、取り消す操作を繰り返すことで元に戻せるので、多少のミスがあっても大丈夫です。

サーバーのファイルを編集できればサイトの幅が広がる!

単純に情報を表示するためのサイトはWordPressとテーマで十分につくれますが、検索機能を充実させたり、様々な投稿タイプで記事以外のコンテンツを管理したり、予約システムなどを作るうえではサーバーにアクセスすることが必要です。

また、WordPressの動作が思い通りにいかないときや、設定を変えたいときに簡単に変えることができるようになります。

ぜひ機能が充実したオリジナルのサイトをつくるためにチャレンジしてみましょう!