wordpress

WordPressのパーマリンクに日付を入れると個別投稿ページ(single.php)として認識されない

はてなブログからWordpressに引っ越しをした際にパーマリンクの構造可能な限り引き継ぎされる様にしようと思い、パーマリンクの設定を

/entry/%year%/%monthnum%/%day%/%hour%%minute%%second%

としたところがすべての始まりだった。まず記事がアーカイブページとして認識されてしまう。具体的にはWordpressのテンプレートでいうところの個別投稿ページのテンプレート(single.php)が利用されずに、アーカイブページのテンプレート(archive.php)が利用されてしまう。
加えて記事ページ表示時に処理を行う様なプラグインを導入しても、そもそも記事ページがアーカイブページとして認識されているのでそのプラグインが正常に動作しない。

いろいろ調べてみたところWordpressのフォーラムで以下の様な投稿を見つけた

ここで行われた修正によって、パーマリンクで確実にユニークネスが維持できる様にしましょうという方針で行われた修正の様であった。つまりは、上で自分が設定した様な年月日時分秒の組み合わせの場合同日同時間に投稿が複数できることは起こり得ることなのでアーカイブページとして判断する方針になった様であった。

一方理由はわかるものの自分としては先の引越し元からのパーマリンクを維持したいという目的もあったので、さて困ったということでいろいろ調べてみたところ以下の様な投稿を見つけた。

行われた修正のジャッジを改めて行ってアーカイブページの判定になっているフラグを下ろし逆に個別投稿として認識される様にフラグを上げるというものと理解したので倣って以下の様にfunction.phpに処理を加えた。

少し手を加えていて

$wp_query->is_singular = true;

というフラグも上げている。リファレンスにある様に、個別の投稿を表示中であるかを判定するためのフラグなのでこちらもtrueにしている。
こうすることでTop 10 – Popular posts plugin for WordPressといったプラグインでも記事表示回数をカウントする処理も動く様になった。

大分調べるのにパワーを使ってしまった。最初何故プラグインが動かないだろうというところからプラグインが出力するJSONの中の記事IDが入っていないことに気づき、プラグインのリポジトリの

を見て、そもそも記事ページと思っていたものがアーカイブページとして表示されていることに気づき、Wordpressのコミュニティーを調べ、5.4.1へのバージョンアップで発生している事象であることを知って、そこからfunction.phpでフラグを定義し直せることを知り、更にsingularというフラグも併せて調整すればよいことに気づいたのでした。

時間はかかったがすっきりした。

WordPressのプラグイン中で外部API等へヘッダにAuthorization入れたHTTPリクエストする

WordPressで独自のプラグインを作成しているときに、そのプラグイン中から外部のAPIなどにHTTPリクエストをする際にWordPressでは以下の様なHTTP APIのヘルパー関数が用意されているのでリクエストを発行できる。

例えばGETリクエストであれば、 wp_remote_get() という関数があるのでこちらを利用すればよい。

外部で公開されているAPIなどで認証のためにリクエストヘッダに Authorization を含める必要がある場合もこの関数の第二引数でヘッダを指定することができるのでそこを指定することで解決できる。

<?php
$token = "(API request token)";
$url = "https://api.hogehoge.jp/v1/bar/123.json";
$response = wp_remote_get($url, array('headers' => array('Authorization' => "Bearer ". $token)));

こうすると以下の様なレスポンスが得られる。

array (size=6)
'headers' =>
object(Requests_Utility_CaseInsensitiveDictionary)[610]
protected 'data' =>
array (size=11)
'server' => string 'nginx/1.4.4'
'date' => string 'Sat, 07 Jan 2017 12:47:42 GMT'
'content-type' => string 'application/json; charset=utf-8'
'status' => string '200 OK'
'x-frame-options' => string 'SAMEORIGIN'
'x-xss-protection' => string '1; mode=block'
'x-content-type-options' => string 'nosniff'
'x-request-id' => string '5f1d6608-8e5f-4fee-b584-90ffb230ece9'
'x-runtime' => string '0.056044'
'body' => string '{.....}'... (length=4209)
'response' =>
array (size=2)
'code' => int 200
'message' => string 'OK' (length=2)
'cookies' =>
array (size=0)
empty
'filename' => null
'http_response' =>
object(WP_HTTP_Requests_Response)[606]
(snip)

レスポンスヘッダを始めとして必要な要素は全て得ることができる。

あとは必要に応じてbodyに含まれる文字列要素を操作すればよい。

WordPressプラグインの開発環境にvccwを利用してみる

