WordPress雑記帳 ITかあさん

ITかあさん

Google Cloud Platformでわずか3分でWordPressを立ち上げてみる

Google Cloud Platform 1年無料だからとりあえずWordPressを立ち上げてみるぞ!


AWSやMicrosoft Azureは使ってきましたが、Google Cloud Platform 略してGCPは使ったことがありませんでした。たまたまネットの広告で、今なら300$分、1年間フリープランで使えるよ!とのことなので、「無料?じゃあ試してみようかしら?」主婦根性まるだしでGCPをお試しでつかってみました。

正直、自分はインフラ専門ではないので、「ちゃっちゃと何かアプリケーションがデプロイできる環境になれば嬉しい。しかも安ければ最高」っていうくらいゆるいカンジでしか理解してないので、GCPとAWSどっちがいいの??といった、GCPってなんですか?という疑問はこちらのリンクを参照してください。

私の方はさくさくWordPressをインストして、ブラウザからアクセスできる状態を試してみたいと思います。

Google Cloud Platform 1年無料だからとりあえずWordPressを立ち上げてみるぞ!

Cloud LauncherからWordPressと検索し、「WordPress Google Click to Deploy」を選択してください。

(この他にも色々とLauncherにWordPressがあるんですが、ドキュメントがすくなくて、WordPress Google Click to Deployしか試してません。デフォルトでSSLが使えたり、マルチサイトに対応していたり、色々あるみたい)

あとで変更できますが、Zoneはasia-east1-aにしました。(なるべく近いところがいいよね)

メールアドレスや、マシンサイズの設定をしました。マシンサイズはテストなのでmicroで一番小さいサイズにしました。

ページ下の「デプロイ」を押すだけで構築されます

1分くらいでデプロイされます。ページ右カラムにデプロイされたサイトURLやWordPressのログインユーザー、パスワード、MySQLのrootパスワードも記載されているので、WordPress運用するにあたっての基本的な情報はそろっていますね。

Visit WordPress Siteでサイトにアクセスすると英語版ではありますが、WordPressのあのページが立ち上がっているのがわかりますね。

プラグイン、テンプレートなどは管理画面にログインして、よしなに変更してください。

以上、駆け足ですが、Google Cloud PlatformでWordPressの環境構築でした!

実運用はまだしてませんが、ミニマムなWordPressサイト構築ならAzureよりは全然安い、といったところですが、情報がAWS何かとくらべて圧倒的に少ないのでちょっと苦労するかも。

無料のうちに色々テストして遊んでみようっと。

WordPressのテストデータベースと本番環境データベースを分ける

WordPressのテストデータベースと本番環境データベースを分ける


CPIのレンタルサーバーに移転した話は前回のブログの通りなのですが、このCPIレンタルサーバー、テスト環境と本番環境の2つが予め用意されているんですね。

テストURLの例

http://(ユーザーアカウント).smartrelease.jp/

WordPressのWordPressのwp-config.phpにDBを複数記述する

CPIのレンタルサーバーだとテストサーバーからSmartReleaseというツールを使って本番環境にデプロイしていくのですが、何も設定しないと本番環境とテスト環境のデータベースは一緒なので、データベースを2つ用意してあげて、wp-config.phpにホストによってデータベースを切り替えられるように設定してあげればOKです。

wp-config.phpに記述するのが正しいフローなのかどうかは不明ですが、取り急ぎDBをHOSTで切り替える手段として。

所要時間わずか5分!Microsoft AzureでWordPress on Dockerが使える!

Microsoft AzureでWordPress on Dockerが使える!

docker_wordpress

ローカルの開発環境はDockerでWordPressイメージですって?じゃあ本番環境ももちろんDockerですよね?

開発環境と本番環境で環境の差分はつきもの。だったら最初から環境が全く同じ、Docker で開発してるのなら検証サーバーも本番サーバーもDockerで環境統一した方が楽じゃない?ってなことでMicrosoft AzureでDockerを入れて、WordPressのイメージも突っ込んでみました。所要時間はなんと5分ほど。このブログ記事書いてる方がよっぽど時間かかっちゃったよ。

まずはMicrosoft Azureのクラシックサーバーに Dockerをインストールするところから

スクリーンショット 2017-05-07 23.50.48

Docker on Ubuntu Serverを今回は導入しました。

スクリーンショット 2017-05-07 23.51.06

デプロイモデルはクラシックのみ対応しているようです。

スクリーンショット 2017-05-07 23.55.19

価格レベルやリソースグループ 認証方式や初期ユーザを設定して作成します

スクリーンショット 2017-05-07 23.55.31

はい、Dockerのクラウド環境はひとまずこれだけ。あとはSSHで接続してコマンドラインでDockerにWordPressイメージを追加しましょう

