はりうすブログ (のすけのメモ)

湘南にある小さな会社 代表 ”のすけ”のブログです

KUSANAGI@Conohaでオブジェクトストレージ設定のベストプラクティス

こんにちは、のすけです。

KUSANAGIを利用する理由として、今まで利用していたサーバーが遅いので
変えたいという動機が多いかと思います。

しかしながら、前回紹介して方法だと、WordPressKUSANAGIに移行する場合
既存のメディアライブラリの画像などが上手く認識されないなどの問題が出てきました。

hollywis.hatenablog.com


他の方法を模索したところ、別の手法を見つけました。

ConoHaオブジェクトストレージをマウントしてWordPressでのメディア保存先にする | サイト制作覚書

ただ、こちらの手法ですとディスクのマウントに失敗する事が多いため

あれこれと試し、最適な方法を見つけました。

まず、手順通り cloudfuseを入れます。

cloudfuseを入れる

yum -y install \
    libcurl libcurl-devel \
    fuse* fuse fuse-devel fuse-libs \
    libxml2 libxml2-devel openssl-devel \
    gcc gcc-c++ make git curl

git clone https://github.com/redbo/cloudfuse.git

cloudfuseというディレクトリができています。

cd cloudfuse
.configure

jsonのエラーが出たのでjson-c-develをインストール

yum -y install json-c-devel
.configure

make
make install

cd ../
rm -rf cloudfuse

ホームディレクトリ以下に .cloudfuse というテキストファイルを作成する

cd
nano .cloudfuse

内容

username=APIユーザ名
tenant=テナント名
password=APIパスワード
authurl=https://identity.tyo2.conoha.io/v2.0  (Identity ServiceのURL)
verify_ssl=True

Ctl(controlY)+X Y Enter
で保存します。

マウントテスト

cloudfuseを使ってマウントテストします。とりあえず /mntにマウントします。

cloudfuse /mnt

df -h

f:id:hollywis:20181018163900p:plain

大丈夫なようなら次に進みます。もし問題がある場合は「.cloudfuse」の設置値に問題があるので修正します。

自動マウント

それでは次に重要な自動マウント設定をやります。

私はここの検証にかなりの時間を使ってしまった。

最初は手順通り /etc/fstab を使って設定したのですがうまく自動マウントされなくてハマってしまいました。

その他、crontabの@rebootで、再起動後のスクリプトでcloudfuseコマンドを打ったりしたのですが、特定のユーザアカウントでは参照できるが
別のアカウントではドライブが参照できないなど、色々と罠に合いました。

結果的に、最初の「/etc/fstab」に設定を入れるのが最適だと判断しました。

ダメだった方法(crontab)

crontabの起動時に一度だけ実行される設定を追加してみました。
crontabに以下を追加

crontab -e

以下を最後の行に追記(xxxxxxのところはご自分のConohaAPIの設定値を入れてください)

@reboot /usr/local/bin/cloudfuse -o nonempty -o username=gncuxxxxxxx,tenant=gnctxxxxxxxx,password=xxxxxxxxx,authurl=https://identity.tyo2.conoha.io/v2.0,verify_ssl=True /home/kusanagi/rsel_terakoya/DocumentRoot/wp-content/uploads

結果、これでは特定のユーザしかディスクが参照できずダメでした。mountのオプション指定でなんとかなるのかもしれませんが、kusanagi
やnginxのユーザのアクセス権など混乱するので、結果的に諦めました。

/etc/fstabとは

OSを起動したときに、この/etc/fstabファイルが参照されます。そうするとそこに書かれている設定値でファイルシステムをマウントします。

例:

# cat /etc/fstab
/dev/hda1 / ext2 defaults 1 1


・1列目:デバイスファイル名
・2列目:マウント場所
・3列目:ファイルシステムの種類(ext2,ext3など)
・4列目:オプション
・5列目:dumpでバックアップするかしないか。(0 or 1) ext2ext3は1を指定する。
・6列目:システム起動時にファイルシステムチェック(fsckチェック)する順番を指定 (0,1,2) 0の場合はチェックしない 。ルートファイルシステムは1にしないといけない。

cloudfuseを/etc/fstabに設定数する

という事で /ect/fstabを使っていきました

# cd /home/kusanagi/( kusanagi_provision_name )/DocumentRoot/wp-content/

kusanagi_provision_nameにはKUSANAGIをセットアップ下際のプロジビジョン名を入れます

次にupulodsに変わるマウントポイントとなるディレクトリを作ります。(ex: cos)

# mkdir cos

# vi /ect/fstab 

一番下の行に次を追加します

/usr/local/bin/cloudfuse /home/kusanagi/( kusanagi_provision_name )/DocumentRoot/wp-content/cos fuse username=gncuxxxxxxxx,tenant=gnctxxxxxxxx,password=xxxxxxxxx,authurl=https://identity.tyo2.conoha.io/v2.0,verify_ssl=True,auto,_netdev,defaults,umask=001,allow_other      0 0

説明:cloudfuseでcosをマウントします。

usernameやtenant,passwoed,authurl, verify_sslは.configureと一緒ですね.

あとは、autoでmount -aで自動マウントするように。_netdevでネットワーク接続語にマウントを実行するオプションを指定

重要なのは,umaskで001を指定する事で,chmodの776と同じくなります。003でも良いかもしれません。

設定したら、うまくいくか確認します。

mount -a

何も表示されなければokです。

