サーバーのファイルを編集！FTPソフト(FFFTP)＆便利なテキストエディタ(Atom)の使い方と編集したいファイルの見つけ方
WordPressをカスタマイズしようとしたときに.htaccessを編集しましょうとか、テーマファイルを直接編集しましょうとか、〇〇〇.phpを作りましょうといった方法が出てくると
どこで編集するの！？
と困ってしまう初心者の方もいるはず。
FTPソフトを使ってWordPressのファイルに直接アクセスし、書き換えてアップロードする必要があります。
初心者にとってはそこまでしなくてもいい！と思うかもしれませんが、一回覚えてしまえば特に難しい作業ではありません。
カンタンな作業だけど、エラーが起きると大変な代わりに上手く使えばとっても便利です。
FTPソフトの使い方とおすすめのFTPソフト
WordPressのウェブサイトは、サーバーに置いてある複数のフォルダーとファイルから成り立っています。
複数のファイルが組み合わさってサイトが構成されていて、WordPressのダッシュボードを使えば自動的にファイルの中に編集者が書き込んだデータ(データベースMySQLに入っている)が表示したいページに呼び出されるようになっています。
FTPソフトを使って直接編集する
サーバーに置いてあるファイル＝枠組みとデータを組み込むための指示書
WordPressのダッシュボードで編集できる
データベースMySQLに保存されているデータ＝コンテンツの中身(ページの本文、カテゴリーやタグなど)
サーバーにあるWordPressのファイルには、データの呼び出し方を決めるものや、ページに何を表示するかを決めるもの、CSSやフォントなどが保存されているものがあります。
データをページ内で呼びだすとき、何をどこに呼び出して表示するかを決めているのがテンプレート内にあるテーマファイルです。
FTPクライアントとも呼ばれ、F(fife-ファイル)T(transfer-転送)P(protocol)手段・方法の決まり事の略です。
サーバーに置いてあるファイルに直接アクセスするためのソフトです。
サーバーにあるファイルは公開されているウェブサイトを表示するために使われるため、サーバーにアップロードする＝公開されます。
コンテンツを表示する仕組みそのもののファイルをダウンロードし、編集してからアップロードすることでサイトを編集することができます。
WordPressそのものにアクセスすることになるため、間違えるとサイトそのものが崩れたり表示されなくなったりしてしまうので、ダッシュボードからはアクセスできないようになっています。
おすすめのFTPソフトをダウンロードして使ってみる
こちらからFFFTPというFTPソフトをダウンロードします。
有名なフリーソフトなので、使い方の説明記事がたくさんあります！
ソフトが開けたら、メニューのタブのからを選び、出てきたボックスのを選択します。
ホストの設定名には自分が好きなわかりやすい名前をつけ、ホスト名(アドレス)、ユーザー名、パスワード／パスフレーズには、使っているサーバーの情報を入力します。
Xサーバーでは、レンタルしたときに送られてくるメール【Xserver】■重要■ サーバーアカウント設定完了のお知らせ[試用期間]に情報が書いてあります。
■FTP情報
——————————————————–
FTPホスト名（FTPサーバー名） ： sX0000.xserver.jp
FTPユーザー名（FTPアカウント名）： XXXXXX
FTPパスワード ： XXXXXXXXXXX
——————————————————–
こちらの情報をFFFTPの設定画面に入力したら、をおすとサーバーに接続されます。
FFFTPの画面左側のカラムが自分のPCのファイル、画面右側がサーバーに置いてあるファイルです。
PC内やサーバー内でドラッグ＆ドロップでファイルを移動、PCとサーバー間でドラッグ＆ドロップするとファイルをコピーします。
サーバーにあるファイルを編集するときは、ファイルを選んだら、PC内のフォルダーに入れて編集し、サーバーにコピーして上書きします。
それぞれのフォルダーをダブルクリックするとファルダ―が開かれ、ファイルをダブルクリックするとファイルがテキストエディタで開かれます。
フォルダーをダブルクリックして中身へ、上のフォルダーに戻るときは青色で囲まれたところにあるボタンで戻れます。
必要なファイルを見つけたらドラッグ＆ドロップでファイルを移動して編集して上書きするのが基本の操作です。
これだけ覚えておけば細かい他の操作はわからなくても問題ありません！
便利なテキストエディターAtomをインストール＆ファイルを編集する
FFFTPのデフォルトではファイルはメモ帳で開かれるようになっていますが、WordPressのファイルをメモ帳で編集するのは非推奨です。
HTML・CSS・PHP・javascriptなどをハイライト(見やすいように色分け)してくれ、検索置換や操作の取り消しなどの機能が豊富で使いやすいテキストエディターをダウンロードして使いましょう。
からAtomをダウンロードします。Atomも非常に有名なソフトなので、操作に困ったら検索すればすぐに解決策や解説記事が見つかります。
ダウンロードしたら日本語化を行います。
Atomの日本語化の方法
Atomが開けたら、メニューバーの一番左にあるをクリックし、を開きます。
Settingタブが開いたらを選択し、入力欄にJapanese-menuと入力し、出てきたらインストールします。
Atomで折り返し設定をする方法
デフォルトだと文が折り返さずに表示され、すべて見るには左右にスクロールしなければなりません。
特にコードなどでは全体の構造を見られる方がわかりやすいため、見えている範囲で文が折り返されるように設定しておきます。
のを開き、を開きます。ソフトラップにチェックを入れたら完了です。Atomの使い方と注意
から編集したいファイルを開いたり、フォルダーを開いておいたり、保存することができます。から、などの動作ができます。から検索や置換ができます。これだけの動作ができればOKです。
一般的なショートカットも使えます。
FFFTPなどでファイルをダブルクリックしたときにAtomで起動するように設定しておくと、その都度新しいウィンドウでAtomが開くため、混乱しないようにしましょう。
そのまま上書き保存しておくのではなく、FFFTPで転送するときにわかりやすい所にフォルダーを作成しておき、Atomで編集したファイルはすべそのフォルダーに保存するようにすると、ファイルが簡単に見つけられていちいち混乱せずに済みます。
WordPressの編集したいファイルを見つける方法
サーバーに接続したら、編集したいサイトのドメイン名がついたフォルダーを開きます。
WordPressのフォルダーは、Public_htmlに入っています。
WordPressをインストールしたディレクトリ直下とは、このPublic_htmlの中、開いた場所のことです。
よくカスタマイズで編集するファイルとしては、.htaccessなどが置いてあります。
そこでwp-contentのフォルダーを開くと、プラグインのファイルが入っているpluginsやテーマのファイルが入っているthemesがあります。
編集したいファイルが見つからなかったときは、その都度検索しましょう
テーマファイルを編集するときは、子テーマのフォルダーに保存する
header.phpやfunctions.phpなどのテーマファイルを編集するときは、themesの中にある親テーマLightningを開いて編集したいファイルを見つけ、編集したら子テーマlightning_child_sampleの中に保存します。※themesに入っているファイル以外では、元あった場所に上書きします。
元のファイルが親テーマに残るので、何か間違えてしまったら親テーマのファイルをダウンロードしてやり直せます。
間違って親テーマのファイルを上書きしてしまった場合は、こちらのサイトから元のファイルを見つけることができます。
Atomを使っていれば、取り消す操作を繰り返すことで元に戻せるので、多少のミスがあっても大丈夫です。
サーバーのファイルを編集できればサイトの幅が広がる！
単純に情報を表示するためのサイトはWordPressとテーマで十分につくれますが、検索機能を充実させたり、様々な投稿タイプで記事以外のコンテンツを管理したり、予約システムなどを作るうえではサーバーにアクセスすることが必要です。
また、WordPressの動作が思い通りにいかないときや、設定を変えたいときに簡単に変えることができるようになります。
ぜひ機能が充実したオリジナルのサイトをつくるためにチャレンジしてみましょう！
さやに相談してみる
自分では解決しない…けど専門業者に頼むのはちょっと…
自分で進めたいけどサポートが欲しい！というとき
お気軽にご相談ください！
記事内容のカスタマイズ代行、さらにご希望に合わせたカスタマイズ、ご希望の機能やデザインの制作、コンテンツ作成のお手伝いまでウェブ制作全般にご対応！
ご利用ガイド