SSHよりクラウドサーバにアクセス

SSHから作成したAzure のサーバーにアクセスします。

WordPressより先にMySQLコンテナを追加

DBの名称、ユーザ名 パスワードを設定します。

$ docker run –name wordpress-mysql -e MYSQL_ROOT_PASSWORD=xxxx -e MYSQL_USER=xxxx -e MYSQL_PASSWORD=xxxx -e MYSQL_DATABASE=xxxx -d mysql

次にWordPressのコンテナを入れます。xxxxはコンテナ名なので自由に設定。-p 8080:80でポートフォワードしています。

$ docker run –name xxxxx -p 8080:80 –link wordpress-mysql:mysql -d wordpress

これだけで終了!!!!2つしかコマンドを打っていませんね!素晴らしい。

ブラウザからアクセス

事前にAzureのコンパネから80ポートの解放は行っておいて ブラウザからアクセスできるようにしてあげます。

http://yourDNSName:8080 でブラウザからアクセスしてください

スクリーンショット 2017-05-12 12.05.55

WordPressユーザなら大好きなあの画面が登場!!

無事設置が完了しました!

WP REST API と OAuth 2 認証をjQueryだけで実現

忘れてた!WordCamp Tokyo2016 ブログに書くの忘れてた

スクリーンショット 2017-01-13 12.10.13
そうなんですよ、自分WordCamp Tokyo2016に登壇させてもらって散々はしゃいで、JavaScript祭の準備で忘れてましたがちゃんとブログにも載せておきたいと思います。そのあと怒涛の案件ラッシュで年末も280時間ほど稼働してましたのでブログなんて全く関わる余裕がありませんでした。余裕が少しできたので自分のメモとしても大事に残しておきたいと思います。

WP REST API と OAuth 2 認証をjQueryだけで実現するお話

どんな内容だったかは、スライドを見ていただければと思います。

テストアプリケーション

補足解説と省略部分の追記

Gistにソースコードもあるし、テストアプリも登録含めて公開しているのでスライドと合わせて確認してもらえればOKかと思いますが、導入方法・セットアップの補足解説について解説します。

最低限設定しなければならないこと

スクリーンショット 2017-01-13 10.46.56

スクリーンショット 2017-01-13 10.59.52

有料版を導入するとClient IDとClient Secretが確認できるようになります

スクリーンショット 2017-01-13 11.16.44

どのサイトでOAuth 認証を使うかを設定できます。逆にここで設定していないドメインでは認証することができません。

スクリーンショット 2017-01-13 12.10.13

まだこの状態ではクロスドメインの問題でOAuth 2を設定したサーバーと違うドメイン環境で動くWordPressでは認証することができません。
headerに追記の必要があります。(詳しくはスライドのP41と42を確認してください。)WP OAuth Serverをインストールしている方のサーバーに記載してあげます。
もちろん全体に公開することもできるし、指定したドメインだけが使うことができるようにもできます。

WP OAuth Serverはすごいぞ

まだまだ知られていないプラグインなのが残念ですが、OAuth 2認証に対応しているプラグインとして素晴らしいクオリティです。
例えば今回はWP REST APIとの連携をやってみたのですが、あくまでWP OAuth Serverは認証の仕組みでしかありません。
故に、会員登録と認証の仕組みはWP OAuth ServerをインストールしたWordPressで行い、その会員情報を扱うのはWordPressですらなくても大丈夫なのです。
会員向けコンテンツ、グループサイトの共通認証の仕組みなどアイディア次第で色々なサイトを作ることができますね。
5000円と少しお値段がかかりますが、ぜひお試しアレ!

WordPressでQueryをゴリゴリ操作 wpdbまとめ

みんなー!WordPressでSQLゴリゴリ書いてるかーい!

wordpressQuery

しーーん

ここ半年ほどITかあさんはWordPressでQueryをゴリゴリ書いてます。
今更ながら

お!wpdbすごいぞ!SELECT文 UPDATEを直接書くよりも楽!

と驚きまして、せっかくなので

すごいぞ!今すぐ使えるwpdb

をまとめたいと思います。
なお、基本的にこの記事はCodex:Class Reference/wpdbに書いてある内容とそれほど変わらないので、そちらを見て頂いても大丈夫です。

プリペアドステートメント

SQLをゴリゴリ書く前にwpdbでqueryを書く際で最も重要なプリペアドステートメントについてです。
(プリペアドステートメントと聞いて全くピンと来ない人はブラウザをそっと閉じてください。そんな人はまだSQL書いてはいけません。ヤケドを負います。負傷します。)

$wpdb->prepare(‘query’,$vaule1,$vaule2…)

$prepared_sql = $wpdb->prepare(

INSERT INTO $wpdb->postmeta
( post_id, meta_key, meta_value )
VALUES ( %d, %s, %s )
“,
10,
$metakey,

$metavalue
);

