docker-composeでWordPressをお試ししてみた記録です。
なんだかんだいってはてなブログいいよねっていう話です。
検証用としてCocoonというテーマとWP Githuber MDプラグインを使いました。
シンタックスハイライトができてなおかつ今に近いデザインということで、
テーマはCocoonを選び、マークダウンを使いたいのでWP Githuber MDというプラグインを導入しました。
環境構築
環境構築用ファイル
何はともあれローカル環境にDocker ComposeでWordPress環境を作ります。
次の2ファイル用意します。
uploads.ini
file_uploads = On upload_max_filesize = 50M post_max_size = 55M
uploads.iniを用意しないとデフォルトで少しのファイルしかアップロードできないため、
悲しいことになります。
docker-compose.yml
version: '3.6' services: db: image: mysql:5.7 container_name: mysql volumes: - db_data:/var/lib/mysql restart: unless-stopped environment: MYSQL_ROOT_PASSWORD: somewordpress MYSQL_DATABASE: wordpress MYSQL_USER: wordpress MYSQL_PASSWORD: wordpress wordpress: depends_on: - db image: wordpress:latest container_name: wordpress ports: - "8000:80" restart: unless-stopped volumes: - ./html:/var/www/html - ./uploads.ini:/usr/local/etc/php/conf.d/uploads.ini environment: WORDPRESS_DB_HOST: db:3306 WORDPRESS_DB_USER: wordpress WORDPRESS_DB_PASSWORD: wordpress WORDPRESS_DB_NAME: wordpress volumes: db_data: {}
そしてこれらを置いたフォルダに移動して
docker-compose up -d
WordPress設定編
localhost:8000にアクセスして
言語設定: 日本語
に設定します。
テーマ
https://wp-cocoon.com/
すごい高機能です。見た目もいい感じだし。おすすめだと思います。
テーマのアップロード時FTPユーザを求められる
wp-config.php
define('FS_METHOD','direct');
マウントしたフォルダが見えるので直接編集して、こいつを先頭に入れてあげます。
コードのシンタックスハイライト&Markdown
WordPressのcodeタグのCSS設定 | ハチアンアーカイブズ
これを入れてみます
以下はカスタマイズの作業メモです。
Cocoonのコード設定
コード ハイライト表示 ソースコードをハイライト表示 行番号表示 ハイライトスタイル atom-one-light WP Githuber MD こちらはデフォルトの設定のままとし、特にこちら側でシンタックスハイライトはしないようにします
Cocoonのヘッダー
キャッチフレーズの配置 ヘッダーボトム
Cocoonのソーシャルメディア
トップシェアボタン トップシェアボタンの表示 メインカラムトップシェアボタンを表示 OFF ボトムシェアボタン Facebook/Line@をはずす カラム数 4列
外観 サイドバー
外観 > サイドバー ウィジェットの追加
その他
停止・削除 Akismet Anti-Spam Hello Dolly
記事移行編
ここからが本番です。
パーマリンク設定
カスタム構造
/entry/%year%/%monthnum%/%day%/%hour%%minute%%second%
注意: このURLは非推奨になったようです。そして5.4.1で動かなくなったとも
えええ、どうすりゃいいの…
構造は必ず %post_id% あるいは %postname% で終了し、各パーマリンクが個々の投稿を指すようにしてください (例 /%year%/%monthnum%/%day%/%postname%/ )。
wordpress 5.4.1 からの障害について | WordPress.org 日本語
これが絶望的にはてなブログからWordPressに移行できない理由です。
旧記事のURLをはてなブログ上で変更することはお勧めできません。
初めてはてなブログで大きな文字使いましたw
インポート
Movable Type・TypePad インポートツール
移行が成功するもコードのインデントがすべて消える…。
const socketio = require('socket.io'); function chat(server) { const sio = socketio.listen(server); sio.on('connection', function(socket) { socket.on('chat-message', function(msg) { console.log('Send message to client'); sio.emit('chat-message', msg + '💛'); }); socket.on("disconnect", function() { }); }); }; module.exports = chat;
↑このような感じになります。
これは手動で直すしかなさそうだ。
170記事程度あるので、これは無理だと判断。←解消法ありました。
このリンクにある通り、movabletype-importerプラグインを改造すれば、大丈夫そう。
PHP詳しくないから知らなかったけど、trim
って空白以外指定できるんですね。
数ある移行記事の中で要点をまとめている素晴らしい記事です。
プラグインのコード読んだけど、こんなに短いんすなーと感心。なんだかんだでPHPは基礎教養な気がしてきたから勉強しよう。
記事のページが開かない問題
WrodPress 5.4.1とCocoon 2.1.5.4で発生
バージョンをさげないとなんでか記事ページではなくアーカイブページに飛ばされるようだ
https://ja.wordpress.org/download/releases/
5.2.6に落としてみる
→OK
こういう問題があると、WPやっぱり大変だなと思う。
はてなフォトライフ問題
画像について、ある意味はてなフォトライフを使い続けられるので、実はメリットかもしれません。
購読ブログを手軽に利用できない問題
これは私が個人的にはてなで行動くしている人のブログを読めないっていう…
単にはてな好きの人の個人的理由です。
まとめ
…というわけでやっぱりはてなブログはいいですよ!
私はこのブログに関しては当面、移行しません。メンテナンスフリーというのがいかに楽か
というのは大事な要素だと思います。
大事なことを書き忘れましたが、ブログの購読もあって、コミュニティみたいなのがあるので、
やっぱりこういうところは素晴らしいと思います。