2025年第5回プラグインとテーマについて

Contents

1 前回のおさらい
2 プラグインの新規インストールの流れ
3 テーマの新規インストールの流れ
4 ミニクイズ満点取れるまでチャレンジしてみよう！

前回のおさらい

インターネットの基礎知識
- IPアドレスとは
  - インターネット上の住所
- ドメインとは
  - 人間にも覚えやすいように考案
  - ドメインは財産、長期的視点で取得・管理しよう
- IPとドメインの対照表を「DNS」という
- IPとドメインは独立しているので、サーバー乗り換えなども可能
Webサイトの仕組み
- HTMLの場合
  - あらかじめ作っておいた静的ページファイル（index.html）をブラウザに送り返す
- WordPressの場合
  - アクセスされたURLから要求されたページを判断し、DBからデータを取得
  - テーマのテンプレートに流し込み、HTMLに変換してブラウザに送り返す
データベースとWordPressのフォルダを確認してみよう
- Localのサイト名のすぐ下の「Site folder」リンクから
- 「public」の中にWordPressのファイル群
- 「wp-content」の中しか触らない
- 静的ページファイルは存在せず、DBの中（画像はuploadsの中）
Web制作の現場でよく出てくるキーワード
- （省略）
本来のWordPressのインストール手順
- 公式サイトからzipファイルをDLしてサーバーにアップロード
- トップページにアクセスするとインストール画面が開く

プラグインの新規インストールの流れ

※ここからの作業は、前回インポートしてもらった「Core Cafe V1」を元に進めていきます。

１.プラグイン > 新規追加を開く

２.あらかじめプラグインのレビュー記事などで目的のプラグイン名を調べておく

『Simple Lightbox』

記事内の画像をLightbox形式（ポップアップ形式、モーダル形式）で拡大表示
ページを移動せずに、その場で写真を拡大表示
機能させる上での前提条件は、拡大させる前の縮小版の写真に拡大写真へのリンクを設定する。

３.右上にあるプラグインの検索窓からプラグインの名称を入力

４.目的のプラグインの今すぐインストールボタンを押す

５.公式リポジトリからダウンロードしてファイルを展開中…（しばらく待つ）

６.インストールが完了すると青い「有効化」ボタンに変わるので、有効化ボタンを押す

７.WordPressに登録され、設定メニューが用意され、データベースに必要なデータが保存される

（ここまではどのプラグインも一緒…WordPressのプラグインの作法）

使ってみよう！

「投稿」をクリックし、「Hello world!」のタイトルをクリックして編集画面を開く
本文欄、右側に表示されている「＋」マークをクリックし、「画像」と検索して表示されたブロックを選択
「アップロード」ボタンをクリックし、前回の授業ダウンロードした素材フォルダから 00.jpg (サンドイッチの画像)をアップロード
リンクボタンで、「メディアファイル」を選択
右上の「更新」ボタンをクリック
プレビューボタンで、どのように表示されるか確認しよう！

Simple Lightboxの設定画面を確認しよう

外観 > Lightbox

設定画面が英語😑
地味な設定画面（Instagramフィードに比べて）

プラグインの設定画面はプラグインごとに異なる

設定メニューの構成、メニューが表示される位置、言語、UIなどはプラグインごとに異なる（例：外観 > Lightbox）

理由は、それぞれのプラグインの作者が違うから
1. WordPressはオープンソースソフトウェア（OSS）であり、マイクロソフトのような特定の一社が開発したものではない。公式サイトに登録されたプラグインは世界中のWordPressユーザー/開発者によってつくられたものであり、機能・使い勝手・対応言語・デザインも千差万別。
2. 一応、作る上でのルールや、便利なライブラリは用意されているので、基本的な構造はある程度共通。
3. 作者は一人とは限らず、別のプログラマが部分的に協力したり（Contribution＝貢献）、そのプラグインの世界中のユーザーが母国語の翻訳ファイルをプラグイン作者に提供していることも少なくない。
同様の機能をもったプラグインが複数存在するので、気軽に切り替えて試してみるのも良い（以下の点に留意）
1. ちゃんと更新されているか？（最終更新日が1年以上前のものは要注意）
2. 有効インストール数が多く、ユーザーの評価が高いものから優先的に試す
3. インストールしたら、やたらページの読み込みが重くなった…（→つくりが悪い可能性）

