Wordpress でショートコードを使ってデータベースの情報を取得する方法

• 概要
• 環境
• functions.php
• ショートコード
• 動作確認
• おまけ: wordpress のテーブル一覧
• 最後に
• 参考サイト

概要

ショートコードを使えばサーバサイドにある functions.php を呼び出せるのでデータベースにある情報を表示することができます

環境

• macOS 14.6.1
• MySQL 9.0
• Wordpress 6.6.1
• docker 27.2.0

functions.php

function get_first_user_by_db() {
    global $wpdb;
    $result = $wpdb->get_results("SELECT user_login FROM wp_users LIMIT 1");
    foreach($result as $row) {
        return $row->user_login;
    }
}

add_shortcode ( 'first_user_name', 'get_first_user_by_db' );

ショートコード

[first_user_name]

動作確認

mysql> select user_login from wp_users limit 1;
+------------+
| user_login |
+------------+
| test       |
+------------+
1 row in set (0.00 sec)

おまけ: wordpress のテーブル一覧

mysql> show tables;
+-----------------------+
| Tables_in_wordpress   |
+-----------------------+
| wp_commentmeta        |
| wp_comments           |
| wp_links              |
| wp_options            |
| wp_postmeta           |
| wp_posts              |
| wp_term_relationships |
| wp_term_taxonomy      |
| wp_termmeta           |
| wp_terms              |
| wp_usermeta           |
| wp_users              |
+-----------------------+
12 rows in set (0.00 sec)

最後に

functions.php を使えばデータベースにある情報もサイトに表示することができます
他のデータベースにアクセスしたい場合は wordpress で使用しているユーザが他のデータベースにアクセスできるように権限設定する必要があります

functions.php は正直何でもできるのでこれだけ極めても Wordpress を使いこなせるようになると思います

参考サイト

• https://stackoverflow.com/questions/21089659/how-can-i-perform-a-select-from-my-functions-php-in-wordpress

Wordpress のショートコードに引数を設定する方法

• 概要
• 環境
• functions.php
• 動作確認
• 最後に
• 参考サイト

概要

$atts を受取れるようにします

環境

• macOS 14.6.1
• MySQL 9.0
• Wordpress 6.6.1
• docker 27.2.0

functions.php

function say($atts) {
    /** デフォルト値の設定 
     * shortcode_atts を使うことでショートコードにkey,valueな属性を付与することができる
     * 以下では message という属性を定義している
     * ショートコード側の引数で message=hoge という引数が与えられるとそれが優先される
     * extract は与えられた連想配列から変数を生成するPHPの組み込み関数
     */
    extract(shortcode_atts(array(
      'message' => 'Hello'), $atts));
    return $message;
}

add_shortcode( 'say_something', 'say' );

動作確認

ショートコードを生成し message という引数の値をいろいろと変えてみましょう

最後に

Wordpress のショートコード用の関数で引数を受け取る方法を紹介しました
これで同じようなコンポーネントは functions.php で定義しデータだけを変数で与えることでコンポーネントの使い回しができるようになります

ショートコード用の関数には他にも content という引数が受け取れます
これは [sc]content[/sc] という感じでショートコードのタグで囲われたコンテンツの内容を受け取ることができます

参考サイト

• https://www.kerenor.jp/shortcode-basic-usage/

Wordpress のショートコード (functions.php) 超入門

• 概要
• 環境
• functions.php の編集
• ショートコードの追加
• 動作確認
• 最後に

概要

Wordpress にショートコードという PHP の関数を呼び出す機能があるらしいので使ってみました

環境

• macOS 14.6.1
• MySQL 9.0
• Wordpress 6.6.1
• docker 27.2.0

functions.php の編集

今回はテーマ配下の functions.php を使います

• vim wordpress/wp-content/themes/twentytwentyfour/functions.php

/** original functions **/
function say() {
    return 'Hello!!';
}

add_shortcode( 'say_hello', 'say' );

add_shortcode を使って追加できます
add_action ではないので注意です

ショートコードの追加

ポストを編集しショートコードを追加します
[say_hello] と記載します

動作確認

保存しプレビューを表示してみましょう

ちゃんと return の内容が反映されていることが確認できます
スタイルなど当てていないので左端にあります

最後に

Wordpress のショートコードに入門してみました
js や css と違いサーバサイド側のデータを表示したいときに使えるかなと思います

