
マイケル
みなさんこんにちは!
マイケルです!
マイケルです!

エレキベア
こんにちクマ〜〜〜

マイケル
今日からはしばらく、前々から計画していた
ブログ改造計画を進めていこうと思います!
ブログ改造計画を進めていこうと思います!

エレキベア
改造するって言ってたクマね
確かに自分で言うのもなんクマが、今このブログはかなりダサいクマ
確かに自分で言うのもなんクマが、今このブログはかなりダサいクマ

マイケル
直球でいったね・・・
このブログは三年くらい前にWordPressで作ったんだけど、
当時はIT知識も乏しく、勢いで立ち上げたところがあるんだ。
このブログは三年くらい前にWordPressで作ったんだけど、
当時はIT知識も乏しく、勢いで立ち上げたところがあるんだ。

マイケル
そこからずっとこの形式だったからいろいろ気になるところがあってね・・・。
これを機にWordPressを勉強してカスタマイズできるようになっておこうと思ったんだ。
これを機にWordPressを勉強してカスタマイズできるようになっておこうと思ったんだ。

エレキベア
テーマを自由にいじれるようになったら
面白いコンテンツもいろいろ作れるようになるかもしれないクマね
面白いコンテンツもいろいろ作れるようになるかもしれないクマね

マイケル
WordPressを制するものはブログを制す!
というわけで今後の目標は下記の通りだ!
というわけで今後の目標は下記の通りだ!
今後の目標
- WordPressの構成を理解する
- 公開しているブログと同等の開発環境を用意する
- デザインや機能を自由に編集、追加できるようにする

マイケル
開発環境は使い慣れたTypeScriptやStylusも使用して編集できるようにしようと思っているよ!
今回は第一回ということで、WordPressの構成や編集方法を理解する のをメインで進めていきます!
今回は第一回ということで、WordPressの構成や編集方法を理解する のをメインで進めていきます!

エレキベア
楽しみクマ〜〜〜
参考文献

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

エレキベア
確かにWordPress関連の書籍はあまりいい印象がないクマ

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

マイケル
ただ関数リファレンス等の情報等、まだ移行が完了していない項目が多々あるようなので、
現状は関数の仕様等についてはCodexを参照する方がよさそうですね・・・。
現状は関数の仕様等についてはCodexを参照する方がよさそうですね・・・。

エレキベア
ドキュメントもみっちりまとめられているクマね
Docker環境構築

マイケル
WordPressの構成について、実際のファイルを見ながらの方が理解も早いと思うので、
まずはローカルにWordPress環境を構築します。
ここではDockerを使って環境構築していきます。
まずはローカルにWordPress環境を構築します。
ここではDockerを使って環境構築していきます。

マイケル
Dockerの使い方については下記記事にまとめてあるので、
使ったことがない方はこちらも参照してみてください!
使ったことがない方はこちらも参照してみてください!

エレキベア
懐かしいクマ〜〜〜
docker-compose.ymlの記述

マイケル
というわけで、まずはプロジェクトフォルダ配下に
docker-compose.ymlを作成します。
基本的に下記のチュートリアルで紹介されている内容で記述します。
docker-compose.ymlを作成します。
基本的に下記のチュートリアルで紹介されている内容で記述します。
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点になります!
・コンテナ外からもDBに接続できるよう3306ポートを公開
・htmlフォルダ配下を編集できるようマウント
している2点になります!

エレキベア
マウントしないとコンテナ起動の度に
初期化されてしまうからクマね
初期化されてしまうからクマね
コンテナの操作

マイケル
コンテナの操作は下記の通り!
ymlファイルが置いてあるフォルダ配下で実行しましょう。
ymlファイルが置いてあるフォルダ配下で実行しましょう。
# コンテナ起動
docker compose up -d
# コンテナ一覧確認
docker container ls
# プロセスの確認
docker compose ps
# コンテナ停止
docker compose down

エレキベア
同じみの操作クマね