WordPressプラグインを作成したくてどの様に環境整えるのがよいのかと調べていたところvccwというVagrantベースでWordPress環境を構築してくれるものをみつけたので試してみた。

vccw.cc

(注記: 2017/1/5 にリンク修正)

といっても、そこまで複雑な手続きがあるわけでもなく既にVagrant(1.8.6以上)が手元の環境に入っていれば、vccwのリポジトリからcloneをして

$ git clone git@github.com:vccw-team/vccw.git

hostsファイルを vagrant up した際に更新してくれるプラグインを入れた上でおもむろに立ち上げる

$ vagrant plugin install vagrant-hostsupdater
$ cd vccw
$ vagrant up

初回起動時にVBoxのダウンロードが行われた後にAnsibleでプロビジョニングが実施されてWordPress, PHP, MySQL etc... と一通り導入がされた後に、http://vccw.dev/ というホスト名でアクセスすると構築されたWordPressにアクセスできる。

公式サイトのリリースされたzipだとPHPなどのバージョンとか少し手前感あるけど、gitリポジトリであれば PHP 7.0.8 がインストールされるのでgitの操作とか慣れている人であれば上の様にgitリポジトリから取得するのがよいのではないだろうか。

f:id:hideack:20170103095713p:plain:w400

過去いろいろ試してみたけれども、整った環境をスムーズに作れる*1のでWordPressのテンプレートだったりプラグインを開発する人に初感としてはお薦め。この環境でプラグインの開発を進めていってみようと思う。

更新(2017/1/5)

正月ボケなのかリンクを誤っていたので修正。それに伴ってサイト上に記載されているPHPのバージョンに関する記載を打ち消し。

大変失礼しました。。。

*1:一点だけつまづいたのがVagrant upした際に何故かSSH接続できずにプロビジョニングの手前で停止していたのだけれども原因はVMのNAT側のネットワークインターフェースが立ち上がっていなかったのであった

WordPressサイトをAMP(Accelerated Mobile Pages)対応する

AMPとは

AMP(Accelerated Mobile Pages)という単語を昨年10月ぐらいから見聞きする様になってきました。

www.ampproject.org

簡潔に言うと、

  • シンプルなシンタックス(AMP HTML)で構成されたページを表示させるため一般的なWebページの表示速度と比較すると高速に表示できる
  • Googletwitter側がAMP HTMLで記述されたページをキャッシュしてくれるため、より高速にページ表示できる

という高速化のための2つの技術的な要素があります。

要は「モバイル端末で素早くコンテンツを表示できる」となるのですが、ユーザ体験としては、地下鉄や電車で移動中に通信環境が一時的に悪くなり通信帯域が細くなった場合であってもストレス無く素早くモバイル端末上でコンテンツを表示できるといったメリットが得られます。ニュースアプリのSmartNewsをご利用の方は「すぐに表示する」をタップしたときに表示されるSmartViewをイメージしていただけるとわかりやすかいもしれません。

また、モバイル経由のGoogle検索結果にも対応サイトを検索結果として反映させていくということもあり特にニュースサイト系を運営されている方には興味がある話題かと思います。

jp.techcrunch.com

WordPressでのAMP対応

WordPressで構築されているサイトの場合、AMPの対応にはプラグインを活用するのが一番手短です。対応するためのプラグインは現に数種が公開されていますが、今回はWordPressの開発元であるAutomatticが提供するプラグインを試してみました。
wordpress.org

このプラグイン自体はAMPの仕様が公開されて以来、公開はされてきたため単にインストールするだけで試せないのかを試みていたのですが、これまでは単にインストールするだけでは出力ができないなど不具合が多く活用が難しかったのですが、今回のバージョンアップ(Ver 0.3.2) でサイトの構築状況問わず比較的スムーズにAMP対応できる様になっている感を受けました。

やること自体はとてもシンプルでWordPressに上記のプラグインをインストールするだけになります。

インストール後、 http://サイトURL/12345/amp といった具合に記事URLの末尾に amp を付与することで該当記事のAMP HTMLを出力できます。

また出力されたAMP HTMLが適切に出力されているかを確認するには、Google Chromehttp://サイトURL/12345/amp#development=1 開いた際に 表示 > 開発/管理 > ディベロッパーコンソール からConsoleを選択し、以下の様に表示されていれば適切なAMP HTMLが出力されていることがわかります。

f:id:hideack:20160313155540p:plain

"AMP validation successful." が表示されていれば正しいAMP HTMLが出力されています。

