WordPress Logo WordPress のインストールと初期設定

更新日:2018年11月25日

作成日:2018年6月20日

ローカル環境(XAMPP)へのインストール

WordPress を使うには、PHP が動作する Web サーバーと、MySQL データベースサーバーが必要です。以下は、ローカル環境(XAMPP)でのインストール方法です。

ローカル環境(XAMPP)はすでに構築されていることを前提にしています。

XAMPP のインストールに関しては「XAMPP のインストール方法と基本的な使い方」を参照ください。

MySQLにデータベースを用意

phpMyAdmin(MySQLを管理するソフトウェア)を開き、WordPress 用のデータベースを作成し、以下の情報をメモしておきます。

  • データベース名:これから設定するデータベースの名前
  • データベースユーザー名 :root(デフォルトでインストールした場合)
  • データベースパスワード:なし(非推奨:デフォルトでインストールした場合)
  • データベースホスト名:localhost

XAMPP Control Panel(管理ツール) で MySQL の Admin をクリックします。

WordPress のインストール

phpMyAdmin が開くので、データベースタブをクリックします。

WordPress のインストール

照合順序は、「utf8_general_ci」を選択して、データベース名はわかりやすい任意の英数字を入力します(後から変更はできません)。

WordPress のインストール

「作成」をクリックします。

WordPress のインストール

「データベース xxxx を作成しました。」と表示されたら成功です。

root パスワードの設定

XAMPP の管理画面から Apache の「Admin」をクリックして、Apache の管理ページにアクセスします。

WordPress のインストール

左メニューの「セキュリティ」をクリックします。

WordPress のインストール

セキュリティの状況が表示されます。”そのような問題をすべて修正するには、単純に次のツールを使ってください。=> http://localhost/security/xamppsecurity.php”とあるリンク(青枠)をクリックします。

WordPress のインストール

表示されるページで root のパスワードを設定することができます。また、このページで XAMPP のディレクトリ制御 (.htaccess)を設定することもできます。

WordPress のインストール

WordPress のダウンロード

以下の WordPress 公式ページからパッケージをダウンロードします。

https://ja.wordpress.org/

以下のようなダウンロードのボタンがあるのでクリックして、パッケージ(この例では、wordpress-4.6-ja.zip)をダウンロードします。

WordPress のダウンロード

現時点(2016年9月4日)での推奨環境は以下の通りです。

  • PHP バージョン 5.6 以上
  • MySQL バージョン 5.6 以上 または MariaDB バージョン 10.0 以上

古い PHP や MySQL しか利用できないレガシーな環境でも、PHP 5.2.4 以上、かつ MySQL 5.0 以上であれば WordPress は動作しますが、公式サポートは終了しており、サイトがセキュリティの脆弱性にさらされる危険があります。

ファイルの配置

ダウンロードしたパッケージは圧縮ファイルとなっているので解凍します。以下はデスクトップに解凍した場合の例です。

WordPress のインストール

XAMPP の場合ドキュメントルート(htdocs)の直下、または任意のディレクトリを作成して配置します。

WordPress のインストール

デフォルトではフォルダ名(ディレクトリ名)が "wordpress" となっているので、必要に応じて名前を変更します。

例えば「wp」という名前にして配置する場合、インストール後に WordPress にアクセスするには「http://localhost/wp/」へアクセスします。(WordPress をどのような URL で公開するかを考えてディレクトリ名を決る必要があります。)

WordPress のファイル

WordPress のファイル
ファイル/ディレクトリ 説明
wp-admin 管理画面に関するファイルを格納するディレクトリ
wp-content テーマやプラグインなどに関するファイルを格納するディレクトリ
wp-includes WordPress システム全般に関するファイルを格納するディレクトリ
.htaccess WordPress インストール後に生成される .htaccess ファイル
index.php サイトにアクセスがあった場合に、最初に読み込まれるファイル(インデックスファイル)
license.txt ライセンスに関するテキストファイル(サーバーにアップロードする必要なし)
readme.html WordPress のインストールや基本的な情報を記載したファイル(サーバーにアップロードする必要なし)
wp-activate.php ユーザーアカウントに関するファイル
wp-blog-header.php WordPress 環境に関連するファイルをロードするファイル
wp-comments-post.php コメント投稿に関するファイル
wp-config-sample.php インストール時にこのファイルを元に設定ファイルを作成することができるサンプルファイル。インストール後は wp-config.php という設定ファイルが生成される
wp-cron.php 擬似 cron ジョブ(ある種のスケジューリング機能)を担うファイル
wp-links-opml.php リンクの XML 出力に関するファイル
wp-load.php WordPress の動作や起動に関連するファイルをロードするファイル
wp-login.php 管理画面のログインに関するファイル
wp-mail.php メールによるブログ投稿用ファイル
wp-settings.php WordPress の基本設定に関するファイル
wp-signup.php ブログ名やユーザー名などの設定に関するファイル
wp-trackback.php トラックバックと Ping 送信用ファイル
xmlrpc.php XML-RPC 通信に関するファイル

WordPress のインストール

