Loading...

【ブログ改造計画】WordPressのDocker環境を構築して基本機能を理解する【WordPress】

Docker
マイケル
マイケル
みなさんこんにちは!
マイケルです!
エレキベア
エレキベア
こんにちクマ〜〜〜
マイケル
マイケル
今日からはしばらく、前々から計画していた
ブログ改造計画を進めていこうと思います!
エレキベア
エレキベア
改造するって言ってたクマね
確かに自分で言うのもなんクマが、今このブログはかなりダサいクマ
マイケル
マイケル
直球でいったね・・・
このブログは三年くらい前にWordPressで作ったんだけど、
当時はIT知識も乏しく、勢いで立ち上げたところがあるんだ。
マイケル
マイケル
そこからずっとこの形式だったからいろいろ気になるところがあってね・・・。
これを機にWordPressを勉強してカスタマイズできるようになっておこうと思ったんだ。
エレキベア
エレキベア
テーマを自由にいじれるようになったら
面白いコンテンツもいろいろ作れるようになるかもしれないクマね
マイケル
マイケル
WordPressを制するものはブログを制す!
というわけで今後の目標は下記の通りだ!
今後の目標
  • WordPressの構成を理解する
  • 公開しているブログと同等の開発環境を用意する
  • デザインや機能を自由に編集、追加できるようにする
マイケル
マイケル
開発環境は使い慣れたTypeScriptやStylusも使用して編集できるようにしようと思っているよ!
今回は第一回ということで、WordPressの構成や編集方法を理解する のをメインで進めていきます!
エレキベア
エレキベア
楽しみクマ〜〜〜
スポンサーリンク

参考文献

マイケル
マイケル
書籍は下記を参考にさせていただきました!
WordPress関連の書籍は初心者向けの導入手順や管理画面操作レベルのが多いけど、
こちらはアーキテクチャ概要からテーマ、プラグインの作成といった、エンジニア向けの内容で完結にまとめられていたので、とても分かりやすかったです!

エンジニアのためのWordPress開発入門

エレキベア
エレキベア
確かにWordPress関連の書籍はあまりいい印象がないクマ
マイケル
マイケル
あとはWordPressの公式ドキュメントを参考にしています。
ドキュメントはWordPress Codexと呼ばれるサイトで管理されていましたが、
2021/09よりWordPress.orgのマニュアルに正式に移行したようです。

WordPress Codex 日本語版

サポートフォーラム – WordPress.org

マイケル
マイケル
ただ関数リファレンス等の情報等、まだ移行が完了していない項目が多々あるようなので、
現状は関数の仕様等についてはCodexを参照する方がよさそうですね・・・。
エレキベア
エレキベア
ドキュメントもみっちりまとめられているクマね

Docker環境構築

マイケル
マイケル
WordPressの構成について、実際のファイルを見ながらの方が理解も早いと思うので、
まずはローカルにWordPress環境を構築します。
ここではDockerを使って環境構築していきます。
マイケル
マイケル
Dockerの使い方については下記記事にまとめてあるので、
使ったことがない方はこちらも参照してみてください!
エレキベア
エレキベア
懐かしいクマ〜〜〜

docker-compose.ymlの記述

マイケル
マイケル
というわけで、まずはプロジェクトフォルダ配下に
docker-compose.ymlを作成します。
基本的に下記のチュートリアルで紹介されている内容で記述します。

クィックスタート: Compose と WordPress

version: '3'

services:
   db:
     image: mysql:5.7
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     ports:
       - "3306:3306" # 1.MySQLのポートを外部に公開
     environment:
       MYSQL_ROOT_PASSWORD: test
       MYSQL_DATABASE: wordpress
       MYSQL_USER: test
       MYSQL_PASSWORD: test

   wordpress:
     depends_on:
       - db
     image: wordpress:latest
     ports:
       - "8000:80"
     volumes:
       - ./html:/var/www/html # 2.htmlフォルダをマウント
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: test
       WORDPRESS_DB_PASSWORD: test
