前回のおさらい
- インターネットの基礎知識
- IPアドレスとは
- IPアドレスとは:インターネット上の「住所」
- ドメインとは
- 人間にも覚えやすいように考案された住所
- ドメインは財産。長期的視点で取得・管理しよう
- DNSとは
- IPとドメインを紐づける対照表
- IPとドメインは独立しているので、サーバー乗り換えなども可能
- IPアドレスとは
- Webサイトの仕組み
- HTMLの場合
- あらかじめ作成した静的ページファイル(index.htmlなど)をブラウザに送り返す
- WordPressの場合
- アクセスされたURLから要求を判断し、データベース(DB)からデータを取得
- テーマのテンプレートに流し込み、HTMLに変換してブラウザに送り返す
- HTMLの場合
- データベースとWordPressのフォルダ構造
- 「Local」のサイト名下部にある「Site folder」から確認。
- 「public」内にWordPressのファイル群が存在。
- ※注意: 編集するのは「wp-content」の中のみ。
- 静的ページファイルは存在せず、テキストデータはDBの中、画像は「uploads」の中に保存される。
- Web制作の現場でよく出てくるキーワード
- (省略)
- 本来のWordPressのインストール手順
- 公式サイトからzipファイルをダウンロードしてサーバーにアップロード
- トップページにアクセスしてインストール画面を開く
プラグインの新規インストールの流れ
1.プラグイン > 新規追加を開く
2.あらかじめプラグインのレビュー記事などで目的のプラグイン名を調べておく
MetaSliderをインストールすると何ができるの?
- スライドショーを記事本文内にかんたんに設置
- プラグイン上でスライドの設定したらショートコードをコピーして、表示したい場所に貼り付ける。記事本文内の場合はブロックからも追加できる。
- 有名なスライダープログラムを選べる(FlexSlider、Nivo Slider他)
プラグインを追加しよう(MetaSliderのインストール手順)
3.左側のメニューから、プラグイン>プラグインを追加を選択し、プラグインを追加の画面を出す。右上にあるプラグインの検索窓からプラグインの名称を入力
4.目的のプラグインの今すぐインストールボタンを押す
5.公式リポジトリからダウンロードしてファイルを展開中…(しばらく待つ)
6.インストールが完了すると青い「有効化」ボタンに変わるので、有効化ボタンを押す
7.WordPressに登録され、設定メニューが用意され、データベースに必要なデータが保存される
(ここまではどのプラグインも一緒…WordPressのプラグインの作法)
スライドの設定をしてみよう!
- インストール > 有効化 が済んだら、
- 左メニュー下部「MetaSlider」をクリック
- ページ上部「Add New」をクリック
- ページ上部「スライドを追加」をクリック
- 「メディアライブラリ」タブから、3点ほど画像を選択(Control + クリックで複数選択できる)
- Add to slideshow をクリック
- ページ上部「Preview」で確認
- 保存

- 右下に表示されているショートコードをクリック(コピーされる)

- 「投稿」をクリックし、「【期間限定】新メニュー「オータムミラノサンド」…」のタイトルをクリックして編集画面を開く
- 本文欄の一番最後あたりをクリックして、コピーしておいたショートコードをペースト

- 右上の「更新」ボタンをクリック
- プレビューボタンで、どのように表示されるか確認しよう!
もっとプラグインを追加してみよう!
X(Twitter)、Facebook、Pinterestなどのシェアボタンを記事下部に自動表示してくれるプラグイン。
以前は「WP Social Bookmarking Light」という日本人作者のプラグインをよく使用していたが、3年ほど更新されていないので最近は使用していない。
使ってみよう!
- 設定 > Scriptless Social Sharing
- ページ右上「ヘルプ」を確認
- 初期状態で以下のSNSのアイコンが有効化されている:
X / Facebok / Pinterest / LinkedIn / Email - そのまま何もしなくても、各記事の下部にSNSのシェアボタンが表示される
→ “オータムミラノサンド”のページを確認してみよう
プラグインの設定画面はプラグインごとに異なる
設定メニューの構成、メニューが表示される位置、言語、UIなどはプラグインごとに異なる(例:外観 > Lightbox)
- 理由は、それぞれのプラグインの作者が違うから
- WordPressはオープンソースソフトウェア(OSS)であり、マイクロソフトのような特定の一社が開発したものではない。公式サイトに登録されたプラグインは世界中のWordPressユーザー/開発者によってつくられたものであり、機能・使い勝手・対応言語・デザインも千差万別。
- 一応、作る上でのルールや、便利なライブラリは用意されているので、基本的な構造はある程度共通。
- 作者は一人とは限らず、別のプログラマが部分的に協力したり(Contribution=貢献)、そのプラグインの世界中のユーザーが母国語の翻訳ファイルをプラグイン作者に提供していることも少なくない。
- 同様の機能をもったプラグインが複数存在するので、気軽に切り替えて試してみるのも良い(以下の点に留意)
- ちゃんと更新されているか?(最終更新日が1年以上前のものは要注意)
- 有効インストール数が多く、ユーザーの評価が高いものから優先的に試す
- インストールしたら、やたらページの読み込みが重くなった…(→つくりが悪い可能性)
プラグインが出力する管理画面上部のメッセージについて