dfコマンドで、マウントを確認します。

df -h


よければ再起動して、テストします。

reboot

再起動後、ログインしてdfで再度確認します。

df -h

こんな感じでマウントされて入ればOKです。
f:id:hollywis:20181029150329p:plain


WordPressのメディアの参照先を変える

このままでは、「uploads」を参照してしまうので、作成した「cos」を参照するように変更する必要があります。

管理画面にログインし、URLを「/wp-admin」
から
「/wp-admin/options.php」に移動します。

するとWordPressのオプション設定画面にいくので
以下の設定を入れます。

WP options設定

upload_path wp-content/cos

upload_url_path https://object-storage.tyo2.conoha.io/v1/nc_(テナントID)

※upload_url_pathについては環境によって違うかもしれません。Cyberduckにアップロードしたファイルを選択して右クリックした際に、「URLをコピー」をクリックして取得したURLの最後のファイル名を除いたURLを設定します。

おまけ Cyberduckにアップしたファイルが参照できない場合

自分のPCのconoha-ojsをインストールします。

GitHub - hironobu-s/conoha-ojs: CLI-tool for ConoHa Object Storage


インストール後、認証して

conoha-ojs auth -u "gncuxxxxx" -p "xxxx" -t "xxxxxxx" -a "https://identity.tyo2.conoha.io/v2.0"

公開したいディレクトリを公開設定します
例:2017と2018を公開させる

conoha-ojs post -r ".r:*" 2017
conoha-ojs post -r ".r:*" 2018

ConoHaのKUSANAGIで追加ディスクやオブジェクトストレージを設定する

こんにちは、のすけです。
前回、conohaで高速WordPress実行環境であるKUSANAGIを動かす記事を書きました。

hollywis.hatenablog.com

とても速くて快適なのですが、1つ問題があります。

それはディスク容量です。初期設定でルートドライブがSSD50GBになっており
多少、心もとないのが実情です。

そこで、cohohaのサービスを使ってその問題を解決します。

方法は2パターン

  1. 追加ディスクを購入してマウントする
  1. オブジェクトストレージを使う

それではざっくりと順番に説明していきます。

追加ディスク

conohaには追加ディスクと呼ばれるSSDを追加で利用する機能があります。

2018年10月現在 200GBだと 2,500 円/月 ( 3.5 円/ 時間 )で利用できます。

また、500GBだと4,500 円/月 ( 6.3 円/ 時間 )で利用できます。

作成方法

追加SSDの設定方法|ConoHa VPSサポート

VPSの「ディスク」メニューから追加することができます。

f:id:hollywis:20181011151256p:plain

「新規ディスク」を選んで、名前を適当につけて「追加」を押すだけです。
ちなみに保存したディスクイメージも利用できるようです。

そして、ディスクの画面から任意のVPSに接続させます。「接続先」の項目が未接続になっていると思いますので、そこを任意のVPSを選んであげます。

そうすると、VPSから認識可能になります。

追加ディスクのマウント

パーティションを初期化します

parted -s -a optimal /dev/vdb -- mklabel msdos mkpart primary ext4 1 -1

ファイルシステムを作成します(この例ではext4)

mkfs.ext4 /dev/vdb1

マウント先のディレクトリを作成します(ここでは/home/kusanagi/dataにマウントするものとします)

cd /home/kusanagi/
mkdir data

ここで、マウント先を/home/kusanagi/DocumentRoot/wp-content/uploadsみたいな感じに¥にすれば、ファイルのアップ先を追加ディスクにすることもできそうです。
(未検証)

マウントを実行します

mount /dev/vdb1 /home/kusanagi/data


確認します。

df -h

次のような結果になってれば成功です。

/dev/vdb1             197G   60M  187G   1% /home/kusanagi/data

オブジェクトストレージ利用

オブジェクトストレージとは

ConoHaのオブジェクトストレージは、インターネット経由で使用できるオブジェクトストレージサービスです。
容量無制限、転送量無制限、可用性が高いストレージサービスを、わかりやすい価格体系で利用できます。ConoHaのVPSサービスから利用することはもちろんですが、ConoHaを 利用していなくても利用することができ、APIを経由してウェブ上のどこからでもデータを保存、取得することができます。

また、ConoHaオブジェクトストレージは、一般的なオブジェクトストレージの機能を満たしつつ、ConoHaのVPSからも簡単に利用でき、コントロールパネルが共通なため管理が簡単で、決済などもまとめることができます。

AmazonAWSのS3みたいなやつですね。違いとしてはデータ転送に課金されないのでConoHaの方がお得です。


オブジェクトストレージに適したデータは

  • 画像ファイル
  • 動画ファイル
  • バックアップファイル

なので、まさにWordPressのアップロードデータをオブジェクトストレージに突っ込んであげればいい感じになると予測できます。

ちなみに適していないデータは

オブジェクトストレージに適していないデータ

  • データベース(SQLiteのような1ファイルに書き出すものや、RDBMSのデータファイル)
  • リアルタイムに書き込みのあるログファイル
  • 頻繁に更新のあるキャッシュファイル

では設定していきましょう。

Conoha APIの有効化

まずVPSの「API」メニューからConohaのAPIを有効にします。

そうすると、テナント情報、エンドポイントが書かれていると思います。

あとで利用するので覚えておきます。

WordPressプラグイン「ConoHa Object Sync」を使う