volumes:
    db_data:
マイケル
マイケル
変更している点としては、

・コンテナ外からもDBに接続できるよう3306ポートを公開
・htmlフォルダ配下を編集できるようマウント
している2点になります!
エレキベア
エレキベア
マウントしないとコンテナ起動の度に
初期化されてしまうからクマね

コンテナの操作

マイケル
マイケル
コンテナの操作は下記の通り!
ymlファイルが置いてあるフォルダ配下で実行しましょう。
# コンテナ起動
docker compose up -d

# コンテナ一覧確認
docker container ls

# プロセスの確認
docker compose ps

# コンテナ停止
docker compose down
エレキベア
エレキベア
同じみの操作クマね
20220423 01
マイケル
マイケル
起動するとこのようにhtmlフォルダ配下がマウントされていることが分かります。
このフォルダ内のファイルを編集した場合、次回起動以降も残った状態になるのでいろいろ試してみましょう!

WordPressのインストール

マイケル
マイケル
「docker compose up -d」でコンテナを起動したら、
WordPressをインストールしましょう。
初回は「http://localhost:8000」にアクセスすることでインストール画面が表示されます。
20220423 03↑言語の選択
20220423 04↑wordpress情報の入力
20220423 05↑インストール完了
マイケル
マイケル
インストール完了後は、
http://localhost:8000/wp-login.phpで管理画面、
http://localhost:8000でサイトにアクセスできるようになります。
20220423 06
エレキベア
エレキベア
wordpress同じみの画面クマね

DB接続

マイケル
マイケル
WordPressをインストールするとDBも作成されている状態になるので、中身も確認してみましょう。
Macの場合はSequelAceWindowsはA5Mk2といったDBツールから接続することができます!
20220423 02
↑SequelAceでの接続例
エレキベア
エレキベア
wp_から始まるテーブルがいくつも作成されているクマね
マイケル
マイケル
ちなみに「Error establishing a database connection」といったエラーが出て
接続できない場合には、下記あたりを確認してみるとよいでしょう。


・DB名が「wordpress」で設定されているか?
 →wp_config.phpにてデフォルトが「wordpress」で設定されているため、合わせる必要がある。
・別コンテナのvolumeが残っていないか?
 →「docker volume prune」で一旦volumeを削除してみる。

エレキベア
エレキベア
別コンテナのvolumeが残っていても
うまくいかないことがあるクマね

WordPressの基本機能

マイケル
マイケル
ローカル環境ができたところで、WordPressの構成を見ていきましょう!

ディレクトリ構成

マイケル
マイケル
主要となるディレクトリ構成は下記のようになっています!
.
└── html
    ├── wp-admin
    ├── wp-content
    │   ├── languages
    │   ├── plugins
    │   ├── themes
    │   ├── upgrade
    │   └── uploads
    └── wp-includes
マイケル
マイケル
wp-admin配下は管理画面のファイル群
wp-includes配下はWordPressのコアファイルになります。
基本的にこの辺りは開発者が触ることはないでしょう。
(というよりあまり触らない方がいいです。。)
マイケル
マイケル
wp-content配下は更にいくつかディレクトリ階層が分かれていて、それぞれ
plugins->プラグインファイルを格納
themes->テーマファイルを格納
uploads->画像等のコンテンツを格納
といった構成になっています。
エレキベア
エレキベア
開発者が触るのは主にwp-content配下になるわけクマね

テーマとプラグイン

マイケル
マイケル
上記で説明した通り、基本的にWordPressのコアファイルは修正せずに、
代わりにテーマ、プラグインを追加、編集することで
機能の追加やデザイン修正を行います。
それぞれの役割としては下記のようになります。


テーマ
 →主にサイト全体の見た目の定義、それに関する機能の実装
プラグイン
 →主にデータ操作や動作に関しての機能の実装