マイケル
起動するとこのようにhtmlフォルダ配下がマウントされていることが分かります。
このフォルダ内のファイルを編集した場合、次回起動以降も残った状態になるのでいろいろ試してみましょう!
このフォルダ内のファイルを編集した場合、次回起動以降も残った状態になるのでいろいろ試してみましょう!
WordPressのインストール

マイケル
「docker compose up -d」でコンテナを起動したら、
WordPressをインストールしましょう。
初回は「http://localhost:8000」にアクセスすることでインストール画面が表示されます。
WordPressをインストールしましょう。
初回は「http://localhost:8000」にアクセスすることでインストール画面が表示されます。




マイケル
インストール完了後は、
http://localhost:8000/wp-login.phpで管理画面、
http://localhost:8000でサイトにアクセスできるようになります。
http://localhost:8000/wp-login.phpで管理画面、
http://localhost:8000でサイトにアクセスできるようになります。


エレキベア
wordpress同じみの画面クマね
DB接続

マイケル
WordPressをインストールするとDBも作成されている状態になるので、中身も確認してみましょう。
Macの場合はSequelAce、WindowsはA5Mk2といったDBツールから接続することができます!
Macの場合はSequelAce、WindowsはA5Mk2といったDBツールから接続することができます!

↑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-includes配下はWordPressのコアファイルになります。
基本的にこの辺りは開発者が触ることはないでしょう。
(というよりあまり触らない方がいいです。。)

マイケル
wp-content配下は更にいくつかディレクトリ階層が分かれていて、それぞれ
plugins->プラグインファイルを格納
themes->テーマファイルを格納
uploads->画像等のコンテンツを格納
といった構成になっています。
plugins->プラグインファイルを格納
themes->テーマファイルを格納
uploads->画像等のコンテンツを格納
といった構成になっています。

エレキベア
開発者が触るのは主にwp-content配下になるわけクマね
テーマとプラグイン

マイケル
上記で説明した通り、基本的にWordPressのコアファイルは修正せずに、
代わりにテーマ、プラグインを追加、編集することで
機能の追加やデザイン修正を行います。
それぞれの役割としては下記のようになります。
代わりにテーマ、プラグインを追加、編集することで
機能の追加やデザイン修正を行います。
それぞれの役割としては下記のようになります。
テーマ
→主にサイト全体の見た目の定義、それに関する機能の実装
プラグイン
→主にデータ操作や動作に関しての機能の実装

マイケル
どちらもphpファイル、cssファイルを格納してほぼ同じような動作が可能ですが、
プラグインはより独立していて再利用的、そして有効/無効の切り替えができる
といった特徴があります。
プラグインはより独立していて再利用的、そして有効/無効の切り替えができる
といった特徴があります。

エレキベア
どちらもできることはさほど変わらないのクマね

マイケル
そして処理を実装する際には、WordPressの基底の処理の間に用意された
フックと呼ばれる処理を定義することで実装することになります。
フックと呼ばれる処理を定義することで実装することになります。

エレキベア
決められたテンプレートの一部処理を上書きするイメージクマね
Template Methodパターンに近いクマ
Template Methodパターンに近いクマ

マイケル
そしてフックにはアクション、フィルタの2種類があり、それぞれ
アクション
→処理を追加
フィルタ
→データや処理を変更する
といった役割があります。
詳細は下記のリファレンスを参照してみてください。
アクション
→処理を追加
フィルタ
→データや処理を変更する
といった役割があります。
詳細は下記のリファレンスを参照してみてください。
プラグイン API/アクションフック一覧 – WordPress Codex
プラグイン API/フィルターフック一覧 – WordPress Codex

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

マイケル
WordPressのテーブル構成はシンプルで、
下記に定義されている12種類のみとなります。
下記に定義されている12種類のみとなります。
[テーブル一覧]
・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_posts(投稿データ)
・wp_users(ユーザ)
・wp_comments(コメント)
の3種類で、それぞれメタデータを格納する用のテーブルも用意されています。