有志の方がプラグインを作ってくれていますので、ありがたく利用させていただきます。

WordPressの管理画面からメディアを追加すると、自動的にオブジェクトストレージにアップロードを行います。オブジェクトストレージは容量無制限なため、空き容量を気にすること無くメディアファイルを扱うことができます。

また、このプラグインはメディアファイルのURLを変更し、オブジェクトストレージから直接配信するように設定します。これにより、WordPressを運用しているサーバに負荷をかけずに、メディアファイルを配信することができます

WordPressの管理画面から新規追加で「ConoHa Object Sync」で検索してインストール&有効化します。

設定値

ConoHa Object Syncの設定画面で設定を入れていきます。

ここでかなり悩んだのですが、次のように入れると正しく動きました。

APIアカウント名:テナント情報のテナント名を入れる
APIパスワード:設定したパスワードを入れる
テナントID:テナント情報の長いIDを入れる
Auth URL:API情報のエンドポイントの「Identity Service」のURLを入れる
リージョン:「Identity Service」のURLについてる「tyo2」みたいなのを入れる
サービス名:「Object Storage Service」と入れる
コンテナ名:任意(URLに利用される)

追加設定

KUSANAGIの初期状態だと、ファイルがアップロードできませんでした。


アップロードしよとすると「最大アップロードサイズ: 0 B」になっていました。

そこでWordPressのアップロード可能サイズを変更します

php

vi /etc/hhvm/php.ini

次のように変更

upload_max_filesize = 400M 
post_max_size = 512M 
memory_limit = 512M 
hhvm.enable_zend_ini_compat = false

nginx系ファイル
(xxxxはkusanagiでプロヴィジョニングした名前)

vi /etc/nginx/nginx.conf 
vi /etc/nginx/conf.d/xxxx_http.conf 
vi /etc/nginx/conf.d/xxxx_ssl.conf

次のように変更

client_max_body_size     400M;

最後にKUSANGI(dbとかnginxとか)をリスタートして設定を反映させます。

kusanagi restart

そしてwordpressからアップロードしてみると次のようなURLでアップされました。

https://object-storage.tyo2.conoha.io/v1/nc_[apiのID]/[コンテナ名]/[年]-[月]-[ファイル名]

結構読み込み速度も速いのでこのURL直でもいいと思います。もし速度が必要ならCDNを間に入れればより速くなるのではと思います。

オブジェクトストレージはアクセス量の課金はないので安心ですね。いやぁ便利便利。

オブジェクトストレージは3TBまでサイズを変えることができるので、最初は100GB(450円/月)で設定して利用して行けば良いかと思う。

追加ディスクよりこっちの方が圧倒的に安いので、こっちの方が良いかと思います。

おまけ KUSANAGIドメインの再設定方法

ちなみに、設定中にKUSANAGIドメインを再設定したくなったので方法をメモしておきます

ドメイン設定変更(IPやドメインを再設定)

kusanagi setting --fqdn xxx.xx.xx.xx
--fqdnの後ろにIPやドメインを設定

そして、KUSANAGIを再起動させると反映されます。

kusanagi restart
Done.


続き
hollywis.hatenablog.com

高速で動くWordPress環境を探して辿り着いた「KUSANAGI」に変えたら超速いし・安いし・データの転送容量制限ないしでかなり良かった

こんにちは、のすけです。

WordPress構築用のサーバーは各社から色々なものが出ていて

WordPress おすすめ サーバー」なんて検索すると色々出てきます。


例えば有名どころだと、エックスサーバーwpx
なんかは昔か速いと評判だったりします。実際速いです。

そのほか、速そうなのか「高速を追求したレンタルサーバー」と謳うヘテムル

Lite Speed(なにそれ?)を使っているmixhostは速そうな感じです。

それでも、配信データ量の制限があったり、値段がちょっと高いという点があって躊躇します。
あとNodeサーバーも立てたいなとか。。


そんな時出会ったのが、こちら【Conoha】です。

クラウドホスティングサービス Conoha VPS

レンタルサーバーも一応提供されていて
Conoha WINGは国内最速を謳っていたりします。が今回はVPSの方です。

公式キャラクターは「このはちゃん」

どうでもいいですねw。

で、このConohaですがなんと転送量に課金がありません。基本的にはいくらでも使えます。

f:id:hollywis:20181004161117p:plain

さらに!!高速にWordPressが動作するサーバーイメージ「KUSANAGI for ConoHa」を提供しています。

このKUSANAGI

WordPressの実行時間3ミリ秒台、秒間1000リクエストをページキャッシュ非使用で実現する世界最高速クラスのWordPress実行環境です

とのことで、かなり速そうな感じ。

早速使ってみました。

結果から言うと、Conohaの月900円の1Gプラン(推奨は4Gプランにもかかわらず)でかなり高速でした。

f:id:hollywis:20181004153655p:plain

3秒と言うのはスマホで表示されるまでの時間なので、サーバ応答時間はもっと速くて

0.029秒とかなり高速な結果が出ています。


Conohaでサーバを立てる

基本的にはKUSANAGIの使い方|VPSならConoHaKUSANAGIの使い方を参考にすれば問題ないはずです。

Conohaのサイトに行ってアカウントを作成し、KUSANAGIのサーバイメージでサーバを1台立てます。

f:id:hollywis:20181004143712p:plain

こちらConohaから「お申し込み」に進めばOKです。