マイケル
マイケル
どちらもphpファイル、cssファイルを格納してほぼ同じような動作が可能ですが、
プラグインはより独立していて再利用的、そして有効/無効の切り替えができる
といった特徴があります。
エレキベア
エレキベア
どちらもできることはさほど変わらないのクマね
マイケル
マイケル
そして処理を実装する際には、WordPressの基底の処理の間に用意された
フックと呼ばれる処理を定義することで実装することになります。
エレキベア
エレキベア
決められたテンプレートの一部処理を上書きするイメージクマね
Template Methodパターンに近いクマ
マイケル
マイケル
そしてフックにはアクション、フィルタの2種類があり、それぞれ
アクション
 →処理を追加
フィルタ
 →データや処理を変更する

といった役割があります。
詳細は下記のリファレンスを参照してみてください。

プラグイン API/アクションフック一覧 – WordPress Codex

プラグイン API/フィルターフック一覧 – WordPress Codex

エレキベア
エレキベア
かなりの種類のフックが用意されているクマね

テーブル構成

マイケル
マイケル
WordPressのテーブル構成はシンプルで、
下記に定義されている12種類のみとなります。

データベース構造 – WordPress Codex


[テーブル一覧]
・wp_commentmeta

・wp_comments

・wp_links

・wp_options

・wp_postmeta

・wp_posts

・wp_terms

・wp_term_relationships

・wp_term_taxonomy

・wp_usermeta

・wp_users

マイケル
マイケル
この中で主要となるのは

・wp_posts(投稿データ)
・wp_users(ユーザ)
・wp_comments(コメント)

の3種類で、それぞれメタデータを格納する用のテーブルも用意されています。
エレキベア
エレキベア
意外とシンプルなのクマね

リクエストとクエリ

マイケル
マイケル
投稿データの取得は基本的にWP_Queryを使用して取得します。
使い方については下記リファレンスを参照してみてください。

関数リファレンス/WP Query – WordPress Codex

マイケル
マイケル
また、他のデータベースとやり取りをしたり、
任意のクエリを実行するためにwpdbといったクラスも用意されています。

関数リファレンス/wpdb Class – WordPress Codex

エレキベア
エレキベア
DB操作は基本的にこの辺りを使用するクマね

テンプレートとループ

マイケル
マイケル
そして最後に、画面の表示はテンプレートファイルから行っていますが、
こちらはテンプレート階層が決まっており、決められた順番で検索したテンプレートファイルを表示する仕様になっています。

テンプレート階層 – WordPress Codex

エレキベア
エレキベア

category-{id}.php
 →category.php
  →archive.php
   →index.php

のように検索されるクマね
マイケル
マイケル
また、投稿データ分処理を繰り返す際の仕組みとして、ループが用意されています。
こちらは下記のリファレンスを参照ください。

ループ – WordPress Codex

<?php 
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post(); 
		//
		// 投稿がここに表示される
		//
	} // end while
} // end if
?>
マイケル
マイケル
例えば、このような感じで投稿データをループさせることができます!
エレキベア
エレキベア
これはいろいろ役立ちそうクマね

簡単な編集をしてみる

マイケル
マイケル
それでは、概要がざっくり分かったところで
実際にコードを編集してみましょう!

テーマ作成

