WordPress導入〜基本

WordPressを使ってサイトの作成を行います。

WordPressとは

WordPress（ワードプレス）はPHPというプログラミング言語で作られている、 Webサイトを作るための土台となるパッケージセットです。

WordPressには上図のような動的サイト構築に必要な基本的な機能があらかじめすべて含まれているため、ブログやコンテンツ更新を含むWebサイトでも比較的簡単に作る事ができます。

WordPressの特徴

WordPressの特徴は以下の通りです。

「Local」の利用

WordPressのサイト構築にはWebサーバーとWordPressのインストール作業が必要ですが、Localというアプリを使うとローカル環境（自身のPC上）で簡単にWordPress環境を作ることができます。

Local Webサイト

Localの特徴

  • 基本は無料で利用可能
  • 設定が簡単
  • サーバーを用意しなくてもローカル環境でWordPressを動かせる
  • 1台のPCに複数のWordPress環境の構築が可能

インストール方法

ダウンロードしたファイルを開き、インストールを行います。
手順は下記サイトを参考にして下さい。(ページ記載の最後の手順まで進み、WordPressサイトの作成まで行います)

Localのインストール手順
サイト名
mode2025
ユーザー名
admin
パスワード
mode2025

ルーターモード変更

Localの初期設定では「サイトURL」がドメインとなっているため、localhostに変更します。（モード学園フィルタリング回避のため）

  1. 画面左上のアイコンをクリックしメニューを開き、[Preference]クリックします。

  2. 左側メニューから[Advanced]を選択し、[Router mode]の項目で【localhost】を選択します。

  3. 画面右下の[Apply]ボタンをクリックして設定を保存します。

言語設定

Localの初期設定では英語表示のため、日本語に切り替えます。

  1. 下記ファイルをダウンロード後解凍します。

    日本語語設定ファイル

    Localで[Site folder]をクリックしてサイトフォルダを表示後、以下のパスに解凍したlanguagesフォルダを配置します。(※指定箇所に既にlanguagesフォルダが存在する場合は上書きしてください)

    【app > public > wp-content】の直下にlanguagesフォルダを配置

  2. [WP Admin]ボタンを押して管理画面のログインページを開きます。

  3. 初期登録時に設定したID(admin)、パスワード(mode2025)でログインします。

  4. 左側メニューの[Settings]をクリックし、Site languageの項目で【日本語】を選択します。

  5. ページ下部にある[Save Changes]ボタンをクリックして、変更を確定後に管理画面全体がが日本語表示になっているのを確認します。

WordPress基本知識

WordPressでよく使われる機能や用語について、事前に押さえておきます。

ページタイプ

WordPressで使われるページは以下の3種類があり、これらのページを組み合わせてWebサイトを構成します。

  • フロントページ
  • 記事（投稿）ページ
  • 固定ページ

フロントページ

フロントページは、Webサイトのトップページのことです。
フロントページは一般的に後述の固定ページを使って作成します。

フロントページはインパクト重視のため、下層ページと比べてデザインのテイストやコンテンツ構造が異なる場合が多い傾向にあります。

記事（投稿）ページ

記事ページは、記事とその一覧で構成されるページセットです。
記事個別ページは管理画面から記事作成をすることで自動的に生成されます。

ページ例: お知らせ、ブログなど

固定ページ

固定ページは、カテゴリーやタグに属さない、独立した単体ページのことです。
記事（投稿）ページが管理画面からの記事登録によって自動生成されるのに対し、コンテンツ内容が固定している（＝動的に生成されない）ページが固定ページです。

ページ例: 会社概要、サービス案内、プライバシーポリシーなど

テーマ

テーマとは、WordPressの外観や機能を決めるテンプレートのことです。
テーマは、WordPressの機能を拡張するプラグインと同様に、WordPressの機能を拡張するために利用します。

テーマはWordPressの管理画面からインストールして自由に切り替えることができます。

既存テーマと自作テーマ

テーマは既存のものを利用するか、自作するかの大きく分けて２種類があります。
また自作テーマのなかでも汎用型と特化型の２種類があり、それぞれ用途に応じてどの形で制作するかを選択します。

以下にそれぞれの特徴を示します。

タイプ 既存テーマ 専用テーマを自作 汎用テーマを自作
説明 既存のテーマを利用して、テーマのカスタマイズ機能を使って制作する カスタマイズ機能を大幅に制限して、レイアウトテンプレートとしてのテーマを制作する [既存テーマ]自体を自身で作成する
特徴 コーディングの知識不要でサイトを構築できる コーディング知識は必要だが決まったパターンさえ覚えれば制作可能 高度な制作スキルとWordPress自体の知識が必要
制作時間 ★☆☆ ★★☆ ★★★
制作難易度 ★☆☆ ★★☆ ★★★
利用目的 簡単にサイトを作りたい 完全オリジナルデザインのCMS付きサイトを少ない労力で制作したい 自分でテーマを作って販売したい

