【ブログ改造計画】WordPressの基本機能とDocker環境の構築について【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:

# コンテナ起動
docker compose up -d

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

# プロセスの確認
docker compose ps

# コンテナ停止
docker compose down

.
└── html
    ├── wp-admin
    ├── wp-content
    │   ├── languages
    │   ├── plugins
    │   ├── themes
    │   ├── upgrade
    │   └── uploads
    └── wp-includes

<?php 
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post(); 
		//
		// 投稿がここに表示される
		//
	} // end while
} // end if
?>

<?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
*/

/*
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;
}

<?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をリロードの度に更新するため、日時をバージョンに設定
function my_update_styles( $styles ) {
    $mtime = filemtime( get_stylesheet_directory() . '/style.css' );
    $styles->default_version = $mtime;
}
add_action( 'wp_default_styles', 'my_update_styles' );

<?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;
}

<?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');
});

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

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

      <?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