最小構成のテーマ作成
マイケル
マイケル
まずはテーマ作成から!
最小構成のテーマを作成してみます。
マイケル
マイケル
wp-content/themes配下に任意のディレクトリを作成し、
index.phpstyle.cssを下記内容で作成しましょう!
<?php
Hello Michael!!
/*
Theme Name: 俺のテーマ
Author: まいける
Author URI: https://elekibear.com
Description: テスト用で作ったテーマ
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
マイケル
マイケル
style.cssのコメントにテーマ名等の情報を記載することで
テーマとして認識してくれるようになります!
エレキベア
エレキベア
なんか独特な仕様クマね
20220423 07↑テーマを適用した場合
マイケル
マイケル
作成したテーマを選択するとこのように表示されるはずです!
エレキベア
エレキベア
寂しい画面クマ
子テーマの作成
マイケル
マイケル
実際にデザイン修正を行う場合には、
既存テーマに対してカスタマイズを加えたいという場合がほとんどだと思います。
その場合、子テーマを作成すると、既存テーマをテンプレートとして使用することができます。
エレキベア
エレキベア
子テーマはどんなメリットがあるクマ?
マイケル
マイケル
親テーマを直接カスタマイズすると、テーマをアップグレードした際に修正した部分が消えてしまうんだ。
だけど子テーマを適用して修正することで親テーマの更新が更新されても変更内容が消えないといったメリットがあるよ。
エレキベア
エレキベア
なるほどクマ
既存テーマを修正する時は子テーマを作成する必要があるわけクマね
マイケル
マイケル
試しに、twentytwentytwoのテーマをテンプレートとして
子テーマを作成してみましょう!
wp-content/themes配下にstyle.cssを下記内容で作成します。
/*
Theme Name: My Twenty Twenty-Two
Template: twentytwentytwo
*/

/* 試しにCSSを上書き */
.wp-block-post-title {
    background-color: yellow !important;
    font-weight: 500 !important;
}
.wp-block-columns {
    background-color: blue !important;
}
マイケル
マイケル
Template:にテーマ名を設定することで、テンプレートにすることができます。
その後に続いてcssを修正することで内容が上書きされます。
マイケル
マイケル
あとはfunction.phpを下記内容で作成すれば実装は完了です。
こちらは子テーマのCSSを適用する処理となります。
<?php
// 子テーマのCSSを適用
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
エレキベア
エレキベア
簡単クマ〜〜〜〜
マイケル
マイケル
しかし、このようなスタイルの修正を行っても画面上に反映されない場合があります。
それはブラウザ上で表示するCSSのバージョンが変わっておらずキャッシュが残っているためなので、下記のように実行日時をバージョンに指定することで毎回反映することができます。
// CSSをリロードの度に更新するため、日時をバージョンに設定
function my_update_styles( $styles ) {
    $mtime = filemtime( get_stylesheet_directory() . '/style.css' );
    $styles->default_version = $mtime;
}
add_action( 'wp_default_styles', 'my_update_styles' );
エレキベア
エレキベア
キャッシュ許すまじクマ・・・
マイケル
マイケル
あとは子テーマを管理画面から適用すれば、修正した内容が反映されていることが確認できるはずです!
20220423 08↑一部styleの背景色を変えた例

プラグイン作成

マイケル
マイケル
次はプラグインの作成です!
今回は試しに「ラーメンという文字を美しく表示する」プラグインを作成してみましょう!
エレキベア
エレキベア
(なんだそれはクマ・・・)
マイケル
マイケル
作成するディレクトリが異なるだけで、手順はテーマとほぼ同じです。
wp-content/plugins配下に任意のディレクトリを作成し、
その中にfunction.php、style.cssを下記内容で作成しましょう!
<?php
/*
Plugin Name: ビューティラーメン
Plugin URI: https://elekibear.com
Description: ラーメンを美しくします。
Version: 1.0
Author: まいける
Author URI: https://elekibear.com
License: GPL2
*/

// ラーメンにclassを付与
add_filter('the_content', function($content) {
    return str_replace('ラーメン', '<span class="beauty-ramen">ラーメン</span>', $content);
});

// style.cssを登録
add_action('wp_enqueue_scripts', function() {
    // 管理画面は除く
    if (is_admin()) {
        return;
    }
    $css_url = plugins_url('style.css', __FILE__);
    wp_enqueue_style('beauty-ramen', $css_url);
});
.beauty-ramen {
    font-size: 50px;
    font-family: serif;
    color: deepskyblue;
}
20220423 09↑作成したプラグインが表示される
マイケル
マイケル
これでプラグイン一覧に「ビューティラーメン」が表示されるはず!
こちらを有効化してみましょう。
20220423 10
マイケル
マイケル
あとはこのように記事を投稿してみると・・・
20220423 11↑ラーメンの文字が美しく表示された
マイケル
マイケル
ラーメンの文字が美しく表示されることが確認できました!
以上でプラグインの作成も完了です!
エレキベア
エレキベア
(なんだこれはクマ・・・)