ブラウザで、配置した WordPress (デフォルトのままの場合は http://localhost/wordpress/ この例では http://localhost/wp/)へアクセスします(URL は配置した WordPress のディレクトリ名に合わせて変更して下さい)。

以下の画面が表示されたら「さあ、始めましょう!」をクリックします。

WordPress のインストール

データベースの作成でメモした情報を入力して「送信」をクリックします。「テーブル接頭辞」はデフォルトのままで OK です。

  • データベース名:設定したデータベースの名前
  • ユーザー名 :root(デフォルトでインストールした場合)
  • パスワード:なし(非推奨:デフォルトでインストールした場合)
  • データベースホスト名:localhost

WordPress のインストール

テーブル接頭辞

  • WordPressの初期インストール時の設定にある「テーブル接頭辞」はデータベースのテーブル名の名称の頭につく識別子
  • 1つのWordPressサイトに対して必ず1つの接頭辞が設定され、初期値は"wp_"となる
  • テーブル接頭辞の設定は、同じデータベースに複数のWordPressをインストールする場合に用いられる
  • (同じデータベースに、WordPressを追加する場合は wp2_ などとしてテーブルを区別する)
  • レンタルサーバーでデータベースを1つしか持てない場合などに使用する
  • データベースを複数持てる場合は、接頭辞設定を使わず、データベースを分けたほうがよい
  • マルチサイト機能では、この接頭辞の設定を内部的にうまく使って複数のWordPressサイトを1つのデータベースで管理する場合もある

以下の画面が表示されたら「インストール実行」をクリックします。

WordPress のインストール

以下の画面が表示されるので、作成するサイトのタイトルとなる「サイトのタイトル」、管理画面にログインする時に使用する「ユーザー名」「パスワード」と「メールアドレス」を入力します。

ユーザー名は一般的に使われている「admin」を使用するとセキュリティ的に大きな問題があるので必ず「admin」以外の名前を設定します。

また検索エンジンで検索されたくない場合は「検索エンジンがサイトをインデックスしないようにする。」の左側にあるチェックボックスにチェックをします。

「検索エンジンがサイトをインデックスしないようにする。」にチェックを入れると、生成される HTML の head 内に <meta name='robots' content='noindex,follow' /> が挿入されます。この指定は後から「表示設定」で変更可能です。
(参考:noindex,follow

「WordPress をインストール」をクリックします。

WordPress のインストール

問題なくインストールされると、以下のような画面が表示されるので「ログイン」をクリックします。

WordPress のインストール

以下のような画面が表示されるのでユーザー名とパスワードを入力して「ログイン」をクリックします。

WordPress のインストール

以下のような管理画面が表示されます。

WordPress のインストール

上部にあるナビゲーションの「サイト名(サイトのタイトル)」 にマウスを置き、「サイトを表示」をクリックしてます。

WordPress のインストール

以下のようなサイトが表示されたらインストール完了です。

WordPress のインストール

管理画面と初期設定

WordPress のインストールが完了したら、作成するサイトの設定を行います。

管理画面の基本操作

管理画面にログインすると「ダッシュボード」が表示されます。WordPress の管理画面は、「メインナビゲーションメニュー」、「管理バー」と画面中央の「ワークエリア」から構成されています。

WordPress の管理画面

  • メインナビゲーションメニュー:各機能のページへのナビゲーションメニュー。メニュー項目をクリックするとワークエリアが切り替わります。
  • 管理バー:主要機能へのリンク。表示されているページの内容に合わせて、リンクの項目が変更されます。
  • ワークエリア:作業する際のエリア。
管理バー

管理バーには更新情報やサイトを表示させるリンク等が表示されています。

左端の WordPress のアイコンをクリックすると、以下の項目が表示されます。

WordPress の管理画面の管理バー

ホーム()のアイコンをクリックすると、サイトを表示するリンクが表示されます。

WordPress の管理画面の管理バー(祭と表示のリンク)

プラグイン等の更新があれば、数字が表示されます。クリックすると更新画面に移動します。

WordPress の管理画面の管理バー(更新の通知)

「+新規」をクリックすると、投稿などの新規作成画面へのリンクが表示されます。

WordPress の管理画面の管理バー(新規作成リンク)

サイトの基本情報の設定

サイトの基本情報の設定を行うには、メインナビゲーションメニューの「設定」をクリックして「一般設定」のページを表示させます。(「設定」→「一般」)

WordPress の管理画面「一般設定」

サイトのタイトル

インストール時に入力したサイト名が表示されます。SEO とも関連してくるので、よく検討して適切なサイト名を入力します。

テンプレートタグ bloginfo('name')で出力する値となります。

キャッチフレーズ

デフォルトでは「Just another WordPress site」と表示されます。ここには、サイトの内容を表す説明(キャッチフレーズ)を入力します。

テンプレートタグ bloginfo('description') で出力する値となります。

メンバーシップ

登録フォームからユーザー登録できるかどうかを設定します。この例では、ユーザー登録をできないようにチェックを外します。

日付のフォーマット/時刻フォーマット

記事の日付や時刻をどのような形式で表示するかを選択します。「日付と時刻の書式の解説」のリンクをクリックすると、フォーマット文字列の使い方が表示されます。

テンプレートタグ(the_date(), the_time())によって自動的に出力されるデフォルトの「日付のフォーマット」「時刻のフォーマット」を指定します。

週の始まり

週の始まりを指定します。

サイトの言語

サイトの言語を指定します。

※設定が完了したら、「変更を保存」をクリックします。

アップロードする画像サイズの設定

WordPress では、画像をアップロードした時に、「サムネイルのサイズ」「中サイズ」「大サイズ」の3つのリサイズした画像を自動生成することができます。

管理画面のメインナビゲーションメニューの「設定」→「メディア」を選択して「メディア設定」画面で設定します。

WordPress の管理画面「メディア設定」

  • 「サムネイルのサイズ」「中サイズ」「大サイズ」の幅と高さは、画像サイズの長辺が指定した大きさになるように縮小されます。
  • サムネイル画像については、「サムネイルを実寸法にトリミングする」にチェックを入れると、設定したサイズに合わせて生成されます。
  • これらのサイズは画像を投稿する際に選択できます。
  • 画像を自動生成したくない場合は、設定する値を全て「0」にします。
  • 3種類以上に画像サイズを書き出したい場合は、functions.php などに記述して書き出すことができます。

プラグインの有効化

WordPress では、機能を拡張するための「プラグイン」と呼ばれるツールを利用することができます。デフォルトでは以下のプラグインがインストールされています。

  • Akismet
  • Hello Dolly
  • WP Multibyte Patch:日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグイン

WordPress の管理画面「プラグイン」

プラグインを使用するには、「有効化」する必要があります。プラグインを有効化するには、プラグイン名の下にある「有効化」をクリックします。日本語の場合「WP Multibyte Patch」を有効化しておきます。

表示設定の確認

トップページやカテゴリーページでは、一覧で記事を表示しますが、その際に表示する記事の件数を決めることができます。メインナビゲーションメニューの「設定」→「表示設定」を選択します。

表示設定の確認

「1ページに表示する最大投稿数」で表示件数を設定することができます。デフォルトでは10件に設定されているので、必要に応じて変更します。

記事の投稿

投稿は WordPress で基本となる Web コンテンツをアップするメイン機能です。

WordPress の記事形式の基本的なものに、「投稿」と「固定ページ」があります。作成するページの内容によって、記事の形式を使い分けます。

投稿と固定ページ

投稿

投稿は記事を時系列にしたがって表示する時に使います。新着記事やブログのコンテンツなど、記事が公開された時間が重視されるコンテンツで使います。以下のような特徴があります。

  • 簡単に時系列で並べられる。
  • 投稿自体に親子関係を付けることはできない。
  • カテゴリーで分類できる。(カテゴリーには親子関係を付けることができる。)
  • タグで分類できる。
  • カスタムタクソノミーを使って分類することもできる。
  • 抜粋が使える。

投稿の分類方法は、カテゴリーとタグの両方が使え、カスタムタクソノミーも使うことができます(カスタムタクソノミーは機能として追加する必要があります)。また、カテゴリーには親子関係を付けることができます。

固定ページ

固定ページは、時系列から独立して管理するコンテンツに使用します。「コンタクト」や「お問い合わせ」のページのように時系列に関係のないコンテンツで使います。以下のような特徴があります。

  • カテゴリーやタグの設定がない。
  • カスタムタクソノミーを使って分類することができる。
  • ページに親子関係を付けることができる。
  • ページごとに違うテンプレートファイルを使うことができる。
  • 固定ページで作ったページは、Webサイトのトップページに指定することができる(「管理画面」→「設定」→「表示設定」の「フロントページの表示」で「固定ページ」を選択 )

固定ページはカテゴリーを設定することができませんが、固定ページ同士で親子関係を設定できるので、ツリー構造を持った Web サイトを作成することができます。

固定ページは、テンプレート階層でもっとも優先順位の高い「ページテンプレート」を、ページごとに設定することができます。

ページテンプレートは、テンプレートファイルに「Template Name:テンプレート名」を記述することで、管理画面の「ページテンプレート選択欄」に追加され、選択することができるようになります。

投稿タイプ

カテゴリーの設定

投稿には、記事の属性を設定するためのカテゴリーを作成することができます。記事を追加する前にカテゴリーを設定しておきます。

メインナビゲーションメニューの「投稿」をクリックすると、投稿の記事の一覧が表示されます。初期状態では、「Hello world!」という記事が既に投稿されています。

また、初期状態では「未分類」というカテゴリーが設定されています。

投稿

メインナビゲーションメニューの「投稿」→「カテゴリー」を選択すると、カテゴリーの編集画面が表示されます。この画面ではカテゴリーの追加や編集が行えます。

投稿のカテゴリー

初期状態では、「未分類」というカテゴリーのみが登録されているので、この「未分類」を変更します。「未分類」をクリックすると、カテゴリーの編集画面が表示されます。

カテゴリー「未分類」の編集

カテゴリーはサイトの内容によって決める必要がありますが、ここでは取り敢えずカテゴリーの名前を「お知らせ」に変更します。また名前と共に「スラッグ」も「news」に変更します。スラッグは URL に表示されるので通常は半角英数字で指定します。変更したら左下の「更新」ボタンをクリックして変更を保存します。ページの上部に「カテゴリーを更新しました。」と表示され、「未分類」の名前が「お知らせ」に、「スラッグ」が「news」に変更されていれば完了です。

カテゴリー「未分類」の編集2

カテゴリーの「未分類」

「未分類」カテゴリーはデフォルトで用意されているカテゴリーで次の特徴があります。

  • 記事を新規に作成した時、カテゴリーを指定しなかった場合は自動的にデフォルトのカテゴリー「未分類(名前は変更可能)」が設定される。
  • このため、WordPressでは記事には必ず1つはカテゴリーが設定される。
  • デフォルトのカテゴリーは削除することができないが、名前などを編集することはできる。

前述の例では「未分類」を「お知らせ」に変更しているので、記事を新規作成した際にカテゴリーを指定しなかった場合、自動的にカテゴリー「お知らせ」が設定されることになります。

カテゴリーの新規追加

カテゴリーの追加は「新規カテゴリーを追加」で行います。

カテゴリーの追加

この例では、「音楽」という名前のカテゴリーを追加してみます。名前に「音楽」、スラッグに「music」と入力して左下の「新規カテゴリーを追加」をクリックします。

カテゴリーの一覧に「音楽」が追加されていれば完了です。

カテゴリーの追加2

スラッグ

カテゴリーを追加する際に、名前以外に「スラッグ」という項目を設定しましたが、スラッグとは、投稿された文字情報を WordPress が判断するのに必要な文字列のことです。簡単にいうとページの URL の最後の部分を好きな文字列に指定できる機能のことです。

別の言い方をすると、スラッグは投稿や固定ページ、カテゴリなどの固有の識別子として登録される値(文字列)のことで、記事の識別子として URL の一部として使われます。

例えば、前述の「音楽」という名前のカテゴリーのスラッグは「music」としているので「音楽」カテゴリーページの URL は、以下のようになります。(パーマリンクの設定によっても変わってきます)

http://example.com/category/music/

パーマリンクの設定を「/%category%/%postname%/」としている場合、「音楽」カテゴリーに「song1」というスラッグの記事を作成すると、そのページの URL は以下のようになります。

http://example.com/music/song1/

カテゴリー以外にも、タグや投稿、固定ページ等色々な情報にスラッグを設定することができます。固定ページの URL は /shop/ や /menu/ のようにそのページのスラッグを元に作成され、親子関係がある場合は /shop/info/ のように URL も階層構造を持つことができます。

スラッグはカテゴリーの作成や記事の投稿、固定ページの作成の際に、(スラッグを指定しない場合)WordPress により自動的に生成されますが、日本語の場合「http://localhost/wp/%e3%82%b8%e3%83%a3%e3%82%ba/」のように日本語のスラッグは URLエンコードされてしまうので、半角英数字で内容を表す文字列を指定するようにします。

また、スラッグは投稿と固定ページでそれぞれユニーク(唯一の)な値として管理されています。例えば、「hello-world」というスラッグの記事がある状態で、別の記事に同名の「hello-world」というスラッグを入力すると、後から投稿した記事のスラッグは自動的に「hello-world-2」というように「xxxx-N(Nは数字)」と重複する数の数字が追記されます。スラッグの値はプログラムの条件分岐でも使用するため、重複しないユニークな値を設定することが望ましいです。

投稿画面

新しく記事を追加するには、メインナビゲーションメニューの「投稿」→「投稿一覧」を選択し、「新規追加」をクリックします。

投稿一覧

投稿画面には、記事のタイトルや記事を入力する欄以外にも「公開」「フォーマット」「カテゴリー」などの様々な入力用のボックスが表示されています。

投稿画面

これらのボックスは、記事の属性(さまざまな情報)を設定するためのものですが、全てを表示する必要はないので、よく使うものだけを表示するようにすることができます。画面右上の「表示オプション」をクリックすると、「表示する項目」のオプションが表示されます。

「表示する項目」のオプション

この例では「カテゴリー」「タグ」「アイキャッチ画像」「スラッグ」にチェックを入れて、もう一度「表示オプション」をクリックすると、ブロックが閉じて選択したボックスが表示されているのがわかります。

「表示する項目」のオプション設定後の表示例

表示オプション

「表示オプション」は、管理画面の全てのページの右上に表示されています。「表示オプション」の内容は、現在表示されているページの内容に合わせて項目が変わります。使いたい機能が見当たらない場合は「表示オプション」の設定を確認します。

以下はダッシュボードでの表示オプションの例です。

ダッシュボードでの表示オプションの例

記事の追加

メインナビゲーションメニューの「投稿」→「投稿一覧」を選択し、「新規追加」をクリックして「新規投稿を追加」の画面で記事を追加します。

新規投稿を追加

記事のタイトルや本文を入力し、スラッグを半角英数字で指定して、カテゴリーを選択します。

スラッグを指定しないと WordPress が自動的にタイトルからスラッグを生成してしまいます。

カテゴリーを指定しないとデフォルトのカテゴリーが適用されます。

エディタ

WordPress で記事を作成する時に使用するエディタにはビジュアルエディタとHTML(テキスト)エディタの二種類が用意されています。

エディタの切り替え

エディタは「ビジュアルエディタ」と「テキストエディタ」の二つが用意されていて、エディタの右上にあるタブをクリックして切り替えます。

「ビジュアル」を選択すると、HTML の知識がなくても Word を扱うような感じで文章を入力できます。「テキスト」を選択すると、HTML を直接入力することができます。

ビジュアルエディタ

ビジュアルエディタでは「ツールバーの切り替え」ボタンをクリックすると、「文字色の変更」ボタンなどが使えるようになります。

HTML(テキスト)エディタ

以下はビジュアルエディタを使って編集した例です。

ビジュアルエディタ

同じ記事をテキストエディタで見ると、以下のようになっていてます。

テキストエディタ

入力が完了したら、右上の「下書きとして保存」をクリックします。

下書きとして保存

タイトルの下に「パーマリンク」が表示されています。ここでパーマリンクを編集することもできます(スラッグと連動しています)。

右上の「プレビュー」をクリックすると、どのように表示されるかを確認することができます。

プレビューを確認して、問題がなければ「公開」をクリックすると、作成した投稿記事が公開されます。また「公開」ボタンは「更新」ボタンに、「プレビュー」ボタンは「変更をプレビュー」ボタンに代わり、「投稿の編集」画面になります。

ページ上部に「投稿を公開しました。」と表示されれば成功です。

「投稿を表示」をクリックすると、公開された投稿が表示されます。

さらに記事を編集した場合は、「更新」をクリックすると記事が更新されます。

投稿記事の公開

画像の挿入

画像の挿入1

本文中の画像を挿入したい位置にカーソルを移動して、「メディアを追加」ボタンをクリックします。以下のような「メディアを挿入」画面が開くので、画像ファイルをドラッグ&ドロップするか、「ファイルを選択」ボタンをクリックして画像を選択します。

画像の挿入2

ファイルがアップロードされると、「メディアライブラリ」の内容が更新されます(この例では、まだ画像が1つしかありません)。

画像の挿入3

アップロードした画像が選択されている(チェック印が付いている)ことを確認します。選択された画像の情報を入力する欄が表示されるので、必要に応じて設定します。

その下の「添付ファイルの表示設定」で記事内で画像をどのように表示するかを設定します。

添付ファイルの表示設定
項目 説明
配置 画像をテキストの左右に回り込ませるかどうか
リンク先 表示された画像をクリックして、その画像を表示させるかどうか
サイズ 表示される画像のサイズを設定。「設定」→「メディア」で設定したサイズが表示されます

「投稿に挿入」ボタンをクリックすると、画像が挿入されます。

「変更をプレビュー」をクリックして確認し、問題がなければ「更新」をクリックします。

画像の挿入4

画像を挿入した記事をテキストエディタで見ると以下のようになっています。

画像の挿入(テキストエディタ)

ショートコード([caption ...]のように記述して、予め設定した関数を呼び出す機能)と HTML で記述されているのがわかります。

[caption id="attachment_15" align="alignleft" width="640"]<a href="http://localhost/wp/wp-content/uploads/2016/10/IMG_2932.jpeg"><img class="size-full wp-image-15" src="http://localhost/wp/wp-content/uploads/2016/10/IMG_2932.jpeg" alt="ヒューストンの風景" width="640" height="480" /></a> ヒューストンの風景[/caption] 

また、実際に出力される HTML は以下のようになっています。

<figure id="attachment_15" class="wp-caption alignleft" style="width: 640px">
  <a href="http://localhost/wp/wp-content/uploads/2016/10/IMG_2932.jpeg">
    <img class="size-full wp-image-15" src="http://localhost/wp/wp-content/uploads/2016/10/IMG_2932.jpeg" alt="ヒューストンの風景" srcset="http://localhost/wp/wp-content/uploads/2016/10/IMG_2932.jpeg 640w, http://localhost/wp/wp-content/uploads/2016/10/IMG_2932-300x225.jpeg 300w" sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px" height="480" width="640">
  </a>
  <figcaption class="wp-caption-text">ヒューストンの風景</figcaption>
</figure>

以下は、画像をアップロードした際に指定した設定です。

画像の挿入5

投稿した画像に付くクラス

画像を投稿する際に表示を「なし」「左」「中央」「右」の中から選択すると、その際に以下のようなクラスが付加されます。

  • 「左」:alignleft
  • 「中央」:aligncenter
  • 「右」:alignright

これらのクラスを利用して画像とテキストのレイアウトを調整することができます。

/* 追加するCSSの例(style.css抜粋)*/
.alignleft {
 display: block;
 float: left;
 margin-right: 15px;
 margin-bottom: 1em;
}
.aligncenter {
 display: block;
 margin:0 auto;
}
.alignright {
 display: block;
 float: right;
 margin-left: 15px;
 margin-bottom: 1em;
}

上記の配置のクラス以外にも、キャプションに付与されるクラス(wp-caption、wp-caption-text)などもあります。

ビジュアルエディタのCSS

ブラウザとビジュアルエディタでの表示が異なるのは、個別投稿に設定してあるスタイルがビジュアルエディタに適用されないためです。

以下を行うことで表示を同じにすることができます。

  • ビジュアルエディタにスタイルを適用する場合は「editor-style.css」というスタイルシートを作成する。
  • この中の記述をビジュアルエディタに反映することができる。
  • 但し、#newsなど id 属性をエディタ内では使用していないので、要素の名前のみにする。
  • .mceContentBodyはビジュアルエディタ( TinyMCE)のbody要素専用のCSSクラス
  • functions.phpに次の記述を追記する。
    /** 管理画面にエディタースタイルシートを適用する */
    add_editor_style();
/*editor-style.css の例*/
.mceContentBody{
 max-width: 670px;
 font-size: 62.5%;
 font-family: "メイリオ",Meiryo,Osaka,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic",sans-serif;
 line-height: 1.5;
}
.alignleft {
 display: block;
 float: left;
 margin-right: 15px;
 margin-bottom: 1em;
}
.aligncenter {
 display: block;
 margin:0 auto;
}
.alignright {
 display: block;
 float: right;
 margin-left: 15px;
 margin-bottom: 1em;
}
p{
 font-size: 1.2em;
 padding-bottom: 1em;
}
ul{
 list-style: none;
 font-size: 1.2em;
 clear: both;
 padding-left: 0;
 padding-top: 10px;
 padding-bottom: 5px;
}
ul li{
 margin-bottom: 5px;
 padding-bottom: 5px;
 border-bottom: 1px dashed #ccc;
}

初期登録されている情報の削除

WordPress では、標準でサンプルとして投稿記事や固定ページなどが登録されているので、これらを削除してサイト構築の準備をしておきます。

はじめから登録されている記事の削除

WordPress では標準で「Hello World!」という記事が投稿されているので削除します。メインナビゲーションメニューの「投稿」→「投稿一覧」を選択し、「Hello World!」にカーソルを合わせるとメニューが表示されるので「ゴミ箱へ移動」をクリックして、削除します。

はじめから登録されている記事の削除

誤って削除した場合は「取り消し」をクリックするか、ゴミ箱へ移動して削除した記事を復元します。

はじめから登録されている記事の削除2

はじめから登録されている固定ページの削除

同様に、標準で登録されている固定ページを削除します。メインナビゲーションメニューの「固定ページ」→「固定ページ一覧」を選択し、「サンプルページ」にカーソルを合わせるとメニューが表示されるので「ゴミ箱へ移動」をクリックして、削除します。

はじめから登録されている固定ページの削除

新規ユーザーの登録と権限

WordPress では権限がグループ化されていて「管理者」「編集者」「投稿者」「寄稿者」「購読者」の権限グループが用意されています。ユーザーは設定された権限グループに応じて使える機能が制限されています。

インストール時に登録したユーザーは「管理者」で、全ての権限を備えています。以下が用意されている権限グループとその権限です。

  • 管理者:WordPress の全ての操作が可能。
  • 編集者:コメントやリンクの管理などコンテンツに関する全ての操作が可能。
  • 投稿者:記事の投稿や編集、公開が可能。
  • 寄稿者:記事の下書きと編集のみ可能。(公開はできない)
  • 購読者:閲覧及び自分のプロファイル管理のみ可能。(会員制サイトを作りたい時など)
WordPress 権限グループとその権限
権限 管理者 編集者 投稿者 寄稿者 購読者
テーマの変更 × × × ×
テーマの編集 × × × ×
プラグインの有効化 × × × ×
プラグインの編集 × × × ×
ユーザーの編集 × × × ×
ファイルの編集 × × × ×
設定の管理 × × × ×
インポート × × × ×
コメントの承認 × × ×
カテゴリーの管理 × × ×
リンクの管理 × × ×
フィルターなしの HTML × × ×
投稿された記事の編集 × × ×
別ユーザーの記事の編集 × × ×
ページの編集 × × ×
ファイルのアップロード × ×
記事の投稿 × ×
記事の編集 ×
閲覧

新規ユーザーの登録

新しくユーザーを追加するには、メインナビゲーションメニューの「ユーザー」→「新規追加」を選択します。

新規ユーザーの登録

「ユーザー名(任意のログイン ID)」「メールアドレス」「パスワード」(必須)を入力し、「権限グループ」のプルダウンからそのユーザーの権限を選択して、「新規ユーザーを追加」ボタンをクリックします。

「名」「姓」は必須ではありませんが、そのユーザーが記事を投稿した時に、ここに入力している氏名が、投稿者名として表示されるので必要に応じて入力します。

また、「ウェブサイト」の項は、そのユーザーが個人で行っているサイトがあれば、必要に応じて入力します。

登録したユーザーは、メインナビゲーションメニューの「ユーザー」→「ユーザー一覧」で確認することができます。

ユーザー一覧

この画面では、各ユーザーの権限を確認することができます。また、ユーザー名をクリックするとユーザー情報を編集でき、それぞれの権限グループを変更することも可能です。

WordPress のテーマ

WordPress ではテーマと呼ばれるファイル群(テンプレート集)を使ってサイトを表示しています。

WordPress のテーマには、ページをどのように表示するかを決めるテンプレートファイルや、画像、CSS ファイル、JavaScript ファイルなど Web サイトを表示するために必要なファイル一式がまとまっています。

使用しているテーマを別のテーマに変更すれば、異なる見た目の Web サイトに切り替わるようになっています。

WordPress をインストールした直後にサイトにアクセスすれば、WordPress のデフォルトのテーマが有効になっているため、そのデザインで Web サイトが表示されます。

メインナビゲーションメニューで「外観」→「テーマ」を選択すると、現在インストールされているテーマが表示されます。

WordPress のデフォルトのテーマ

テーマの構造

WordPress にインストールされているテーマは、インストールしたディレクトリの中の「wp-content/themes/」にあります。メインナビゲーションメニューで「外観」→「テーマ」で表示されたテーマのフォルダが格納されているのがわかります。

WordPress のデフォルトのテーマフォルダ

デフォルトで有効になっているテーマ(twentysixteen)のフォルダの中を見てみると、PHP ファイルなどが入っていることがわかります。

WordPress のテーマファイル

テーマ「twentysixteen」のディレクトリにはたくさんのファイルがありますが、テーマを作成する場合、最小の構成であれば「index.php」と「style.css」の2つのファイルだけでテーマを作ることができます。

style.css

style.css は、サイトのデザインを設定する CSS ファイルです。但し、一般的な CSS ファイルと異なる点が1点だけあります。それは、以下のように「style.css」の冒頭に以下のようなコメントがある点です。このコメントは、WordPress にテーマであることを認識させるための宣言文になっています。

/*
Theme Name: Twenty Sixteen
Theme URI: https://wordpress.org/themes/twentysixteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready, blog
Text Domain: twentysixteen

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

いろいろと記述されていますが、以下のような内容が記述されていて、実際には「テーマ名」のみが必須です。

/*
Theme Name : テーマ名(必須)
Theme URI:テーマの URL
Author: テーマの作成者
Author URI:テーマの制作者の URL
Description:テーマの説明
Version:ーマのバージョン
Tags: テーマのタグ
*/ 

index.php

index.php はユーザーがアクセスした際に Web ページを表示するための最も基本となるテンプレートファイルです。

twentysixteen の index.php は以下のような構成になっています。

  • コメント
  • ヘッダーの処理
  • メインの処理
  • サイドバーの処理
  • フッターの処理
//twentysixteen の index.php
<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */

get_header(); ?>

<div id="primary" class="content-area">
  <main id="main" class="site-main" role="main">
    <?php if ( have_posts() ) : ?>
    <?php if ( is_home() && ! is_front_page() ) : ?>
    <header>
      <h1 class="page-title screen-reader-text">
        <?php single_post_title(); ?>
      </h1>
    </header>
    <?php endif; ?>
    <?php
    // Start the loop.
    while ( have_posts() ) : the_post();
    
      /*
       * Include the Post-Format-specific template for the content.
       * If you want to override this in a child theme, then include a file
       * called content-___.php (where ___ is the Post Format name) and that will be used instead.
       */
      get_template_part( 'template-parts/content', get_post_format() );
    
    // End the loop.
    endwhile;
    
    // Previous/next page navigation.
    the_posts_pagination( array(
      'prev_text'          => __( 'Previous page', 'twentysixteen' ),
      'next_text'          => __( 'Next page', 'twentysixteen' ),
      'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>',
    ) );
    
    // If no content, include the "No posts found" template.
    else :
    get_template_part( 'template-parts/content', 'none' );
    
    endif;
		?>
  </main>
  <!-- .site-main --> 
</div>
<!-- .content-area -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

ソースコードを見ると、have_posts() や the_post()、get_header()、get_sidebar() などの記述が見られますが、これらはテンプレートタグと呼ばれる WordPress で使うことができる便利な関数です。これらの関数を使ってテーマを作成していきます。

WordPress のフォルダ構成

WordPress のフォルダを見ると以下のようになっていて、wp-admin、wp-content、wp-includes の3つのフォルダ(ディレクトリ)と wp- から始まるファイルがあります。

ファイルの場所やファイル名などは一定のルールに従って動作するようになっています。

WordPress のフォルダー構成

WordPress のファイル
ディレクトリ 説明
wp-admin 管理画面に関するファイルを格納するディレクトリ
wp-content テーマやプラグインなどに関するファイルを格納するディレクトリ
wp-includes WordPress システム全般に関するファイルを格納するディレクトリ
ファイル 説明
.htaccess WordPress インストール後に生成される .htaccess ファイル(※)
index.php サイトにアクセスがあった場合に、最初に読み込まれるファイル(インデックスファイル)
license.txt ライセンスに関するテキストファイル(サーバーにアップロードする必要なし)
readme.html WordPress のインストールや基本的な情報を記載したファイル(サーバーにアップロードする必要なし)
wp-activate.php ユーザーアカウントに関するファイル
wp-blog-header.php WordPress 環境に関連するファイルをロードするファイル
wp-comments-post.php コメント投稿に関するファイル
wp-config.php 設定ファイル
wp-config-sample.php インストール時にこのファイルを元に設定ファイルを作成することができるサンプルファイル。インストール後は wp-config.php という設定ファイルが生成される
wp-cron.php 擬似 cron ジョブ(ある種のスケジューリング機能)を担うファイル
wp-links-opml.php リンクの XML 出力に関するファイル
wp-load.php WordPress の動作や起動に関連するファイルをロードするファイル
wp-login.php 管理画面のログインに関するファイル
wp-mail.php メールによるブログ投稿用ファイル
wp-settings.php WordPress の基本設定に関するファイル
wp-signup.php ブログ名やユーザー名などの設定に関するファイル
wp-trackback.php トラックバックと Ping 送信用ファイル
xmlrpc.php XML-RPC 通信に関するファイル

(※).htaccess ファイルは WordPress のパーマリンク設定時に自動的に生成され、テーマディレクトリに配置されます。WordPress のパーマリンクはこの .htaccess ファイルと Apache の mod_rewrite と言うモジュールによって制御されています。

wp-admin フォルダー

wp-admin フォルダーには、WordPress の管理画面の表示部分に関するファイルが格納されていて、管理画面の表示に使われる HTML(PHP)、CSS、画像ファイル等から構成されています。

wp-admin フォルダーは、WordPress をアップデートすると全て新しいバージョンのファイルに置き換わる可能性があります。そのため、管理画面をカスタマイズするためにこのフォルダの中の PHP や CSS ファイルを直接書き換えるのは有効な方法ではありません。管理画面をカスタマイズするには、functions.php を編集するかプラグインを使用します。

WordPress wp-admin フォルダー内のファイル

wp-includes フォルダー

wp-includes フォルダーには、API、クラス、関数などのプログラムファイルが格納されています。

このフォルダも WordPress をアップデートすると、最新版に置き換わる可能性があります。

WordPress wp-includes フォルダー内のファイル

wp-content フォルダー

wp-content フォルダーには、サイト構築に関わるファイルが格納されています。「テーマ(テンプレートやCSS等)」や「プラグイン」関連のファイル、アップロードした画像ファイルなどが入っています。

WordPress wp-content フォルダー内のファイル

フォルダ名 概要
languages 多言語に対応するためのデータを格納
plugins プラグインを格納。追加のプラグインがある場合はここに配置
themes テーマ(テンプレート)を格納
upgrade WordPress をアップデートする際に使用されるフォルダ。初めてアップデートする際に自動的に作成される
uploads 画像や動画などのメディアを格納。初めてアップロードする際に自動的に作成され、デフォルトではアップロードした年月ごとにフォルダが生成される
themes フォルダー

themes フォルダーは、WordPress のテーマを格納するフォルダです。初期状態では、twentyfifteen、twentyseventeen などの公式テーマが置かれています。新規でテーマを作成する場合は、ここに任意の名前でテーマのフォルダを作成してテンプレートファイルを配置します。

WordPress のテーマには、ページをどのように表示するかを決めるテンプレートファイルや、画像、CSS ファイル、JavaScript ファイルなど Web サイトを表示するために必要なファイル一式がまとまっています。

WordPressthemes フォルダー内

themes フォルダーには、複数のテーマを保存できるようになっていて、どのテーマを使うかをダッシュボードから切り替えられるようになっています。

以下は、twentyseventeen (公式テーマの1つ)フォルダの中です。

WordPressthemes フォルダー内

ファイル名 種類 概要
style.css スタイルシート テーマのスタイル(デザイン)を設定するスタイルシート(CSS)ファイル
index.php テンプレート ページを表示する HTML や PHP(WordPress 関数)等を記述したテンプレートファイル
404.php テンプレート
front-page.php テンプレート
single.php テンプレート
archive.php テンプレート
page.php テンプレート
search.php テンプレート
comments.php テンプレートパーツ ヘッダーやフッターなどの他のページでも使用する共通部分を記述したテンプレートパーツ(パーツテンプレートやモジュールテンプレートとも呼びます)
footer.php テンプレートパーツ
header.php テンプレートパーツ
searchform.php テンプレートパーツ
sidebar.php テンプレートパーツ
functions.php プログラム テーマの機能を記述・設定するプログラムファイル
screenshot.png 画像 テーマのイメージ画像。ダッシュボードのテーマ選択画面で表示されます。

テーマを作成するのに最低限必要なファイルは以下のファイルです。(これらのファイルをテーマフォルダに入れ、wp-content/themes/にアップロードし、管理画面で選択します。)

  • index.php:ページを生成するファイル
  • functions.php:機能に関する設定を記述ファイル(最初は空の状態でよい)
  • style.css:デザインの設定を記述するファイル
  • screenshot.png:管理画面に表示する画像