KUSANAGI for ConoHaはメモリ4GB以上が推奨らしいのですが、それは高いし、あとあと変更できるので、まずはメモリ1Gでコア数2の月900円のプランでサーバーを構築しました。

f:id:hollywis:20181004144453p:plain

あとでスペックを変更できるのもConohaの良いところです。サイトが重くなったらスケールアップできるので安心です。

そしたら、あとはrootパスワードを入れて「追加」したら数分でサーバーが出来上がりました。

f:id:hollywis:20181004145036p:plain


ネームタグは適当に変更しています。クラウドなので、ここにWordPress以外にも色々なサーバを追加することができます。

KUSANAGIの初期設定をする

このサーバーイメージは、KUSANAGIはちょっと自分で初期設定をする必要があります。

この状態だとまだWordPressは入っていません。

f:id:hollywis:20181004154324p:plain

管理画面のコンソールからrootでログインして

f:id:hollywis:20181004154328p:plain

KUSANAGI」の文字が出ればログインできています。

KUSANAGIの初期設定方法にしたがって初期設定をしていけばOKです。

最初にOSのアップデートで数分掛かります。

そのあと 次のコマンドを打つと初期設定が始まります。

# kusanagi init

WebサーバはApacheではなく高速な「nginx」を利用し、php実行環境は高速な「HHVM」を使いました。

URLの設定をする

下記リンクの手順通りに設定を進めます。

KUSANAGIのプロビジョニング – KUSANAGI

URL設定の方法にはKUSANAGIでは専用のやり方があって、その方法でプロビジョニングというものを行います。

次のように例えばkusanagi_testという名前で登録すると、そのディレクトリが作れられてWordPressがインストールされます。

# kusanagi provision kusanagi_test

注意することは、ホスト名(FQDN) を指定する場面で、とりあえずVPSに割り振られたグローバルIPを入れた方が良いです。
このホスト名で接続しにいく必要があるので、ここで適当なホスト名を入れると先に進めなくなってしまいます。
(そん場合はプロビジョニングをやり直す)

またLet’s EncryptSSL証明書を発行するフェーズがありますがグローバルIPを設定している場合には、できませんので、Enterを2回押してスキップします。

あとで、グローバルIPをやめてドメイン設定をやり直したい場合には、またこのプロビジョニングをすれば良いのではないかと思います(※未確認)

WordPressのインストール

下記リンクの手順通りに設定を進めます。

KUSANAGIのWordPressのインストール方法

f:id:hollywis:20181004162030p:plain

普通のWordPressのインストール手順ですね。

KUSANAGIの設定

WordPressをインストールし終わり、管理画面にログインすると、自動的にKUSANAGIプラグインが入っているのがわかるかと思います。

KUSANAGI専用プラグイン – KUSANAGI

f:id:hollywis:20181004160257p:plain

キャッシュを有効にするには次のコマンドを実行します。

# kusanagi bcache on

実行結果

[root@xx-xx-xx-xx]# kusanagi bcache on
onにします。
完了しました。
[root@xx-xx-xx-xx]# kusanagi fcache on
onにします。
Nginxを使用します。
完了しました。

自動的にWebサーバがNginxになるようです。

表示してみる

そして表示するとキャッシュが効いた状態で良い感じの速度が出ました!!

キャッシュがなくても速い、キャッシュを効かすともっと速い。

おまけ

なお、このConohaですが「このはモード」なる機能が存在しています。

見ていただきましょう。

f:id:hollywis:20181004161353p:plain

背景にConoHaのイメージキャラクターの『美雲このは』を登場させるそうです。

設定方法は「アカウント設定」から「表示設定」項目で「このはモード」を選択するだけです。

f:id:hollywis:20181004161610p:plain

ConoHaのコンパネ毎日見るの飽きた・・・最近女の子としゃべってない・・・といったお客様は是非このはモードにしてコンパネに活力を与えましょう。

真面目に何やってるんでしょう、GMOさん。。


次回は、WordPressの画像などのアップロード先にConohaの「オブジェクトストレージ」を使った話をします。

WordPressのテーマにサムネイルをサポートさせる

こんにちは、のすけです。

自分でWordPressテーマを作ると必要な機能のみ入れることができ本当に便利なのですが。

デフォルトの状態では投稿のサムネイルがサポートされていません。

そこでサムネイルをサポートする方法を記載します。

投稿のサムネイルサポートする

サムネイルをサポーとさせるには、functions.phpに設定を書き込みます。

add_theme_support( 'post-thumbnails' ); 


投稿サムネイル - WordPress Codex 日本語版

そうすると、投稿の編集画面で「アイキャッチ画像」メタボックスが投稿・固定ページ編集画面に表示されます。

f:id:hollywis:20180927144052p:plain

もし表示されなければ、画面右上の表示オプションの中で「アイキャッチ画像」を有効にします。

一部の投稿タイプのみサムネイルをサポートする方法

例えばカスタム投稿タイプ「blog」と「kouza」にのみにサムネイルをサポートさせるためには、

add_theme_support( 'post-thumbnails', array( 'blog' ) );          // blogのみ
add_theme_support( 'post-thumbnails', array( 'kouza' ) );           // kouzaのみ


関数リファレンス/add theme support - WordPress Codex 日本語版

テーマのテンプレートへの反映方法

サムネイルをサポートすると、次の関数を使うことで、投稿中にサムネイルが表示することができます。