ウィジェットの作成

マイケル
マイケル
それでは最後に、オリジナルのウィジェットを作成してみましょう!
今回は無料テーマのCocoonを適用した状態で新規ウィジェットを作成してみます!

Cocoon – WordPress無料テーマ

エレキベア
エレキベア
Cocoonはこのブログも使用させてもらっているクマ
ウィジェットの追加
マイケル
マイケル
こちらも子テーマに対して修正を加えていきます!
今回は入力したテキストを表示するだけのウィジェットで、
show-text-widget.phpファイルを下記内容で作成しましょう。
<?php

/**
 * テキスト表示ウィジェット
 */
class ShowTextWidget extends WP_Widget {
    /**
     * コンストラクタ
     */
    function __construct()
    {
        parent::__construct(
            'show_text_widget',
            WIDGET_NAME_PREFIX.__( 'テキスト表示', THEME_NAME ),
            array('description' => __( '登録されたテキストを表示するクマ', THEME_NAME ))
        );
    }

    /**
     * ウィジェットの表示
     * @param $args
     * @param $instance DBに保存されているデータ
     */
    function widget($args, $instance)
    {
        // $argsを変数に展開
        extract($args);

        // ウィジェットを出力
        // $before_widget、$after_widget
        // $before_title、$after_titleはargsからの展開値
        // 前後にウィジェットで設定されているタグが出力される
        echo $before_widget;
        if (!empty($instance['title'])) {
            echo $before_title;
            echo $instance['title'];
            echo $after_title;
        }
        // ウィジェットの表示内容を変えたい場合は、このあたりをいじるとよい
        echo $instance['content'];
        echo $after_widget;
    }

    /**
     * 管理画面のウィジェット設定フォームを表示
     * @param $instance DBに保存されているデータ
     */
    function form($instance)
    {
        // 保存済の値を取得
        $title = $instance['title'] ?? 'タイトル';
        $content = $instance['content'] ?? '';

        // 設定フォームを表示
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title') ?>">タイトル:</label>
            <input type="text" class="widefat"
                   id="<?php echo $this->get_field_id('title') ?>"
                   name="<?php echo $this->get_field_name('title') ?>"
                   value="<?php echo esc_attr($title) ?>" />
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('content') ?>">内容:</label>
            <textarea class="widefat"
                      id="<?php echo $this->get_field_id('content') ?>"
                      name="<?php echo $this->get_field_name('content') ?>"
            ><?php echo esc_html($content) ?></textarea>
        </p>
        <?php
    }

    /**
     * 送信されてきたフォームデータを確認、加工して、実際に保存するデータを返す
     * @param $new_instance フォームから送られてきたデータ
     * @param $old_instance DBに保存されているデータ
     * @return array 保存するデータ
     */
    function update($new_instance, $old_instance)
    {
        // サニタイズして保存
        $instance = array();
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['content'] = $new_instance['content'];
        return $instance;
    }
}

// ウィジェット登録
add_action('widgets_init', function() {
    register_widget('ShowTextWidget');
});

マイケル
マイケル
WP_Widgetクラスを継承して各関数をオーバーライドすることで作成することができます。
各関数はそれぞれ

__construct
 →コンストラクタ、ウィジェット名や説明を入力する。
widget
 →ウィジェット表示処理
form
 →管理画面でのウィジェット設定フォーム表示処理
update
 →管理画面で送信したフォームデータを確認、加工する

といった処理になっています。
エレキベア
エレキベア
ウィジェットも決められた処理をそれぞれ実装することで作成するクマね
マイケル
マイケル
あとはこのphpファイルをfunction.phpでインクルードしましょう。
子テーマのディレクトリはget_stylesheet_directoryから取得できるため、下記のように登録することでができます!

