2016-12-17

エックスサーバーのファイルマネージャー(WebFTP)またはFFFTPでテーマ内の画像の更新♪

  • このエントリーをはてなブックマークに追加

エックスサーバーで、WordPressを使ってますか?

エックスサーバーはWordPressを快適に利用できるコスパの高いレンタルサーバーです。

WordPressでWebサイトやブログを作る際、見た目のビジュアルを変更する為に、WordPressのテーマデザインを編集する時があります。

カスタムヘッダー、カスタム背景、カスタムロゴ、ウィジェットなど、予めWordPress管理画面から変更できる機能を備えた(有料&無料)テーマがありますが、これらの機能の無いテーマやオリジナルのテーマもあります。

オリジナルのテーマでは、テーマ作者の作り方により、テーマ内で使われている画像を保管している場所などに違いがあります。
※基本的には、サーバー内のテーマフォルダ内に画像保管フォルダがあるはずです。

テーマ内で使われている画像のアップロードは、投稿の際の「メディアを追加」とは違うので念頭にいれておきましょう。

トップページの画像、サイドバーの画像、バナー画像など、ウィジェットを使わない箇所の画像を変更する場合は、作成した画像を直接、サーバー内の任意の画像保管フォルダにアップする必要があります。

ftp04

上記画像の赤線は、「logo_web.jpg」という画像が、テーマ内の「img」フォルダ内にあるという事を示しています。

<img src="<?php echo get_template_directory_uri(); ?>/img/logo_web.jpg" alt="画像名" />

この「画像を表示するHTMLタグ(ソース)」の形式を覚えていれば、画像の更新や追加は簡単です♪

ftp05

テーマ内の画像の変更や追加は、投稿のメディアを追加から画像をアップロードする方法と同じではありません。

サイドメニューの”メディア”のライブラリをクリックし画像を選び、”メディアを編集”画面を開くと、右側に画像のソース(ファイルのURL)が表示されています。
上記画像の赤枠。

赤枠のソース(ファイルのURL)をテーマ内の<img src=”ファイルのURLをここに貼り付け” />タグに挿入したり書き換えたりして、表示する画像を変更・追加できます。

上記の方法で十分、画像の更新や追加はできるのですが、テーマを編集するのは初心者の方にしたらリスクがあります。
間違ってしまったら元に戻せない…とか。

そこで、FTPソフトを覚えればテーマ編集をしなくても気軽に画像の更新ができるよって話

FTPソフトは、パソコン内のデータとサーバー内のデータをやりとりするソフトで、エックスサーバーにも独自に「ファイルマネージャー(WebFTP)」が用意されていて、サーバーパネルやエックスサーバーのログイン画面からファイルマネージャーへ接続できます。

マルチドメインで複数サイトを運営している方は、FTPアカウント追加もできて、個々のサイトのサーバーをすぐ呼び出す事もできます。
違うサイトに画像をアップロードし間違えたって事も少なくなります。

スポンサーリンク

当記事では、エックスサーバー標準装備の「ファイルマネージャー(WebFTP)」と、人気のFTPソフト「FFFTP」にFTPアカウントを設定する方法・使い方を綴ります。
実際に画像の更新をするので、読みながら実施されて下さい。

初期FTPアカウントの内容確認とFTPアカウント追加方法

サーバへの接続は、エックスサーバーに標準で備わっている「ファイルマネージャー(WebFTP)」と人気のFTPソフト「FFFTP」を使って画像をサーバーにアップロードして更新する方法があります。
FTPソフトを使えば、直接登録したドメインのWebサイトへ直接接続できるので便利です。FTPソフトを使う為のFTPアカウント追加方法は下記ページで解説しています。
エックスサーバーのFTPアカウントの追加方法|複数サイト管理・更新に便利♪

エックスサーバーのファイルマネージャー(WebFTP)の使い方

ファイルマネージャー(WebFTP)へログイン

ftp01

ファイルマネージャーへのログインは、FTPアカウント一覧のログインから表示する事もできますし、エックスサーバーのログイン画面からも表示する事ができます。
ログイン ファイルマネージャ

ユーザーIDは、FTPアカウント。
パスワードは、FTPアカウントパスワードを利用。

Webサイトの階層を把握しよう

ftp08

ファイルマネージャーが開かれたら上記画像のようなページが開きます。
指定したドメインのトップの階層(ディレクトリ)で、WordPressに関するファイルが格納されています。

ファイルやフォルダの左側のチェックをし、右側の”ファイルの操作”の編集ファイルの削除ファイル名の変更パーミッション変更をクリックすれば、それぞれの機能が実行されます。

ロゴ画像を変えてみよう♪

さて、ファイルマネージャー(WebFTP)を使って、画像を変更してみましょう。
参考までにとあるサイトのロゴを変更してみます。

予め新しいロゴを作成してください。
ファイル名は既にロゴ画像で使われている同じファイル名にしましょう(例として「logo_web.jpg」)

画像が保管されているフォルダへ移動します。
「wp-content」⇒「themes」⇒「利用中のテーマ名」の順で、テーマのフォルダを開きます。

ftp09

テーマ内のフォルダ&ファイル構成は制作者それぞれですが、例では画像が保管されているフォルダは「img」と「img_cat」フォルダです。

ロゴ画像は、「img」フォルダに入っているので「img」フォルダをクリックします。

ftp10

「img」フォルダの中に”logo_web.jpg”ファイルがある事が確認できます。

既存のロゴ画像を新しく変えるには、同じファイル名のロゴ画像を同階層にアップロードします。
右側の新しく作成した同じファイル名のロゴ画像を選択し、アップロードをすれば更新されます。