プラグインが出力する管理画面上部のメッセージについて

プラグインをインストールすると、管理画面内のページ上部にメッセージがずっと表示されていることがある。これらは主に以下のような内容：

設定の完了を促すメッセージ（設定をしないと正常に動作しない場合）
有料版へのアップグレードの案内
プラグインの評価や、SNSアカウントのフォロー、メルマガ購読の案内

１を除いて、「閉じる」「close」「hide」などのボタンで非表示にしても問題なし。

※インストールして有効化すると同時にそのプラグインのWelcomeページへ誘導するプラグインもある。

以下のプラグインをインストールしてみよう！

『MetaSlider』

スライドショーを記事本文内にかんたんに設置
Contact Form 7と同じく、設定したらショートコードをコピーして、表示したい場所に貼り付ける。記事本文内の場合はブロックからも追加できる。
有名なスライダープログラムを選べる（FlexSlider、Nivo Slider他）

使ってみよう！

インストール > 有効化が済んだら、
左メニュー下部「MetaSlider」をクリック
ページ上部「Add New」をクリック
ページ上部「スライドを追加」をクリック
「メディアライブラリ」タブから、3点ほど画像を選択（Control + クリックで複数選択できる）
Add to slideshow をクリック
ページ上部「Preview」で確認
保存

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

右上の「更新」ボタンをクリック
プレビューボタンで、どのように表示されるか確認しよう！

『Scriptless Social Sharing』

X(Twitter)、Facebook、Pinterestなどのシェアボタンを記事下部に自動表示してくれるプラグイン。

以前は「WP Social Bookmarking Light」という日本人作者のプラグインをよく使用していたが、3年ほど更新されていないので最近は使用していない。

使ってみよう！

設定 > Scriptless Social Sharing
ページ右上「ヘルプ」を確認
初期状態で以下のSNSのアイコンが有効化されている：
X / Facebok / Pinterest / LinkedIn / Email
そのまま何もしなくても、各記事の下部にSNSのシェアボタンが表示される
→ “オータムミラノサンド”のページを確認してみよう

テーマの新規インストールの流れ

外観 > テーマをクリック

右下の「新しいテーマを追加」か、検索画面近くの「新規追加」ボタンをクリック

右上の検索窓にテーマ名を入力
（例：Lightning）
1. スペルが違うとヒットしないことがあるのであらかじめ調べておく

検索にヒットした「Lightning」の インストール ボタンをクリック
1. 公式レポジトリからダウンロードしてファイルを展開中…（しばらく待つ）

インストールが完了すると 有効化 という青いボタンに変わるのでクリックして有効化
1. WordPressに登録され、設定メニューが用意され、データベースに必要なデータが保存される
2. テーマが切り替わる

外観 > カスタマイズを見てみよう！

Lightning トップページスライドショー
- 先ほどさわった「MetaSlider」的な機能がある
同上　トップページPRブロック
- PR Block を表示するにチェック
  - 3つの横並びのブロックが表示
    - ビジネスサイトなどで製品の特徴などをアピールできる

このように、テーマが違うとカスタマイズ機能も大幅に異なる。

この「Lightning」は日本製で、国内のコーポレートサイトなどによく使われる人気テーマの一つ。無料版と有料の上位版(Lightning Pro)が提供されている。無料版で多くのユーザーに使ってもらい認知を広げ、その一部が有料版に移行する仕組みだ。ソフトウェアの場合、特にWordPressのような利用者の多いプラットフォームでは、複製・配布のコストが極めて低いため、ユーザー全体の数パーセントが有料版を購入するだけでもビジネスとして成立する。このようなビジネスモデルを「フリーミアム」と呼ぶ(フリー + プレミアムの造語)。

有料テーマ、または公式サイト以外で配布されているテーマのインストール方法

公式サイト以外で配布/販売されているテーマはテーマの検索欄からは探せない。各テーマの配布/販売サイトから所定の手順でダウンロードする。ダウンロードしたファイルはたいていzip形式で圧縮されている。

『Cocoon』（公式サイト以外での配布テーマの例）
- 日本人作者による非常に有名な無料のテーマ
  https://wp-cocoon.com/
- 上記サイトにアクセスし「WordPressをお持ちならダウンロードはこちら」ボタンをクリック
- ページ中盤の「Cocoonテーマのダウンロード」をクリック