// phpファイル読み込み
require_once get_stylesheet_directory().'show-text-widget.php';

マイケル
マイケル
ここまで実装すると下記のようにウィジェット一覧に表示されるはず!
サイドバーに登録してタイトル、内容を入力すると、画面に表示されることも確認できます。
20220423 12↑ウィジェット一覧に表示される
20220423 13↑画面にも表示された
エレキベア
エレキベア
やったクマ〜〜〜〜
補足:ウィジェットエリアの追加
マイケル
マイケル
補足になりますが、サイドバー等のウィジェットエリアも独自に作成することができます。
こちらは下記のようにregister_sidebars関数により登録することができます。

register_sidebars(1,
array(
    'name'=>('まいけるのウィジェット'),
    'id'=>'michael-widget',
    'description'=>('まいけるのウィジェットである'),
    'before_widget'=>'<div>',
    'after_widget'=>'</div>',
    'before_title'=>'<h4>',
    'after_title'=>'</h4>',
));

マイケル
マイケル
これでウィジェットエリアとして選択できるようになっていますが、
表示するには各テンプレートファイルに表示処理を定義する必要があります。
これはdynamic_sidebar関数で登録したウィジェットエリア名を指定することでひょうじすることができます。

      <?php // 作成したウィジェットの表示
      if ( is_page() && is_active_sidebar( 'michael-widget' ) ): ?>
        <?php dynamic_sidebar( 'michael-widget' ); ?>
      <?php endif; ?>

      <header class="article-header entry-header">
        <h1 class="entry-title" itemprop="headline">
          <?php

エレキベア
エレキベア
ウィジェットエリアを表示するには
テンプレートファイルも編集する必要があるクマね

その他機能

マイケル
マイケル
以上でWordPressの触りは完了としますが、
その他に使えそうな機能についても軽く紹介しておきます!

JavaScriptとCSSの管理

マイケル
マイケル
デザイン修正を行う際、JavaScript、CSSを使用すると思いますが、
こちらも自由に登録して使用することができます。
マイケル
マイケル
wp_enqueue_scriptwp_enqueue_styleといった関数を使用することで
各ファイルの出力を行うことができるのでチェックしておきましょう。

関数リファレンス/wp enqueue script – WordPress Codex

関数リファレンス/wp enqueue style – WordPress Codex

エレキベア
エレキベア
JavaScriptが使えるのはありがたいクマ〜〜〜

ショートコードの追加

マイケル
マイケル
投稿記事内に記述して表示するショートコードといった処理を登録することもできます。
こちらはadd_shortcodeという関数を使用して登録することができます。

関数リファレンス/add shortcode – WordPress Codex

エレキベア
エレキベア
これでちょっとした処理やテンプレートを作成することができるクマね

マルチサイト

マイケル
マイケル
それからマルチサイトという機能を用いてWordPressに複数のサイトを追加することができるようです。
こちらも詳細は下記リファレンスを参照してみてください。

マルチサイトのネットワーク管理 – WordPress.org

エレキベア
エレキベア
なんと、そんなことができるのクマね
マイケル
マイケル
しかしこれはいろいろ起きてしまう予感もするね。。
余裕ができたら挑戦してみよう!

おわりに

マイケル
マイケル
というわけで今回はWordPressの環境構築と
基本機能についてでした!
どうだったかな?
エレキベア
エレキベア
最初は構成がいまいちパッとしなかったクマが、
触っていたらイメージは掴めてきたクマ
マイケル
マイケル
これならなんとか調べながらカスタマイズしていけそうだね!
それじゃ次回はこの都会のエレキベアの開発環境をローカルに構築していこう!
エレキベア
エレキベア
楽しみクマ〜〜〜
マイケル
マイケル
それでは今日はこの辺で!
アデュー!!
エレキベア
エレキベア
クマ〜〜〜〜

【ブログ改造計画】WordPressのDocker環境を構築して基本機能を理解する【WordPress】〜完〜

※続きはこちら!

コメント