プリペアドステートメントはこんな感じで、$prepared_sqlにプリペアドステートメント化されたSQLが入ります。

  • %d … int型
  • %s … text型

上記$prepared_sql(プリペアステートメントをセットした状態のSQL)をver_dumpで確認するとこんな感じ。

INSERT INTO wp_postmeta
( post_id, meta_key, meta_value )
VALUES ( 10, ‘meta_key’, ‘meta_value’ )

text型ならセットした変数の部分がコロンで囲われます。
mysqli_prepare() なんかと考え方は一緒ですね。

SELECT文

複数件取得

$myrows = $wpdb->get_results( "
        SELECT * FROM $wpdb->users
        " );

これだとwp_usersテーブルに存在するデータ全件取得してしまうのでプリペアドステートメントを使って条件指定をするならこんな感じ。

$prepared_sql = $wpdb->prepare( ”
SELECT *
FROM $wpdb->users
WHERE status = %d
“,
0
);

$wpdb->get_results($prepared_sql);
※statusが0のデータをwp_usersテーブルから全件取得

1件だけ取得

戻りが複数件ではなく、1件しか無い時は、get_rowが使えます。

$prepared_sql = $wpdb->prepare( ”
SELECT *
FROM $wpdb->users
WHERE ID = %d
“,
1
);
$wpdb->get_row($prepared_sql);

※user_idが1のユーザーを取得

特定のフィールドだけを指定して取得

get_rowもget_resultも、先ほどは行全体を取得していましたが、IDだけ!titleだけ!とか、特定のフィールドだけを指定して取得することもできます。

$prepared_sql = $wpdb->prepare( ”
SELECT ID
FROM $wpdb->users
WHERE user_login = %s
“,
‘hoge’
);
$wpdb->get_col($prepared_sql);

user_loginフィールド hoge のIDを取得

データの登録・削除・更新

今までINSERTやUPDATE文をSQL書いていただけだったんですが、ちゃんとupdateやdeleteに便利な関数が用意されていたんですね。ちょっとFWのような立ち居振る舞いに感激しました

INSERT

行のINSERTにも基本のフォーマットがあります

$wpdb->insert(
‘table’,
array(
‘column1’ => ‘value1’,
‘column2’ => 123
),
array(
‘%s’,
‘%d’
)
);

データの更新

global $wpdb;
//更新したい内容(post_statusを更新する)
$data = array(
‘post_status’ => $status,
);
//更新したい行の条件
$condition = array(
‘ID’ => $objct_id
);
$dataFormat = array(‘%s’);
$conditionsFormat = array(‘%d’);
$wpdb->update(‘wp_posts’, $data, $condition,$dataFormat,$conditionsFormat);

データの削除

これはとっても簡単

$wpdb->delete( ‘table’, array( ‘ID’ => 1 ), array( ‘%d’ ) );

以上です。UPDATEとDELETEがすごくフレームワークチックで大好き。functions.phpやプラグイン開発時に使って下さい。

WordPressの管理画面wp-adminに任意のjQueryを追加する

WordPressの管理画面wp-adminに任意のjQueryを追加する

WordPress_jquery

WordPressの管理画面wp-adminに任意のjQueryファイルを読み込むことだって出来ますよー

WordPressに任意のjQueryファイルを読み込むTipsです。

呼び出したいjQueryはテーマディレクトリ下に呼び出してあげます。
このケースは投稿一覧ページを出した際(edit.phpの時だけ)jQueryを呼び出しています。

特定のcustom post typeの時だけ


こんな感じでカスタムポストタイプの名前を設定してあげれば、指定されたカスタムポストタイプの時だけjQueryファイルの呼び出しが出来ます。

WordPressのカスタムポストタイプで管理画面での表示項目を追加する

WordPressのカスタムポストタイプで管理画面での表示項目を追加する

カスタムポストだよ

カスタムポストタイプの管理画面での表示の様子。一番右の[Author]を今回は追加する体で進めます

カスタムポストタイプについての説明はここではしません。Custom Post Type UIなどのプラグインなどを使ってカスタムポストタイプを作った際に、管理画面に何か項目を追加したいなーという時のTipsです。

manage_ポストタイプ名_posts_columnsで設定可能!


この他、カスタムポストじゃないけど、メディア一覧でも設定可能です。

他にも色々設定可能で、こちらのページのSTEP2のあたりが参考になるかと。

WordPressのカスタムプロフィール項目を一番下に挿入する

WordPressのカスタムプロフィール項目を一番下に挿入したい

WordPressのカスタムプロフィールの項目を一番下に挿入するよ
なお、その他「ここにカスタムプロフィール挿入したい!」というケースはこちらを参考にするといいかもしれない。

WordPressのカスタムプロフィールを一番下に挿入する


profile_updateのaction実行時にSQLを実行してあげれば、別テーブルに処理INSERTしてあげることも出来ますね。

WordPress のメディアディレクトリをデフォルトの日付から変更する

WordPress のメディアディレクトリをデフォルトの日付から変更

WordPress のデフォルトディレクトリだと日付になりますね。

/wp-content/uploads/Y/m/

これは2つの方法で変更が可能で、wp-config.phpに変更を定義すること

define( ‘UPLOADS’, ‘wp-content/myimages’);

もう一つがアップロードのupload_dirフィルター としてfunction.phpに追記すること。

上記ケースだと、user がアップロードした時に現在のログイン中のユーザーのディレクトリにアップされますね。
ただし、user名と同一のフォルダがあるかどうかチェック なければディレクトリ作成するというロジックが別途必要ですが、add_filter でupload_dirに対してディクレトリを変更する処理を入れれば良い、ということは分かりました。

WordPress フロントから投稿する Frontend Publishingプラグインがすごい

WordPressのフロントから投稿する Frontend Publishingが便利すぎて鼻血がでそうになった

WordPressでフロントから投稿したい!会員に、管理画面を触らせずにフロントから記事を投稿させたい!!

人生で誰もが一度はそんな衝動に刈られると思います。

Frontend Publishingプラグイン

管理画面を触らせずに自由に、そして導入も非常に簡単なすばらしいプラグインを公式サイトから見つけました!その名もFrontend Publishing!!
まだ日本語で紹介している記事がないのでぜひ紹介したいと思います。

Frontend Publishingがシンプルかつ、便利ですばらしい!

タイトル・記事部分はもちろんのこと

タグ・カテゴリーも選択可能です。

※Author Bioという項目がデフォルトで存在するのですが、このプラグインを導入した際にカスタムフィールドが自動追加されているようでして、Author Bioって投稿者のプロフィールっていう意味らしいです。

Frontend Publishingプラグインの導入方法

プラグインを追加して有効化したら下記2つのショートコードをそれぞれ違う固定ページに記載するだけです。

[fep_submission_form] ・・投稿用フォーム
[fep_article_list] ・・ 投稿済リスト

投稿リスト


無料版ながら、画像やタグの投稿はもちろん、編集もできるのがありがたいところ。(別のフロント系投稿プラグインでは投稿ができても編集はできないものもあるので。。)

導入も簡単!シンプル!でも最大の問題点が。。。

そのままでは日本語で記事投稿ができない!!


設定画面でここで入力文字数に関して設定するのですが、ここで設定するのは文字数ではなく「単語の数」なんですね。例えばこれで単語は4個です。

I have a apple.

半角で文字を分けることのない日本語ではそもそもこの文字のカウントができないわけですので、ほんの少しプラグインを書き換えてあげる必要があります。
(プラグインを直接書き換える必要があるので、変更は自己責任でお願いします。)

incフォルダのajax.phpを少しだけ書き換えます。

ajax.php

if ( !empty($content['post_title']) && str_word_count( $content['post_title'] ) < $min_words_title )
        $error_string .= 'The title is too short
'; if ( !empty($content['post_title']) && str_word_count( $content['post_title'] ) > $max_words_title ) $error_string .= 'The title is too long
';
str_word_count()が単語の数を数える関数です。これを、mb_strlen()関数などの、2バイト文字にも対応した文字数を数える関数にすべて変更すればよいのです。

この他、投稿時にすべてのフォームの項目を埋めなければ、投稿できないようになっているので、26行目の以下の項目のemptyチェック(フォーム項目の空チェック)を外してあげればよいのです。

if( ($min_words_title && empty($content['post_title']) ) || ($min_words_content && empty($content['post_content'])) || ($min_words_bio && empty($content['about_the_author'])) || ($min_tags && empty($content['post_tags'])) ){
		$error_string .= 'You missed one or more required fields
'; }

かあさんの場合は、タグと、投稿者プロフィール’about_the_author(Author Bio)’の空チェックは不要と判断したので、このようにしました。これでたとえタグと、投稿者情報を入力をしなくてもエラーは発生しません。

if( ($min_words_title && empty($content['post_title']) ) || ($min_words_content && empty($content['post_content'])) ){
		$error_string .= 'You missed one or more required fields
'; }

このほかフォームや、投稿一覧の見た目の変更

submission-form.phpを変更すれば見た目の変更や不要なフォームの削除ができます

少し直せばかなり使い勝手がよく、またソースコードが非常にシンプルなので、少しPHPの知識のある人であればアレンジが大変しやすいところも気に入っています。
有料版もあるプラグインですが、無料でもかなり使えますので、ぜひ使ってみてください!