DockerでWordPress

WordPressを入れて設定までやってみる

DockerでWordPress

あまり得意ではないのですが、WordPressをdockerでやってみました

まずは環境を作りましょう

WordpPressというフォルダーに環境を作ります

WordPressのファイル構成

wordpress
  compose.yaml
  Dockerfile
  +--html(最初は作りません。設定する中で自動的にできます)
     +--wp-admin
     +--wp-content

compose.yamlやDockerfileはWordPress環境のものです。実行を進める中で/htmlフォルダーができてきます。最初にこのフォルダーがあると英語版で始まってしまうので注意です。

設定ファイル

compose.yaml

services:
  db:
    image: mariadb:10.7
    environment:
      MARIADB_ROOT_PASSWORD: rootpass
      MARIADB_DATABASE: wordpress
      MARIADB_USER: wordpress
      MARIADB_PASSWORD: wordpress
    volumes:
      - db-data:/var/lib/mysql
  phpmyadmin:
    image: phpmyadmin:5.2
    depends_on:
      - db
    environment:
      PMA_HOST: db
    ports:
      - "8080:80"
    volumes:
      - phpmyadmin-data:/sessions
  wordpress:
    image: wordpress:6.6
    depends_on:
      - db
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
    ports:
      - "8000:80"
    volumes:
      - ./html:/var/www/html
volumes:
  db-data:
  phpmyadmin-data:

３つのサービスを宣言します。１つ目がmariaDBでサービス名「db」で作りました。rootとwordpress用のID,PASSWORDを宣言します。linuxの/var/lib/mysqlにデータファイルができます。portはありません。

２つ目は、phpmyadminです。必須ではありませんが、テーブルを確認したりBACKUP用に入れておきます。接続するのはサービスdbです。portは8080にし、ID,PASSはあえて宣言していません。PMA_USERやPMA_PASSを入れると自動ログインになりますが、逆にログアウトできなくなります。

３つ目は、wordpressです。portは8000です。linuxの/var/www/htmlにwordpressのソースが展開されますが、windows側のカレントの下の/htmlにそのファイルが同期されます。なので、動作は少し遅くなります。この同期を止めておいて、ときどきcpするという手法もあります。

各データベースデータ等はコンテナのlinux上に保存されるのと同時にdockerのvolumesにも残ります。このボリュームを消してしまうとデータは消えます。phpmyadminでエクスポートしておけばいいと思います

Dockerfile

FROM php:8.0-apache
RUN apt-get update && apt-get install -y libonig-dev && docker-php-ext-install pdo_mysql

wordpressを動かすのに必要なphpのライブラリーがあればここで入れておきます。

コンテナを起動

コンテナ起動

docker compose up -d

pullしてコンテナを作っていきます

コンテナの中に３つのサービスが入りました

固定ページの設定

それでは、wordpressの初期設定を起動します。ブラウザを起動して「localhost:8000」と入力します。2023のテーマを使ってサンプルを作るところまでやってみます。

コンテナ起動

localhost:8000

自動的に初期化が走り、まず言語の選択がでます。htmlフォルダーを作ってあると選択ができません。

最初英語なので日本語に変更します

続いて、必要事項の入力です

タイトル、ユーザー名、パスワード、メールアドレスを入れます

インストール作業で/htmlやデータベースが設定されます

今入れたID,PASSでログインします

ダッシュボードが表示されます

一般的な設定をしていきます

キャッチフレーズの設定

日付形式などを設定

どれでも構いませんが、今回は投稿名にしました

外観のテーマを選びます

毎年テーマが追加されるので2024が最新ですが、2023に変えてみます

2023です

続いて、外観、デザイン

スタイルでフォントなどを指定できます

たとえばマリーゴールドにしてみます

では見た目を確認しましょう

localhost:8000が表示され、今回の設定で最初の画面が開きます

固定ページの一覧が確認できます

投稿の一覧も確認できます

右上のアカウントを押すとアカウントの確認ができます

最初の画面が投稿画面になっています。サンプルの最初の投稿が入っています

さて、とりあえずWordPressを入れるだけならば、ここまでで終了です

WordPressの設定のサンプル

せっかくなので、もう少し設定を触ってみようという方だけ、ここから下を実行してください

デザインのサンプルではなく、WordPressではこんな設定があるよというサンプルです

wordpressの設定

管理画面に入るには、そのurlの/wp-adminに行きます

ID,PASSWORD入力画面になったら入力します

では、初期は終わったので、実際の投稿を入れていきます。まずサンプルを消します

消えました

固定ページも消します

消して、新規固定ページを追加する

タイトルを入れます

適当に入れます

内容を入れていきます

左上のアイコンでブロックツールに切り替えます

画像を入れましょう

画像をUPLOADします

画像を選びます

ブロックを選びます

代替テキストを入れます

下書き保存します

固定ページ一覧を見ましょう

固定ページの一覧です

リンクをクリックして

aboutにしましょう

いよいよ公開です

公開してよろしいですか

固定ページを表示します

固定ページを表示しました

投稿ページの設定

投稿を新規に追加します

投稿メッセージを入れていきます

サンプルのデータです

下書き保存しておきます

投稿名でリンクができてしまいました

書き換えます

見出しを指定します

場所を調整しないといけませんね

ブロックで移動して内容を確定します

アイキャッチ画像を指定します

すでにUPLOADしてあればそれを使いますが、ない場合はローカルから転送します

データを選択して、代替えテキストを入れます

アイキャッチを確定します

プレビューで確認します

確認できました

カテゴリーを設定します

新規カテゴリーを設定します

未分類を外します

お知らせの中身を設定します

スラッグというurlに使用する言葉を決めておきます

もう一つ、撮影会も入れました

もう一つ、その他も入れました

カテゴリーの一覧です

公開します

オーバーレイを調整してみます

画像の大きさの調整をしてみます

保存してみます

確認してみましょう

テンプレートの余分な部分などを削ります

固定ページの

header部分を修正

テンプレートを修正

消します

タイトルを修正

footer部分も消します

削除します

ようやくできました

こんな風にさわることができます

テンプレートを自分で作ればもっと自分好みにできますが、それはほかの人にお任せします。(;_;)