プラグインをインストールすると、管理画面内のページ上部にメッセージがずっと表示されていることがある。これらは主に以下のような内容:
- 設定の完了を促すメッセージ(設定をしないと正常に動作しない場合)
- 有料版へのアップグレードの案内
- プラグインの評価や、SNSアカウントのフォロー、メルマガ購読の案内
1を除いて、「閉じる」「close」「hide」などのボタンで非表示にしても問題なし。
※インストールして有効化すると同時にそのプラグインのWelcomeページへ誘導するプラグインもある。
テーマの新規インストールの流れ
- 外観 > テーマをクリック
- 右下の「新しいテーマを追加」か、検索画面近くの「新規追加」ボタンをクリック
- 右上の検索窓にテーマ名を入力
(例:Lightning)- スペルが違うとヒットしないことがあるのであらかじめ調べておく
- 検索にヒットした「Lightning」の インストール ボタンをクリック
- 公式レポジトリからダウンロードしてファイルを展開中…(しばらく待つ)
- インストールが完了すると 有効化 という青いボタンに変わるのでクリックして有効化
- WordPressに登録され、設定メニューが用意され、データベースに必要なデータが保存される
- テーマが切り替わる
外観 > カスタマイズを見てみよう!

- Lightning トップページスライドショー
- 先ほどさわった「MetaSlider」的な機能がある
- 同上 トップページPRブロック
- PR Block を表示するにチェック
- 3つの横並びのブロックが表示
- ビジネスサイトなどで製品の特徴などをアピールできる
- 3つの横並びのブロックが表示
- PR Block を表示するにチェック
このように、テーマが違うとカスタマイズ機能も大幅に異なる。
この「Lightning」は日本製で、国内のコーポレートサイトなどによく使われる人気テーマの一つ。無料版と有料の上位版(Lightning Pro)が提供されている。無料版で多くのユーザーに使ってもらい認知を広げ、その一部が有料版に移行する仕組みだ。ソフトウェアの場合、特にWordPressのような利用者の多いプラットフォームでは、複製・配布のコストが極めて低いため、ユーザー全体の数パーセントが有料版を購入するだけでもビジネスとして成立する。このようなビジネスモデルを「フリーミアム」と呼ぶ(フリー + プレミアム の造語)。
有料テーマ、または公式サイト以外で配布されているテーマのインストール方法
公式サイト以外で配布/販売されているテーマはテーマの検索欄からは探せない。各テーマの配布/販売サイトから所定の手順でダウンロードする。ダウンロードしたファイルはたいていzip形式で圧縮されている。
- 『Cocoon』(公式サイト以外での配布テーマの例)
- 日本人作者による非常に有名な無料のテーマ
https://wp-cocoon.com/ - 上記サイトにアクセスし「WordPressをお持ちならダウンロードはこちら」ボタンをクリック
- ページ中盤の「Cocoonテーマのダウンロード」をクリック
- 日本人作者による非常に有名な無料のテーマ


1.外観 > テーマをクリック
2.右下の「新しいテーマを追加」をクリック
3.「テーマのアップロード」をクリック
4.「ファイルを選択」ボタンをクリック
5.ファイル選択画面が開くので、ダウンロードしたテーマのzipファイルを選択してインストール
6.有効化ボタンをクリック
国内で人気の有料テーマの例
『Snow Monkey』
https://snow-monkey.2inc.org/
『SWELL』
https://swell-theme.com/
『SANGO』
https://saruwakakun.design/
気になったテーマをインストールしてみよう!
- 気になるテーマを各自インストールしてみよう!
- 有効化したら、外観 > カスタマイズ をひらいてみよう
- テーマによってカスタマイズの機能が違います
- テーマを切り替えて、カスタマイズ機能の違いを確認しよう
- 有効化したら、外観 > カスタマイズ をひらいてみよう
以上
ミニクイズ
満点取れるまでチャレンジしてみよう!