docker で wordpress

• 概要
• 環境
• compose.yaml
• 起動
• 動作確認
• 最後に
• 参考サイト

概要

たぶんこれが一番簡単です

環境

• macOS 14.6.1
• MySQL 9.0
• Wordpress 6.6.1
• docker 27.2.0

compose.yaml

services:
   db:
     image: mysql:9.0
     volumes:
       - db_data:/var/lib/mysql
     restart: always
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress
       MYSQL_USER: wordpress
       MYSQL_PASSWORD: wordpress

   wordpress:
     depends_on:
       - db
     image: wordpress:6.6.1
     volumes:
       - ./wordpress:/var/www/html
     ports:
       - "8000:80"
     restart: always
     environment:
       WORDPRESS_DB_HOST: db:3306
       WORDPRESS_DB_USER: wordpress
       WORDPRESS_DB_PASSWORD: wordpress
volumes:
    db_data:

compose.yaml と同じ wordpress ディレクトリを作成しておきましょう

起動

• docker compose up -d

[+] Running 33/2
 ✔ wordpress Pulled                                                                                                                                                   41.3s 
 ✔ db Pulled                                                                                                                                                          65.8s 
[+] Running 4/4
 ✔ Network wordpress_default        Created                                                                                                                            0.0s 
 ✔ Volume "wordpress_db_data"       Created                                                                                                                            0.0s 
 ✔ Container wordpress-db-1         Started                                                                                                                            0.5s 
 ✔ Container wordpress-wordpress-1  Started

動作確認

localhost:8000 にアクセスすると wordpress の設定画面に遷移します

最後に

mysql のパスワードはテストなので適当です
プロダクションで使う場合はちゃんとしたパスワードにしましょう

参考サイト

• https://docs.docker.jp/compose/wordpress.html

Windows11 に Wordpress をインストールする

• 概要
• 環境
• 1. PHP のインストール
• 2. nginx のインストール
• 3. MySQL のインストール
  • 3.1 wordpress 用データベースの作成
• 4 Wordpress のダウンロード
  • 4.1 wp-config.php の編集
• 動作確認
• 最後に

概要

Windows11 上に wsl なしで wordpress を構築する流れを紹介します

環境

• Windows11
• Wordpress 6.6.1

1. PHP のインストール

こちら

2. nginx のインストール

こちら

3. MySQL のインストール

これはインストーラがあるのでインストーラを使うと簡単です
ここでアーキテクチャなどを指定してインストーラをダウンロードします

基本は指示に従えば OK です
Workspace などは自由にインストールしてください
最低限コマンドラインインタフェースがあればいいかなと思います

3.1 wordpress 用データベースの作成

作成しましょう
名前は何でも OK です
専用のユーザを作ってもいいですがこの記事では localhost でしか使わないので root ユーザで進めます

なおデータベース名は「wordpress」として進めます

4 Wordpress のダウンロード

ここからダウンロードします
執筆時点では wordpress-6.6.1-ja.zip でした

ダウンロードした wordpress を展開し C:\nginx\html\wordpress に配置します

4.1 wp-config.php の編集

C:\nginx\html\wordpress\wp-config-sample.php があるのでこれを wp-config.php にリネームなりコピーして作成します

そして接続先データベースの設定を行います
以下はデータベースの設定部分のみ抜粋しているので設定ファイル内の該当部分を探して設定してください

• vim wp-config.php

define( 'DB_NAME', 'wordpress' ); 
define( 'DB_USER', 'root' ); 
define( 'DB_PASSWORD', 'xxxxxxxx' );
define( 'DB_HOST', 'localhost' );
define( 'DB_CHARSET', 'utf8mb4' );

動作確認

nginx と cgi サーバを起動します
コマンドプロンプトで以下を実行します

cd c:\nginx
start nginx
cd c:\php
start php-cgi -b 127.0.0.1:9000

これで localhost/wordpress/wp-admin にアクセスすると wordpress の初期設定画面にアクセスできるので設定を進めれば OK です

最後に

wordpress にインストーラはないので nginx 配下に配置することで動作します
最低限必要なコンポーネント (php, nginx, mysql) がいくつかあるのでそれらのインストールと設定もしっかりしましょう

今回の手順ではすべてのコンポーネントを Windows11 上にインストールしましたが面倒であれば WSL2 + docker で簡単に構築できるのでその方法でも OK です