エレキベア
意外とシンプルなのクマね
リクエストとクエリ

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

マイケル
また、他のデータベースとやり取りをしたり、
任意のクエリを実行するためにwpdbといったクラスも用意されています。
任意のクエリを実行するためにwpdbといったクラスも用意されています。
関数リファレンス/wpdb Class – WordPress Codex

エレキベア
DB操作は基本的にこの辺りを使用するクマね
テンプレートとループ

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

エレキベア
category-{id}.php
→category.php
→archive.php
→index.php
のように検索されるクマね

マイケル
また、投稿データ分処理を繰り返す際の仕組みとして、ループが用意されています。
こちらは下記のリファレンスを参照ください。
こちらは下記のリファレンスを参照ください。
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
//
// 投稿がここに表示される
//
} // end while
} // end if
?>

マイケル
例えば、このような感じで投稿データをループさせることができます!

エレキベア
これはいろいろ役立ちそうクマね
簡単な編集をしてみる

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

マイケル
まずはテーマ作成から!
最小構成のテーマを作成してみます。
最小構成のテーマを作成してみます。

マイケル
wp-content/themes配下に任意のディレクトリを作成し、
index.php、style.cssを下記内容で作成しましょう!
index.php、style.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のコメントにテーマ名等の情報を記載することで
テーマとして認識してくれるようになります!
テーマとして認識してくれるようになります!

エレキベア
なんか独特な仕様クマね


マイケル
作成したテーマを選択するとこのように表示されるはずです!

エレキベア
寂しい画面クマ
子テーマの作成

マイケル
実際にデザイン修正を行う場合には、
既存テーマに対してカスタマイズを加えたいという場合がほとんどだと思います。
その場合、子テーマを作成すると、既存テーマをテンプレートとして使用することができます。
既存テーマに対してカスタマイズを加えたいという場合がほとんどだと思います。
その場合、子テーマを作成すると、既存テーマをテンプレートとして使用することができます。

エレキベア
子テーマはどんなメリットがあるクマ?

マイケル
親テーマを直接カスタマイズすると、テーマをアップグレードした際に修正した部分が消えてしまうんだ。
だけど子テーマを適用して修正することで親テーマの更新が更新されても変更内容が消えないといったメリットがあるよ。
だけど子テーマを適用して修正することで親テーマの更新が更新されても変更内容が消えないといったメリットがあるよ。

エレキベア
なるほどクマ
既存テーマを修正する時は子テーマを作成する必要があるわけクマね
既存テーマを修正する時は子テーマを作成する必要があるわけクマね

マイケル
試しに、twentytwentytwoのテーマをテンプレートとして
子テーマを作成してみましょう!
wp-content/themes配下にstyle.cssを下記内容で作成します。
子テーマを作成してみましょう!
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を修正することで内容が上書きされます。
その後に続いてcssを修正することで内容が上書きされます。

マイケル
あとはfunction.phpを下記内容で作成すれば実装は完了です。
こちらは子テーマのCSSを適用する処理となります。
こちらは子テーマの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のバージョンが変わっておらずキャッシュが残っているためなので、下記のように実行日時をバージョンに指定することで毎回反映することができます。
// 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' );

エレキベア
キャッシュ許すまじクマ・・・

マイケル
あとは子テーマを管理画面から適用すれば、修正した内容が反映されていることが確認できるはずです!

プラグイン作成

マイケル
次はプラグインの作成です!
今回は試しに「ラーメンという文字を美しく表示する」プラグインを作成してみましょう!
今回は試しに「ラーメンという文字を美しく表示する」プラグインを作成してみましょう!

エレキベア
(なんだそれはクマ・・・)

マイケル
作成するディレクトリが異なるだけで、手順はテーマとほぼ同じです。
wp-content/plugins配下に任意のディレクトリを作成し、
その中にfunction.php、style.cssを下記内容で作成しましょう!
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;
}