// 投稿に投稿サムネイルが割り当てられているかチェックします。
if ( has_post_thumbnail() ) {
	the_post_thumbnail();
} 
the_content();

WordPressループの中で例えば、本文を表示するthe_content()の前で設定するなどできます。
has_post_thumbnail()でサムネイルが設定されているかを確認し、the_post_thumbnail()で実際に表示しています。

表示サイズを変える方法

次のように任意のサイズに変更することができます。

the_post_thumbnail( 'thumbnail' );        // サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail( 'medium' );           // 中サイズ   (デフォルト 300px x 300px :最大値)
the_post_thumbnail( 'large' );            // 大サイズ   (デフォルト 640px x 640px :最大値)
the_post_thumbnail( 'full' );             // フルサイズ (アップロードした画像の元サイズ)
the_post_thumbnail( array( 100, 100 ) );  // 他のサイズ

テンプレートタグ/the post thumbnail - WordPress Codex 日本語版より

CSSクラスを設定する方法

Bootstrapなどでは画像用のスタイル指定などがあるため、任意のクラスを付けたいということはよくあります。

下記はクラス「img-thumbnail」を追加する例です。

<?php the_post_thumbnail( 'thumbnail', array( 'class' => 'img-thumbnail' ) ); ?>

ではまた!

WordPressテーマをCSSテンプレートでカスタムメニューをいい感じにデザインする

こんにちは、のすけです。

はい。今まで様々な投稿関係のテクニカルなことを紹介してきましたが、今回は一番わかりやすいデザインを触っていきたいと思います。

デザインはCSSを弄って色々とやっていくわけですが、如何せん設定項目が多く、CSSも膨大な数を書かなくてはいけないためとても大変です。


そこで巷ではCSSフレームワークというものが用意されています。

有名な例では「Bootstrap」「Foundation」などがあります。

今回は「Bootstrap」を導入する例を紹介したいと思います。なお、バージョンは最新のBootstrap4を扱います。


Bootstrap4はいわゆるよく利用されているBootstrap3の後継バージョンで、ついにフラットデザインになったものです。
利用されすぎて「Bootstrap臭さ」と呼ばれるものがあったBootstrap3ですが、4になっていくらか軽減されていると思います。

Bootstrapを読み込む

今回はheader.phpに書き込む手法でいきたいと思います。また読み込み方法もCDNからデフォルトのBootstrapを読み込むもっとも簡単な方法を選びました。

CSS

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


JS

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

そのほか、独自のCSSの読み込み方法を利用して、functions.phpで読み込む方法は、こちらの記事で紹介しています。

hollywis.hatenablog.com

テーマフォルダ内にCSSやJSを置く方法もありますが、ルートフォルダ直下にassetsフォルダを作ってそこに配置していきます。

ヘッダーを作る

header.phpを編集していきます。
オリジナルで作った最小テーマである「anothersky」の分割バージョンを使っていきます。

hollywis.hatenablog.com

hollywis.hatenablog.com


元のheader.php

<!DOCTYPE html><!--html宣言-->
<html lang="ja"><!--日本語指定-->
<head>
  <meta charset="UTF-8"><!--エンコード:UTF-8指定 -->
  <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定-->
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し-->
  <?php wp_head(); ?><!--headの追加コード -->
</head>
<body>

  <header class="site-header">
    <h1><?php bloginfo('name'); ?></h1>
    ヘッダーをここに記述
  </header>
  <div class="access"><!--メニュー-->
  <?php wp_nav_menu(); ?>
  </div>
  <div class="container">
    <div class="wrap">

とてもシンプルなheader.phpです。本当に最低限の記述しかありません。
ここにBootstrapを適用していきます。たいていのCSSフレームワークにはだいたいヘッダー用のデザインがあらかじめ用意されています。

ナビゲーションメニューをつける

Wordpressの管理画面から[外観]-[カスタマイズ]をクリックし、次に[メニュー]からmenu
という名前でメニューを追加しておきます。

f:id:hollywis:20180924155809p:plain

そしてソースコードを見てみると次のような構成になっています。

<div class="access">
  <div class="menu-memu-container">
    <ul id="menu-memu" class="menu">
      <li id="menu-item-77" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-77"><a href="http://localhost:8888/localtest">ホーム</a></li>
      <li id="menu-item-58" class="menu-item menu-item-type-post_type_archive menu-item-object-blog menu-item-58"><a href="http://localhost:8888/localtest/?post_type=blog">blogs 一覧</a></li>
    </ul>
  </div>
</div>

containerのclassが「menu-memu-container」、menuのclassが「menu」です。


対して、BootstrapのNavbarは次のような形を期待しています。幸い大まかな構成は一緒ですが、クラス名などのズレがあります。

Navbar · Bootstrap

<nav class="navbar navbar-expand-lg bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

そのため、次のようにheader.phpを書き換えていきます。

<!DOCTYPE html><!--html宣言-->
<html lang="ja"><!--日本語指定-->
<head>
  <meta charset="UTF-8"><!--エンコード:UTF-8指定 -->
  <title><?php wp_title(' | ', true, 'right'); bloginfo('name'); ?></title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0 "><!--スマホ用:viewportの設定-->
  <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--CSSの呼び出し-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script><!--Bootstrap CSSの呼び出し-->
  <!--Bootstrap JSの呼び出し-->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  <?php wp_head(); ?><!--headの追加コード -->
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#"><?php bloginfo('name'); ?></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <?php
  $defaults = array(
    'menu_class'      => 'navbar-nav',
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse'
  );
  wp_nav_menu( $defaults );
  ?>
