WordPress

WordPressへサーバーでアクセスしたときのファイル構成

ここではエックスサーバーで契約中のサーバーへアクセスしたときにWordPressがどのようなファイル構造になっているのかについてお話させていただきます。

WordPressは管理画面から簡単にホームページが作成できる便利なプラットフォームなのですが、function.phpファイルを編集するときや、テーマには存在しないページテンプレートを作成するときなどは直接サーバーにアクセスする必要があります。今までサーバーにアクセスしたことがないと、どのファイルがどうなっているのか分からないと思いますのでファイル構造についてお話させていただきます。

WordPress(エックスサーバー)のファイル構造

エックスサーバーのファイルは下記のような構造になっています。

※重要なファイルのみピックアップしています。

  • ドメイン名
    • public_html
      • wp-admin
      • wp-content
        • languages
        • plugins
        • themes
        • upgrade
        • uploads
        • index.php
      • wp-includes
      • .htaccess

 

これからWordPressを扱う上でに重要なフォルダやファイルについて説明させていただきます。

public_html
このフォルダがエックスサーバーのルートディレクトリになります。このフォルダにアップしたファイルがホームページ上に公開されます。
wp-content
みなさんが一番アクセスすることになるフォルダです。この中にWordPressのコンテンツが入っています。ただし、記事やカテゴリなどに関する情報は、データベースといわれる全く別の場所に保管されているのでここの中からは探すことはできません。
plugins
インストールしたプラグインがこの中に格納されています。管理画面上では「プラグイン」>「インストール済みプラプイン」のページです。プラグインフォルダをここにアップロードすると、「インストール済みプラプイン」に表示されるようになります。
themes
インストールされたテーマが格納されています。管理画面上では「外観」>「テーマ」のページです。このフォルダに直接、テーマフォルダをアップロードすることで、テーマをインストールすることができます。子テーマを作りたいときやテーマ内にあるテンプレートを複製してカスタマイズするときなどはここにアクセスします。
uploads
画像や動画などのメディアが格納されるフォルダです。管理画面上では「メディア」>「ライブラリ」のページです。初期設定では年月のフォルダごとに分けられています。実際に画像ファイルの一覧を見ていただくと分かるのですが、ひとつの画像ファイルに対して複数サイズのファイルが存在することに気がつくと思います。
例えば、「画像名.jpg」という画像ファイルに対して「画像名.jpg-300×200.jpg」「画像名.jpg-840×559.jpg」「画像名.jpg-1688×1125.jpg」といった形でサイズの異なるファイルがあります。これは管理画面の「設定」>「メディア」で指定されたサイズのサムネイル画像が自動で生成されているのと、有効化されているテーマのfunctions.phpで指定されたサイズのサムネイルが自動生成されているためです。

この理由から、サーバー経由で画像をアップロードしてしまうと必要なサムネイル画像が生成されないため、ページ上で正しく画像が表示されない場合がありますので気をつけてください。

.htaccess
「エイチティアクセス」と読みます。ホームページの設定を行う重要なファイルです。サイトへのアクセス制限やURLの転送設定などをしたいときにこのファイルを編集します。編集を間違うとサイトが表示されなくなってしまいますので、編集時は気をつけてください。

 

以上がサーバーでアクセスしたときのWordPressの構造でした。私はサーバーにアクセスするときはFileZillaという無料ソフトを使っています。もしも、まだFTPソフトをインストールしていないという方は、下記もご参照ください。

最近の記事

  1. CSS

    レスポンシブウェブデザインの基本|メディアクリエリの設定
  2. WordPress

    WordPressの立ち上げからサイト構築までの初期手順
  3. CSS

    CSS|中央寄せが効かないときは・・・
  4. CSS

    要素の配置が簡単に決まるFlexboxの使い方
  5. CSS

    擬似クラス「:first-child」「:last-child」はどうして効かな…
PAGE TOP