ただあくまでも提供するのはコンテンツであり、AMPはあくまでも先に書いた様な通信環境等に問わずコンテンツを届けるための手段にすぎないという点を見誤らない様にしていかないといけないのは必ず必要な認識かなと思います。

参考

dockerでWordPressを動かしてみる

同様のエントリは多々公開されていますが、自分のメモとして...。

WordPressを運用しているとそのテンプレートを修正したりという機会も多くなって手元で動かしたいと思うことも多いのでローカルの開発環境を作りたいと思ってboot2dockerを利用してdockerでWordPressを動かすことをやってみました。

boot2docker

https://github.com/boot2docker/osx-installer/releasesインストーラーあるのでこれ入れるだけ

github.com

boot2dockerの設定

☁  ~  boot2docker init
Latest release for github.com/boot2docker/boot2docker is v1.7.1
Downloading boot2docker ISO image...
Success: downloaded https://github.com/boot2docker/boot2docker/releases/download/v1.7.1/boot2docker.iso
to /Users/hideack/.boot2docker/boot2docker.iso
Generating public/private rsa key pair.
Your identification has been saved in /Users/hideack/.ssh/id_boot2docker.
Your public key has been saved in /Users/hideack/.ssh/id_boot2docker.pub.
The key fingerprint is:
59:11:75:cb:a6:11:bd:ba:46:d9:73:fe:42:90:d5:5f hideack@mac.local
The key's randomart image is:
+--[ RSA 2048]----+
|          ooo... |
|           . +o.E|
|          . .o+.o|
|         o  o+. .|
|        S   .=   |
|            + + .|
|           . o + |
|            o . .|
|           .   .o|
+-----------------+
Initialization of virtual machine "boot2docker-vm" complete.
Use `boot2docker up` to start it.

boot2docker起動

☁  ~  boot2docker start
Waiting for VM and Docker daemon to start...
........................oooooooooooooooooo
Started.
Writing /Users/hideack/.boot2docker/certs/boot2docker-vm/ca.pem
Writing /Users/hideack/.boot2docker/certs/boot2docker-vm/cert.pem
Writing /Users/hideack/.boot2docker/certs/boot2docker-vm/key.pem
To connect the Docker client to the Docker daemon, please set:
export DOCKER_TLS_VERIFY=1
export DOCKER_HOST=tcp://192.168.59.103:2376
export DOCKER_CERT_PATH=/Users/hideack/.boot2docker/certs/boot2docker-vm
Or run: `eval "$(boot2docker shellinit)"`

dockerの環境変数を設定してねと書かれているのでそれにしたがって ~/.bashrc なり ~/.zshrc に追記

### Docker
export DOCKER_TLS_VERIFY=1
export DOCKER_HOST=tcp://192.168.59.103:2376
export DOCKER_CERT_PATH=/Users/hideack/.boot2docker/certs/boot2docker-vm

WordPressイメージをダウンロード&起動

続きまして、WordPressのイメージをダウンロードします。

☁  ~  docker pull tutum/wordpress
latest: Pulling from tutum/wordpress
e9e06b06e14c: Pull complete
a82efea989f9: Pull complete
(snip)
047ca869fcbc: Pull complete
6e56521c4625: Pull complete
acac8eca5408: Pull complete
5025a6da41dd: Already exists
Digest: sha256:fdea02dff482eb7df1c206cc2ffc7fafb3a0844b89c91815d2495398af4cb128
Status: Downloaded newer image for tutum/wordpress:latest

ここで満を持してコンテナを起動します。

☁  ~  docker run -d -p 80:80 --name=wordpress tutum/wordpress
4f37784d6f44c754d4f1aa54ed803ec6190396ae9e509d6b3a5e74bd9782464c

起動できているか docker ps コマンドで確認するとWordPressのコンテナのプロセスが起動していることが確認できます。併せてブラウザで確認するための接続先を boot2docker ip で確認。

☁  ~  docker ps
CONTAINER ID        IMAGE               COMMAND             CREATED             STATUS              PORTS                          NAMES
4f37784d6f44        tutum/wordpress     "/run.sh"           7 seconds ago       Up 7 seconds        3306/tcp, 0.0.0.0:80->80/tcp   wordpress
☁  ~  boot2docker ip
192.168.59.103

ブラウザで http://192.168.59.103 を開くと....

f:id:hideack:20150720100535p:plain

無事起動しました。実際にテンプレートのデザインを開発するときはもう一声対応が要りそうなのですが、そちらはまた追って。