</nav>
  <div class="container">
    <div class="wrap">

まず、body要素下の最後の2行を残して全て内容を全て削除し、代わりにBootstrapのコードを入れ込みます。

次に、Webサイトのタイトルに当たる部分にを埋め込みます。

そして、最後にメニューのdiv要素をWordpPressのメニューテンプレートであるwp_nav_menu()に置き換えてきます。
その際に、クラスの名前が都合が悪いため次のように初期設定を書き換えます。

  • 'menu_class' => 'navbar-nav'
  • 'container' => 'div'

  • 'container_class' => 'collapse navbar-collapse'

li要素とaタグにクラスを付けるためにfunctions.phpに追記

li要素にnav-itemをそして、現在表示しているページにはactiveを、さらにli要素下のaタグにもクラスを付ける必要があるのでfunctions.phpに以下のコードを記述する。

function my_wp_nav_menu_add_bootstrap_class( $classes, $item ) {
    
    if ( in_array("current-menu-item", $classes, true) ){
    	$classes[] = "active nav-item";
    }
	else{
	  $classes[] = "nav-item";
	}
    return $classes;
}
add_filter( 'nav_menu_css_class', 'my_wp_nav_menu_add_bootstrap_class', 10, 2 );

add_filter('walker_nav_menu_start_el', 'add_class_on_link', 10, 4);
 function add_class_on_link($item_output, $item){
 return preg_replace('/(<a.*?)/', '$1' . " class='nav-link'", $item_output);
}

active,nav-itemはnav_menu_css_classをフックして、任意のクラスを追加させている。
nav-link'はwalker_nav_menu_start_elのフックで、正規表現で特定して追加させています。

nav-linkの付け方はこちらを参考にさせていただきました。
WordPressのカスタムメニューのaタグに任意のクラスを付ける:メモ – WEBUTUBUTU

まとめ

結構面倒ですね。

BootstrapにはSass版もあり、そちらを使えばテーマの色を一括で変えるなどもできるのですが、それは次の機会にやってみたいと思います。
今回はデフォルトのBootstrap4をCSSとJSファイルそのままで利用していきました。

liタグにクラスを付ける方法に、管理画面の外観のカスタマイズで、メニューの項目にそれぞれCSSクラスを記述できるのですが、それだとメニューを追加するたびにいちいちクラスを追加しなくてはいけないため、その手法はやめました。
BootstrapとWordPressの使用をすり合わせるためには、headerのテンプレートだけでなく、functions.phpもいじらなくてはいけないため、なかなか難儀な作業です。

カスタムフィールドを使いこなしてWordPressを「単なるブログ」から「使えるシステム」に進化させる

こんにちは、のすけです。

WordPressって言うてもブログでしょ。」

いや、違います!!

カスタムフィールドがあります!!

ということで

今回は、あなたのWordPressを単なるブログからシステムに進化させる方法をこっそり教えたいと思います。

本文じゃ色々と足りない

WordPressにある「投稿」では次のような項目があると思います。

  • タイトル
  • 本文
  • カテゴリ
  • タグ

でもこれだけだと正直、記事の投稿くらいにしか使えません。

もっと、例えば音楽アーティストのページだったら
イベント情報を出したくて

  • 「ライブハウスの名前」
  • 「住所」
  • 「時間」
  • 「曲目」

なんて情報の入力項目が欲しいかもしれません。

もっと、例えば、不動産会社のページなら

  • 「部屋の名前」
  • 「所在地」
  • 「最寄駅」
  • 「築年月」
  • 「間取り」
  • 「価格」

なんて情報の入力項目が欲しいかもしれません。

でも、通常のままだと全部「本文」に入れるしかありません。

もっと項目を増やせたらいいのに。。。

=> 増やせます。カスタムフィールドで!

しかも、住所に情報を入れたら自動的にGoogleMapで表示させるとか、いちいちテーブルタグを書かないで表を作るなども自由自在です。

カスタムフィールドとは

実はWordPress標準の機能に「カスタムフィールド」と言う設定欄があります。投稿や固定ページの新規作成画面で、表示オプションのカスタムフィールドにチェックを入れると利用できるようになります。

f:id:hollywis:20180917202559p:plain
投稿や固定ページの編集画面で上の方の「表示オプション」を開くとカスタムフィールドを出せる

カスタムフィールドの情報には「名前」と「値」の組み合わせがあり、自由な情報を登録できます!!
例えば「住所」の情報を増やしたければ、「名前」に"住所"と入れて、「値」に実際の住所情報を入れます。
すると、データベースのwp_postmetaテーブルに「meta_key:名前、meta_value:値」としてデータが保存されます。

f:id:hollywis:20180917202832p:plain

このカスタムフィールドのデータを利用することで、記事情報から取得したいデータだけを取得して任意の処理ができるようになります。
まるで業務システムのように。

ただし、実はこのカスタムフィールド標準だと、いちいち投稿や固定ページを投稿するたびに項目を追加しなくてはならないため


システムがわからない人が投稿時に使うには現実的ではありません。

そこで次の便利なプラグインを使います。

頼れる相棒「Advanced Custom Fields」さん

f:id:hollywis:20180917222745p:plain

標準のままだと、いちいち項目を追加の必要がありましたが、