以上が画像の更新方法です。アップロードする場所の画面さえしかり表示できれば簡単だと思います。
同じファイル名がポイントです。上書きされるので♪

注意事項

ファイルやフォルダの名前に日本語などの全角文字を使うと削除できなくなったり、読み込みがされない時があるので、できる限り半角英数字に変更しましょう。

ファイルマネージャーでは、画像のアップロードなど簡単な作業もできる上、利用中のテーマのフォルダからテーマファイルを選ぶと、直接編集もできてしまいます。しかし、WordPress初心者はやめておきましょうw

FFFTPでエックスサーバーに繋げよう

FFFTPは歴史も長く人気のFTPソフトです。
FFFTPを使う事で、ファイルのアップロードやバックアップを簡単にする事ができます。

FFFTPのダウンロード&インストール

ftp11

Windowsですが下記からFFFTPをダウンロードして下さい。
https://sourceforge.jp/projects/ffftp/
ダウンロードしたらインストールしてください。
インストールが完了したらWindowsのデスクトップに「FFFTP」のアイコンが表示されます。

エックスサーバーのFTPアカウントをFFFTPに登録♪

ftp_used01

FFFTPを起動すると上記の画面のようにFFFTPが表示されます。
サーバーに接続する”登録サイトリスト”と”各種ボタン”。

左側がパソコン内の任意のディレクトリ、右側にはサーバー側のディレクトリが表示されます。
※ディレクトリ=ファイル置き場

FFFTPにFTPアカウントを追加するにはまず、サイトを登録する為に「新規ホスト」ボタンをクリックしてください。

ftp_used02

”ホストの設定”画面が表示されます。
下記4つをエックスサーバー申し込み後に送られてきた”サーバアカウント設定完了メール”に記載されているFTP情報を元に入力してください。”FTPアカウントの追加”でFTPアカウントを追加した場合は、”ユーザー名”と”パスワード”を設定した情報で入力しましょう。ホスト名はサーバーIDと同じです。

・ ホストの設定名:サイト名を入力(サイトとわかりやすいように)
・ ホスト名:サーバーIDと同じです(********.xsrv.jp)
・ ユーザー名:サーバアカウント設定完了メールに記載されている情報またはFTPアカウント追加で追加したアカウント(@以降も含む)
・ パスワード:サーバアカウント設定完了メールに記載されている情報またはFTPアカウント追加で追加したアカウント

”サーバーアカウント設定完了メール”のサーバーアカウント情報を参照に。
ftp12

全て入力したら「最後にアクセスしたフォルダを次回の初期フォルダにする」にチェックを入れて、「OK」ボタンをクリックします。

サイトが登録されたので、接続をクリックします。

ftp_used03

「接続」ボタンをクリックすると、サーバーに接続します。

▼初期FTPアカウントでWordPressテーマフォルダを開く場合
右側(サーバー側):「ドメイン」⇒「public_html」⇒「wp-content」⇒「themes」⇒「テーマフォルダ」の順でクリックしてください。

▼追加FTPアカウントでWordPressテーマフォルダを開く場合
右側(サーバー側):「wp-content」⇒「themes」⇒「テーマフォルダ」の順でクリックしてください。

テーマフォルダが開きます(丁度、上記画像)。

テーマフォルダには、WordPress本体を動かすファイルや画像、JAVAスクリプトやCSSなどを格納するフォルダなどがあります。
※制作者によって違いがあります。

サーバー内のデータをパソコン内に移す事を”ダウンロード”。
パソコン内のデータをサーバー内に移す事を”アップロード”と言います。

ファイルやフォルダを個別または複数選択で、それぞれ”ダウンロード”や”アップロード”が可能です。

テーマを一括ダウンロードする方法

ftp_used04

FTPを使えば、テーマファイルのバックアップもできます。
サーバー内のテーマを選択し、FFFTPのダウンロード(Ctrl+D)をクリックするとダウンロードが実行されます。

WordPressの管理画面の”テーマの編集”でテーマに何か手を加えたらバックアップを取っておくのも良いでしょう。

ロゴを変えてみよう♪

ftp_used05

エックスサーバーのファイルマネージャー(WebFTP)でも紹介した内容とやる事は同じなのですが、右側サーバー内のロゴ画像は、テーマフォルダの「img」フォルダに入っているので「img」フォルダをクリックします。

更新する画像がサーバー内のどのフォルダに入っているか、固定ページやテーマ編集ページにて画像呼び出しソースを確認しましょう!

画像の呼び出し場所=画像フォルダを見つけたら、FFFTPの右側サーバー側も左側パソコン側の表示も同じディレクトリを表示させましょう。

既存のロゴ画像を新しく変えるには、同じファイル名のロゴ画像をパソコン側からサーバー側へアップロードするだけです(上書きされます)。

FTPでサーバーに接続し、画像が置いてあるフォルダへ移動さえできれば、画像の更新は簡単で速いです♪

いつもの如く長々と解説してきましたが(かなり丁寧だと思う…)、素直に書かれている事を実行すれば、目的は叶うと思います。

エックスサーバーについては下記で解説しています♪
エックスサーバー|無料でドメイン1つ貰えてWordPressが使えるレンタルサーバー
エックスサーバーでWordPressをインストールする方法

wpXレンタルサーバーについては下記で解説しています♪
wpXというWordPress専用レンタルサーバーに移転したよ

ファイルマネージャー(WebFTP)を使うか、FFFTPを使うかはあなた次第。
是非、トライしてみてください。

人気記事もチェック!

webmobile 著者紹介

著者はフリーランスwebデザイナーとして活動をはじめて13年。
webをはじめスマホやガジェットが大好き♪
妻、子、プードル2匹と暮らしてます。
運営者情報

気になる記事を検索

トップページへ戻る