WordPress雑記帳 ITかあさん

ITかあさん

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の知識のある人であればアレンジが大変しやすいところも気に入っています。
有料版もあるプラグインですが、無料でもかなり使えますので、ぜひ使ってみてください!

WordCamp Tokyo 2013の開催が決定したようだ

WordCamp Tokyo 2013の開催が決定!

WordCamp Tokyo2013の開催が決定したみたいだ!

9.14(土)開催

ITかあさんも行く!今年は絶対行く!
(去年は娘の保育園最後の運動会とかぶって行けなかった・・)

WordCamp Tokyo 2013スタッフ募集しているよ

何でもするので、仲間に入れて下さい

スタッフの応募もしてみた。きっと熱意は委員長のメガネさんにも届いたはずだ。

WordPressのゲスト投稿(フロントエンド)から複数画像のアップロード

ゲスト投稿から画像アップロードするには

WordPressの管理画面ではなく、表画面(フロントエンド)から画像をアップロードする方法はこちらが参考になります。

で、今回はこちらを参考に複数画像のアップロードにチャレンジしてみようかと。

functions.php

functions.phpに以下の記述を書きます。3つのファイルの呼び出しをあらかじめしないとだめなようです。

function insert_attachment($file_handler,$post_id,$setthumb='false') 
{
    // check to make sure its a successful upload
    if ($_FILES[$file_handler]['error'] !== UPLOAD_ERR_OK) __return_false();
     
    require_once(ABSPATH . "wp-admin" . '/includes/image.php');
    require_once(ABSPATH . "wp-admin" . '/includes/file.php');
    require_once(ABSPATH . "wp-admin" . '/includes/media.php');
    $attach_id = media_handle_upload( $file_handler, $post_id );
    if ($setthumb)
        update_post_meta($post_id,'_thumbnail_id',$attach_id);
    return $attach_id;
}

複数画像アップロードするためのループ。

global $post;
if ($_FILES) {
    $files = $_FILES['upload_attachment'];
    foreach ($files['name'] as $key => $value) {
        if ($files['name'][$key]) {
            $file = array(
            'name'     => $files['name'][$key],
            'type'     => $files['type'][$key],
            'tmp_name' => $files['tmp_name'][$key],
            'error'    => $files['error'][$key],
            'size'     => $files['size'][$key]
            );

            $_FILES = array("upload_attachment" => $file);

            foreach ($_FILES as $file => $array) {
                $newupload = insert_attachment($file,$post_id);
            }                                   
        }
    }
}

表側

表側はテーマファイルの好きなところにフォームタグを書いてあげればいいと思います。

<form action="" method="post" id="profile-edit-form" class="standard-form" enctype="multipart/form-data">
 <!--複数画像をアップロードするためのmultiple。nameは配列になるよう、[ ]を忘れない-->   <input type="file" name="upload_attachment[]" multiple="multiple" accept="image/*">
<div class="submit">
<input type="submit" name="profile-group-edit-submit" id="profile-group-edit-submit" value="保存 "/>
</div>
</form>

なお、上記はHTML5対応のmultipartなので、それ以外の場合はこのように複数書いてもOKです。

<input type="file" name="upload_attachment[]">
<input type="file" name="upload_attachment[]">
<input type="file" name="upload_attachment[]">

大変だ!アイキャッチが投稿した画像のうち、一番最後の画像だ!

すみません、こちらの記事を書いていて後で気がついたのですが
update_post_metaがループ中に実行されているため、4枚画像が登録されていたら最後の画像がアイキャッチになって当然ですね。

update_post_meta($post_id,'_thumbnail_id',$attach_id);

でも、ラジオボタンか何かでアイキャッチで選ばせるのも分かり難いですし、やはり1番最初の画像がアイキャッチになるのが分かりやすいと思います。
しかも、4個画像のフォームがあって うっかり2個目のフォームから画像を登録する暴挙に出るユーザーがいないとは限りません。
そこで、これはこれとして画像がPOSTされたら、画像の配列を逆順にソートかければよいのでは?と考えました。

そんな訳で修正版 フォームからの複数画像のアップロード

global $post;
if ($_FILES) {
$files = $_FILES['upload_attachment'];
/*画像が渡されたら逆順でソートを行う*/    
arsort($files['name'],SORT_NUMERIC);
arsort($files['type'],SORT_NUMERIC);
arsort($files['tmp_name'],SORT_NUMERIC);
arsort($files['error'],SORT_NUMERIC);
arsort($files['size'],SORT_NUMERIC);
    
    
    foreach ($files['name'] as $key => $value) {
        if ($files['name'][$key]) {
            $file = array(
            'name'     => $files['name'][$key],
            'type'     => $files['type'][$key],
            'tmp_name' => $files['tmp_name'][$key],
            'error'    => $files['error'][$key],
            'size'     => $files['size'][$key]
            );

            $_FILES = array("upload_attachment" => $file);

            foreach ($_FILES as $file => $array) {
                $newupload = insert_attachment($file,$post_id);
            }                                   
        }
    }
}

ふ~、危なかった!こんな感じでどうでしょうか?

WordPressで連続改行をPHPのnl2br関数を使って実装する

WordPressで連続改行をPHPのnl2br関数を使って実装する

WordPressでは連続改行は出来ないのですね、知りませんでした(えっ!?)
もしかしたら完璧ではないかもしれないけど

PHPの\nをbrタグに変換するnl2br関数を使うとちょっといい感じ

っぽいのです。『たぶん出来るんじゃね?』的な軽いノリでやってみたら、プラグイン使わずに出来ました。

実行例

ここではthe_contentを使わずに、一度変数化させるのがポイント。
<?php $text = $post->post_content; ?>
<?php echo nl2br($text); ?>

軽くやってみただけなんで、間違ってたらすみません。