マイケル
これでプラグイン一覧に「ビューティラーメン」が表示されるはず!
こちらを有効化してみましょう。
こちらを有効化してみましょう。


マイケル
あとはこのように記事を投稿してみると・・・


マイケル
ラーメンの文字が美しく表示されることが確認できました!
以上でプラグインの作成も完了です!
以上でプラグインの作成も完了です!

エレキベア
(なんだこれはクマ・・・)
ウィジェットの作成

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

エレキベア
Cocoonはこのブログも使用させてもらっているクマ
ウィジェットの追加

マイケル
こちらも子テーマに対して修正を加えていきます!
今回は入力したテキストを表示するだけのウィジェットで、
show-text-widget.phpファイルを下記内容で作成しましょう。
今回は入力したテキストを表示するだけのウィジェットで、
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
→管理画面で送信したフォームデータを確認、加工する
といった処理になっています。
各関数はそれぞれ
__construct
→コンストラクタ、ウィジェット名や説明を入力する。
widget
→ウィジェット表示処理
form
→管理画面でのウィジェット設定フォーム表示処理
update
→管理画面で送信したフォームデータを確認、加工する
といった処理になっています。

エレキベア
ウィジェットも決められた処理をそれぞれ実装することで作成するクマね

マイケル
あとはこのphpファイルをfunction.phpでインクルードしましょう。
子テーマのディレクトリはget_stylesheet_directoryから取得できるため、下記のように登録することでができます!
子テーマのディレクトリはget_stylesheet_directoryから取得できるため、下記のように登録することでができます!
// phpファイル読み込み
require_once get_stylesheet_directory().'show-text-widget.php';

マイケル
ここまで実装すると下記のようにウィジェット一覧に表示されるはず!
サイドバーに登録してタイトル、内容を入力すると、画面に表示されることも確認できます。
サイドバーに登録してタイトル、内容を入力すると、画面に表示されることも確認できます。



エレキベア
やったクマ〜〜〜〜
補足:ウィジェットエリアの追加

マイケル
補足になりますが、サイドバー等のウィジェットエリアも独自に作成することができます。
こちらは下記のようにregister_sidebars関数により登録することができます。
こちらは下記のように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関数で登録したウィジェットエリア名を指定することでひょうじすることができます。
表示するには各テンプレートファイルに表示処理を定義する必要があります。
これは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_script、wp_enqueue_styleといった関数を使用することで
各ファイルの出力を行うことができるのでチェックしておきましょう。
各ファイルの出力を行うことができるのでチェックしておきましょう。
関数リファレンス/wp enqueue script – WordPress Codex
関数リファレンス/wp enqueue style – WordPress Codex

エレキベア
JavaScriptが使えるのはありがたいクマ〜〜〜
ショートコードの追加

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

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

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

エレキベア
なんと、そんなことができるのクマね

マイケル
しかしこれはいろいろ起きてしまう予感もするね。。
余裕ができたら挑戦してみよう!
余裕ができたら挑戦してみよう!
おわりに

マイケル
というわけで今回はWordPressの環境構築と
基本機能についてでした!
どうだったかな?
基本機能についてでした!
どうだったかな?

エレキベア
最初は構成がいまいちパッとしなかったクマが、
触っていたらイメージは掴めてきたクマ
触っていたらイメージは掴めてきたクマ

マイケル
これならなんとか調べながらカスタマイズしていけそうだね!
それじゃ次回はこの都会のエレキベアの開発環境をローカルに構築していこう!
それじゃ次回はこの都会のエレキベアの開発環境をローカルに構築していこう!

エレキベア
楽しみクマ〜〜〜

マイケル
それでは今日はこの辺で!
アデュー!!
アデュー!!

エレキベア
クマ〜〜〜〜
【ブログ改造計画】WordPressの基本機能とDocker環境の構築について【WordPress】〜完〜
※続きはこちら!
コメント