ITの隊長のブログ

ITの隊長のブログです。Rubyを使って仕事しています。最近も色々やっているお(^ω^ = ^ω^)

【WordPress】WP REST APIを使ってみる

まだ触りたてですが、ちょっとだけハマったのでメモ。

試す

wp rest apiをインストール

v2.wp-api.org

ドキュメントも上のサイトで兼ねています(あんまり読んでない。。。)

インストールしたら、下記URLにアクセスしてみてください。私はcurlを使いました。

$  curl http://localhost/wp-json/ | jq 
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100 41393    0 41393    0     0   144k      0 --:--:-- --:--:-- --:--:--  145k
{
  "name": "wordpress title",
  "description": "Just another WordPress site",
  ...

色々わぁーってでてこればおk.

この時、.htaccessとかでrewriteが効いていないとうまくいきませんので注意。

カスタム投稿タイプを引っ張ってくる

これもちょっとハマった。

検索してすぐでてくる下のサイトを参考にしましたが、うまくいかなかった。

www.tam-tam.co.jp

$ curl http://localhost/wp-json/v2/wp/my-custome-post | jq 
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   226  100   226    0     0    821      0 --:--:-- --:--:-- --:--:--   824
{
  "code": "rest_no_route",
  "message": "URLとリクエストメソッド(request method)に合ったルートがありません",
  "data": {
    "status": 404
  }
}

うまくいったコードは下のURLの記事を参考にしました。

qiita.com

  • functions.php
<?php
/**
 * アドバンスカスタムフィールドを wp rest apiで使用する
 */
function wp_rest_api_alter()
{
    $params = array(
        'get_callback' => function ($data, $field, $request, $type) {
            if (function_exists('get_fields')) {
                return get_fields($data['id']);
            }
            return [];
        },
        'update_callback' => null,
        'schema' => null,
    );
    register_api_field('my-custom-post', 'fields', $params);
}

add_action('rest_api_init', 'wp_rest_api_alter');

/**
 * wp rest api でカスタム投稿タイプを使うための記述
 */
function sb_add_cpts_to_api()
{
    global $wp_post_types;
    $key = 'my-custom-post';
    $wp_post_types[$key]->show_in_rest = true;
    $wp_post_types[$key]->rest_base = $key;
}

add_action('init', 'sb_add_cpts_to_api', 30);

テーマのfunctions.phpに書き込めばうまくいきました。

前、自分でAPI作ってみたけど、こっちのが全然よさそうなので、こっちを使うことにします。

そういえばセキュリティとかこれどうなんだろ?

【JavaScript】javascriptでのデータオブジェクトのkeyに「:(コロン)」があるときのアクセス

初歩的なことですが、メモ。

こんな感じのデータオブジェクトがあったとする。

var data = {
  'title': 'test',
  'wp:test-data': [{
    'link': 'http://www.yahoo.co.jp'
  }]
};

普通にアクセスする。

> data.title
"test"

まぁこれは普通。

次にコロンのやつにアクセスしてみる。

> data.wp:test-data
Uncaught SyntaxError: Unexpected token :

「んだよ。":"←わかんねぇもんなげんじゃねーよ」って怒られます。

はて?どうすればいいの。

javascriptは変数にコロンとかハイフンは使えないので、この場合は配列を取得するようにアクセスする。

> data['wp:test-data']
[Object]

これでおk。

その下の階層からは普通にアクセスすれば良い。

> data['wp:test-data'][0].link
"http://www.yahoo.co.jp"

bowerとgulpで試してみたこと

ただのログ

bowerで色々インストール

ずっとパッケージを管理するのはnpmと思っていたけど、npmはサーバ用(node用かな?)のプラグインを主としているらしい。

フロントはbowerを使う。

まずはbower initする。

$ bower init

angularjs1.5関連をインストール

$ bower install angular#1.5.8
$ bower install angular-animate

jquryのバージョン2n最新版をインストール

$ bower install jquery#2

驚いたのが、なんとcss関連をダウンロードできた。うれしい

$ bower install font-awesome 

javascriptのライブラリファイルの管理

最初main-bower-filesを使って、管理していたけど、部分的にファイルがほしいとき、どうやったらいいのかわからなかった。 ※このページはangular必要だけど、他のページには必要ない。とか。

なので、gulpのタスクをバラバラにしてみた。

gulp.task('angular-lib', function() {
    return gulp.src([
            paths.base + '/bower_components/angular/angular.js',
            paths.base + '/bower_components/angular-animate/angular-animate.js'
        ])
        .pipe(concat('angular-lib.js'))
        .pipe(gulp.dest(paths.distJs + '/lib'));
});

gulp.task('jquery-lib', function() {
    return gulp.src([
            paths.base + '/bower_components/jquery/dist/jquery.js'
        ])
        .pipe(concat('jquery-lib.js'))
        .pipe(gulp.dest(paths.distJs + '/lib'));
});

しかし、面倒なことには変わりない。どうにかせんと。。。

scssのコンパイル時にパスを渡す

gulp-ruby-scssはできることが多そう。。。

いまから覚えるのもだるかったので、gulp-sassでどうにかできないかと探してたら、何故かドキュメントではなくstackoverflowで見つかった。

stackoverflow.com

gulp.task('sass', function() {
    var processors = [
        cssnext({browsers: ['> 0%']})
    ];
    return gulp.src(paths.scss)
        .pipe(sass({
            includePaths: [
                paths.base + '/bower_components/font-awesome/scss'
            ]
        }))
        .pipe(gulp.dest(paths.distCss));
});

includePathsってやつをkeyにパスを渡せばおk

OAuth認証ォオオオオオオオオオオオオオオオオオオオ!!!!!!!

くっっそくっっそ!!!

PHPStormで試してみたらうまくいったけど、ちまちまデバッグしながらパラメータ発行するのうぜぇから、PostManがいいよって書いたあったから試しているのに

(°ω°#毎度401返してんじゃねぇええよくそがkぁああああああああああああああ!!!

しかも毎回毎回発行しないといけないみたい(?)じゃん!何度も発行すんのめんどくせぇんだよくそがぁぁあああああああああああ!くそがぁぁあああああああああああ!!!!

なれるまで。。。というか理解するまで本当めんどくさい。。。

最近OAuth2でもやられたというのに。。。次はOAuth1か。。。

ちゃんと覚えよ(°ω°;