一般に、制作を請け負ってデザインごと制作する場合は【専用テーマ】で制作することがほとんどですが、デザインに細かなこだわりがなく、あまりコストをかけずに作りたい場合は【既存テーマ】で制作することもあります。

【汎用テーマ】は主に自身で作ったテーマをその他業者向けに販売したい場合に選択するもので、他２パターンと目的が少し異なります。

プラグイン

プラグインとは、WordPressの機能を拡張するためのツールのことです。
プラグインをインストールすることで、元々のWordPressの機能追加することができ、様々なサイト作りが可能になります。

プラグインはサイトの表の見せ方を変えるもの、管理画面の機能を追加するもの、またはその両方など、WordPressの持つ全ての箇所に対して機能を追加変更させることができます。

代表的なプラグイン例

お問い合わせフォーム
  • Contact Form
  • MW WP Form
ECサイト機能
  • WooCommerce
  • Welcart
バックアップ
  • All-in-One WP Migration
  • BackWPup

ブロックエディタ

ブロックエディタとはWordPressの記事投稿画面でコンテンツを記載する際に使われるエディタのことです。
ブロックエディタの特徴は、文字や画像、レイアウトなどを【ブロック】と呼ばれる単位で管理します。
HTMLやCSSの知識がなくてもマウスとキーボード操作によりコンテンツの作成や編集が簡単に行えるメリットがあります。

ブロックエディタの使い方と基本構成

ブロックエディタは記事の【投稿】ページにて試すことが出来ます。

管理画面左側メニューから【投稿 > 投稿を追加】

ブロックエディタ画面は基本的に以下のように構成されています。

①ツールバー
ブロックの追加、元に戻す/やり直す、ブロックのリスト表示など
②保存/公開
下書き保存、プレビュー、公開、オプション設定など
③コンテンツ編集
ブロックの追加、編集、移動、削除などメインコンテンツの編集
④ブロックメニューバー
ブロックごとの各種設定
⑤パネル
記事全体/ブロックごとの各種設定
⑥パンくずリスト
編集中（選択中）のブロックの位置を階層で表示

編集方法

ブロックエディタは通常、上の図のように「タイトル入力欄」が用意されています。ここにタイトルを入力します。
「タイトル入力欄」の下が、ブロックを追加していくエリアになります。

ブロックの追加は、ブロック追加エリアの右側にある黒い【＋】ボタンを押して追加できます。追加したいブロックを表示アイコンからそのまま選択するか、テキスト検索して選択します。

よく利用する代表的なブロック

ブロックエディタには様々な種類のブロックが用意されていますが、ここではよく利用する代表的なブロックを紹介します。

見出し

見出しのブロックは文章の見出しを設定するためのブロックです。
ブロックメニューバーから見出しのレベル(h1〜h6)を変更することができます。

段落

段落のブロックは通常の文章を記載するためのブロックです。
入力した文章内を範囲選択することで、太字や斜体、リンク挿入など文字のスタイルを変更できます。また文字の色やサイズは右側のパネルメニューから変更できます。

画像

画像のブロックは、画像を挿入するためのブロックです。
追加する画像をライブラリから選択するか、ここからそのままファイルをアップロードして追加することもできます。

カラム

カラムのブロックは、複数のコンテンツを並べて表示するためのブロックです。
カラムの数や幅を変更して並べ方のパターンを指定します。

なおこのブロックの選択アイコンは初期状態では表示されていないため、「全てを表示」から一覧を表示するか、検索窓にて【カラム】を入力して表示させることで選択できます。

スペーサー

スペーサーのブロックは、コンテンツ間の余白を設定するためのブロックです。
ブロックメニューバーからスペーサーの高さを変更することで、コンテンツ間の余白を調整できます。

このブロックも選択アイコンは初期状態では表示されていないため、「全てを表示」から一覧を表示するか、検索窓にて【スペーサー】を入力して表示させることで選択できます。

ブロックエディタでカラムパーツなどを使っている場合に「ブロック内のブロック」のような多重ブロック構造になることがあります。

このときにマウスでブロックを選択する際に親ブロックを選択して設定変更したいときでも子ブロックが選択されてしまい、親ブロックの選択が難しい場合があります。
そのような場合は、子ブロックを選択した状態でメニューの一番左の【親ブロックを選択】ボタンをクリックする1階層上のブロックが選択可能になります。