この「Advanced Custom Fields」を利用するともう全て解決です。

最初から必要な項目は全てセッティングできます。

また、テキストデータだけでなく、画像やファイルをアップロードする項目すら作れます。もう便利すぎます。


実際に使ってみましょう

使ってみる

では実際にサンプルとして、オンライン教育サイトの講座のページを作ってみたいと思います。

管理画面の「プラグイン」ー「新規追加」から「Advanced Custom Fields」を検索してインストールし有効化させます。


1. カスタム投稿タイプ「kouza」を作ります。

あらかじめカスタム投稿タイプを追加するプラグイン「CPT UI」で「kouza」を作っておきます。

ここでわからないぞ!という方は、こちらの記事を参考にどうぞ。

WordPressアーカイブページをカスタマイズ。カスタム投稿タイプも対応します。 - hollywis's diary (はりうすブログ)



2. 「カスタムフィールド」を新規追加
次に、「Advanced Custom Fields」さんを有効化すると管理画面に「カスタムフィールド」という項目ができているので、「新規追加」を押します。

そして、タイトルに「講座のフィールドグループ」と入力して

次のフィールドを入力することにします。

フィールドを入力
  • 講座名(kozamei):フィールドタイプは「テキスト」
  • 講師名(koushi):フィールドタイプは「テキスト」
  • 動画URL(douga):フィールドタイプは「oEmbet」
  • テキストPDF(text_pdf):フィールドタイプは「ファイル」

f:id:hollywis:20180917210506p:plain
このように順々にフィールドを細かく設定しながら追加できる

なお、長いテキストデータなら「Wysiwygエディタ」、選択項目なら「セレクトボックス」、日付なら「デイトピッカー」、住所なら「Google Map」がオススメです。

ルールを登録

「このフィールドグループを表示する条件」を、「投稿タイプ」「等しい」「講座」にします。

f:id:hollywis:20180917211654p:plain

これを設定することで投稿タイプが「講座」の記事を作成時に、上記フィールドが設定できるようになります。

位置を追加

Settingsの「位置」を「高(タイトルの後)」にしましょう。

f:id:hollywis:20180917211708p:plain

こうすることで、投稿画面のタイトルのすぐ下にフィールドが表示されるため設定忘れを防げます。

3. カスタム投稿タイプで投稿してみる

作成した「講座」から新規追加を押すと編集画面が表示されます。いつもの画面と違って、設定したフィールドが表示されているのがわかります。

f:id:hollywis:20180917212050p:plain

ここに、実際に値を入れてみるとこうなります。(松下幸之助さんの動画を使わせていただきましたorz)

f:id:hollywis:20180917212710p:plain


このように、任意の値を設定できるようになり、もはやブログからは脱却できたことが分かるかと思います。

しかし、実はまだ終わりではありません。このまま記事を「プレビュー」させてみると分かるのですが、フィールドで設定した情報は表示されません。

カスタムフィールドを表示させる投稿テンプレートを作る必要があります。

カスタムフィールドを表示させるテンプレートを作る

では作っていきます。

まず、投稿タイプ「kouza」ですので、single.phpをコピーして「single-kouza.php」を作ります。

そして、「タイトル」と「本文」だけが表示されるようになっているテンプレートにカスタムフィールドを表示させる関数を書いていきます。

WordPressループの中に次のコードを入れてみましょう。

<div>
  <?php the_meta(); ?>
</div>


するとこのような感じで表示されます。

ページ表示例
f:id:hollywis:20180917213913p:plain

そう、the_meta() はカスタムフィールド情報をテキストデータとしてリストで表示するものになります。

これで実際に値が入っているのは確認できました。しかし、動画のURLをテキストデータで表示されても内容が見れません。PDFファイルに至っては謎のIDだけでした。

そのため、ひとつひとつデータを取り出して、コンテンツを適切に表示させていく必要があります。

コンテンツをフィールドごとに適切に表示

get_post_meta()関数などがWordPressで用意されていますが、「Advanced Custom Fields」独自のテンプレートタグが便利ですので、こちらを使っていきます。

  • the_field():指定したフィールドを表示する
  • get_field():指定したフィールドの値を取得する


WordPressループの中に次のコードを入れます。

<div>
    <?php if( get_field('kozamei') ): ?>
    <h2>講座名:「<?php the_field('kozamei'); ?></h2>
    <?php endif; ?>
    
    <?php if( get_field('koushi') ): ?>
    <p>講師:<?php the_field('koushi'); ?></p>
    <?php endif; ?>
  
    <div class="embed-container">
	<?php the_field('douga'); ?>
    </div>

    <?php 
      $file = get_field('text_pdf');
      if( $file ): ?>
	<a href="<?php echo $file['url']; ?>"><?php echo $file['filename']; ?></a>
    <?php endif; ?>

</div>

すると、動画は動画に、ファイルはリンクとして適切に表示されました。

ページ表示例
f:id:hollywis:20180917222626p:plain

説明
カスタムフィールドの値は必ずしも入っているとは限りません、そのためget_field()を使ってif文で存在するか判別しています。省略していますが実際にはdougaやtext_pdfも存在判別をした方がより安全です。

ファイルを取得する場合にはフィールドを取得した後、urlなどの情報は配列に入っているためURLを$file['url']で、 ファイル名を$file['filename'] で取得しています。

その他のフィールドタイプの例などもACFの公式ページで紹介されていますので、そちらを参考にコードを書くと良いかと思います。

www.advancedcustomfields.com

f:id:hollywis:20180917223742p:plain


まとめ

今回はカスタムフィールドを使うことでWordPressをブログ以上のシステムに進化させる方法を紹介しました。

プラグインである「Advanced Custom Fields」を使うことで、様々なタイプのフィールドを追加させることができるようになりました。

また、カスタム投稿タイプと併用することで、専用の投稿ページ&表示ページを自由に作成することができるため、様々な要望に答えられるシステムを構築することができます。

いやぁ、「Advanced Custom Fields」さん本当に便利ですね!

次回は独自のテーマをCSSフレームワークを利用して、それっぽくデザインする方法を紹介したいと思います。
では。

WordPress任意のCSSやJavascriptを読み込む方法 (Bootstrapなど)

こんにちは、のすけです。

WordPressを弄っていると、独自のCSSJavascriptを使って整えたくなってきますよね。

そんなCSSやJSを作成して変更する方法を紹介します。(デザインについては特に触れません)

簡単だけど諸刃の剣な方法

一番簡単な手法としては、管理画面の[外観] - [CSS編集]からCSSについては編集できます。

f:id:hollywis:20180913145314p:plain
テーマのCSS編集

この画面では、CSSの変更結果を微調整しながらカキカキできるのが利点で、とても便利なのです。

f:id:hollywis:20180913145317p:plain
プレビューを確認しながら変更できるので便利ではあります

その他の手法として、[外観]-[テーマ編集]からテーマの「style.css」に追記数する手法もあります。

f:id:hollywis:20180913150137p:plain
style.cssはテーマ用なので別ファイルで管理したい

しかし、問題もあります。
このCSSはテーマの設定値として紐づいているので、テーマを変えると消えてしまいますし
テーマのアップデートで消えてしまったこともあります。
また、テーマ編集については、そもそもこの画面から編集するのは危険です。間違ってからのテキストデータがPOSTされた場合全て消えてしまう可能性もあります。(一度ありました。)


膨大な時間を掛けて構築したCSSが消えてしまうと、もう呆然となってしまいます。。


そのため、Web一般で用いられているように、外部ファイルとして保存されたCSSJavascriptを利用して編集する手法を取りたいと思います。

ローカルにソースファイルを保持できるので、万が一サーバー上のファイルが消えても復旧可能なので、やはりこっちの方がしっくりきます。
またbootstrapなどの任意のCSSフレームワークを入れたいなんて要望もあるかと思います。

概要

やり方の概要としては「wp enqueue script」関数を利用して、登録を行います。
header.phpに直接書くやり方ももちろんありますが、WordPressの機能を利用して登録していくのが一般的なようです。
関数リファレンス/wp enqueue script - WordPress Codex 日本語版

書き方

以下のように、functions.phpの最後の行に追記します。なお、編集する際にはコピーを取って戻せるようにしてください。
間違って記述するとサイトが動かなくなります。

書き方例:

/**
 * スクリプトとスタイルを正しくエンキューする方法
 */
function load_my_scripts1() {
	wp_enqueue_style( 'mystyle1', 'url' );
	wp_enqueue_script( 'mystyle2', 'url', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'load_my_scripts1' );

``url``にCSSJavascriptを記述します。

ローカルスクリプトの URL は絶対に直接書き込むべきではない。代わりに plugins_url (プラグイン向け) と get_template_directory_uri (テーマ向け) を使って適切な URL を取得する。リモートのアセットはプロトコルに影響されない URL で指定できる。

とあるため、プラグインフォルダの下のスクリプトやテーマフォルダのスクリプトの場合にはURLを直接書き込まないようにしましょう。

具体的なやり方を次から説明するので、参考にしてください。

CSSJavascriptの置き場所

テーマを世界中に公開するのでなければ、基本的にどこに置いてもいいと思います。管理しやすい方法が良いと思いますので。

私は、Web一般で用いられている作法で置いた方がわかりやすいと思っています。

wordpressのルートディレクトリの下に「assets」フォルダを作成してその下に「cssディレクトリ、「js」ディレクトリを新規に作り、それぞれCSSJavascriptを放り込んでいます。

例えば、CSSフレームワークbootstrapのcssとjsを適用したい場合には、ダウンロードしたソースを、次のように作成したディレクトリに入れます。

f:id:hollywis:20180913152218p:plain

置いたスクリプトWordPressで読み込むように登録する

上記方法で、スクリプトを置いただけではまだ読み込まれません。

次の登録を行います。上で説明したようにwp_enqueue_scriptsを使います。

それではfunctions.phpに書いてみましょう。(必ずファイルのバックアップを取ること)

function load_bootstrap() {
	wp_enqueue_style( 'bootstrap-css', '/assets/css/bootstrap.min.css' );
	wp_enqueue_script( 'bootstrap-js', '/assets/js/bootstrap.min.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'load_bootstrap' );

そしてサイトを表示させます。

さらに、本当に読み込まれているか「ChromeのDeveloperツールなど」で確認すると。

f:id:hollywis:20180913154950p:plain

ちゃんとassetsディレクトリの下にあるCSSとJSが読み込まれているのが確認できます。

これでデザインも自由自在ですね!

今回はbootstrapを用いましたが、もちろん同じように自作したCSSやJSを設置して反映させることもできます。
またfunctions.phpのURLのところにCDNのURLを入れても読み込ませることができます。

それではまた。