WordBench神戸に参加

WordBenchに参加しただけでブログ記事書く人も最近少ないかもしれないけど、とりあえず書いておく。
2018/2/25 のWordBench神戸に参加した。
参加者は20人以上はいて、部屋がほぼ一杯になっていた。僕がここでやるBenchに参加したなかでは一番、人が多いと感じた。

メインは Nishiki という公式テーマの作者によるプレゼンテーションと、その後、実際に Nishiki を触ってみてみんなでアレコレ言うという内容だった。
結構、みんなアレコレ言っていた(笑)レビューみたいな感じになっていたね。作者さんもみんなの意見を参考にしてまた仕様変更などされるんだろうけど、ご苦労様だなあと思った。

それより、僕個人的には、公式テーマとかよく作れるなー!という感じで、作れる人はほんと雲の上の人みたいな感じがしてる。テーマの審査では英語でのやりとりしないといけないしコミュニケーション大変そう。ほんと凄いなあと思うばかり。
自分なんか配布テーマとか、プラグインとか作る元気もないけど、仮に作ったとしても、公式なんかとても無理だ。

WordBenchもレベル高くてついて行きにくい時もあるな。

さてBenchの最後にはWordCamp大阪の告知が行われた。
2018年6月2日、3日の両日、関西大学梅田キャンパスでやるらしい。
https://2018.osaka.wordcamp.org/

今度は近いから行きやすいね。

Bench終わってからは飲み会。「さかなや道場」という居酒屋の元町店だった。
ここ美味しい!!海鮮が美味しい!!覚えとこうと思って記録する。4,000円で飲み放題で、お腹いっぱいになった。いい居酒屋だった。満足した。
座敷で長テーブルに向かい合うような形で座ったわけだけど、僕は真ん中辺りにいて、二手に分かれた盛り上がりに中途半端に首突っ込むような感じでちょっと失敗したけど、それなりに楽しかった。

というわけで、しばらくWordBenchに行かないかもしれないけど、また行く時があったら楽しめればなと思う。

WordPressサイトの移設の流れ

最近ちょっとWordPressサイトを移設することが続いたので、覚えているうちに流れをまとめておく。

○○○○.com のサイトを △△△△.net に移設するという場合。

(1) 元のサイトでWordPressとプラグインのアップデートをしておく。

(2) 元のサイトのデータベースをエクスポートする。

(3) 新しいサイトのデータベースを作って上記をインポートし、wp_options の siteurl と home の値をそれぞれ △△△△.net の方に書き換えておく。

(3) 元のサイトのWordPressのファイル一式をダウンロードする。

(4) wp-config.php のデータベースのパラメータを、新しいサイトの方に書き換える。

(5) ファイル一式を新しいサイトにアップする。

(6) とりあえずブラウザからトップにアクセスしてサイトが表示されるか確認する。

(7) Search-Replace-DB をWordPressのディレクトリにアップし、ブラウザからそのトップにアクセスして、○○○○.com から △△△△.net への変更を設定し、dry run で試してから live run を実施、その後このツールを削除する。
(Search-Replace-DB はこちらのサイトからもらったもの https://interconnectit.com/products/search-and-replace-for-wordpress-databases/

(8) 新しいサイトにアクセスして画像等含めて正しいURLで表示されているか確認する。

(9) 元のサイトの .htaccess に新しいサイトへのリダイレクトの設定をする。

(10) 元のサイトのファイル一式とデータベースを削除する。

という感じかなと。

WordPress.com のブログをやめてみた

WordPress(.org)はログインスパムの対策やアップデート作業などのメンテが面倒だから、という理由で WordPress.com に移行したら楽になるんじゃないかなーと思って、1つのブログを移行してみた。
(実は、それがもしかして自分のお客さんにもメリットがあって提案できるかな?という実験も兼ねてのことだった)

ちなみに「パーソナル」プラン。(月額400円、年間で4,800円)

そして2つ目のブログを移行させようと作業していた時に、

  • 1ブログ毎にプランの費用が必要なのも負担だなあ。(いくつかブログをやりたかったから)
  • どうもテーマが良いのが無い。これでは自分の写真ブログをいー感じにできないなあ。
  • 写真ブログだったらもっといろんな表現できた方が良いし、場合によってはダウンロード販売とか出来たら良いよねぇ。。

といった具合に損得勘定が働き、やっぱ、ブログは自分が立ててるサーバーでやる方が良い!!という結論になった。
なのでとりあえず、2つ目のブログは移行せずにやめることにした。(せっかく契約したのにね・・)

☆ やめ方

(1) 右上の自分のアカウントのアイコン > サイドメニューの「購入を管理」 > 自分のサイトのプラン(例)WordPress.com パーソナル > 「契約をキャンセル」(またサブスクリプションをキャンセル) > あとは流れに従う。

(2) 該当するサイトのページ > 設定 > サイトを永久に削除 > あとは流れに従う。

という感じでやめることが出来た。最初、(2) をやろうとしたら、「購入を管理」に行くようにうながされたので、順番としては上記ですね。

[WordPress] JSでカテゴリ一覧を取得する

前回の投稿で、WordPressのデータをJSで取得する必要が生じたので、書いたコードを載せておく。
これはちょっと特殊で、
カテゴリの一覧を取得して、各カテゴリがoptionとなるセレクタ(プルダウンメニュー)として表示し、
その1つを選択すると、その子カテゴリの一覧が、メニューの下に表示されるという機能になる。

コードの中で “Type” と呼んでいるものは案件上の呼び方で、意味は「カテゴリ」のこと。

実際はこれ以外にも、タグなどを表示させるコードも書いてクエリーで切り替えるようにしているが、カテゴリに関する部分のみを抜粋した。

/* テンプレート側のコード */

$parent = get_query_var( 'outparent' );
$exclude = get_query_var( 'outexclude' );

if( $parent && !is_numeric( $parent ) ) {
    exit;
}
if( !preg_match( '/^[0-9\,]*$/', $exclude) ) {
    exit;
}
$args = array(
    'parent' => $parent,
    'exclude' => $exclude,
    'hide_empty' => 0
);
$terms = get_terms( 'projects_category', $args );
$arr_output = [];

foreach ( $terms as $term ) {
    $obj_output = new stdClass();
    $obj_output->id = $term->term_id;
    $obj_output->name = $term->name;
    $obj_output->url = get_term_link( $term->term_id, 'projects_category' );
    $obj_output->description = $term->description;
    $cat_meta = get_option( 'taxonomy_my_meta_'.$term->term_id );
    $obj_output->image_url = esc_url( $cat_meta['indeximg'] );

    $arr_output[] = $obj_output;
}
$json_output = json_encode($arr_output, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
echo $json_output;

このテンプレートは、output-api というスラッグの固定ページ用のテンプレートとして用意した。
JSからこの固定ページのURLを叩いてデータを取得する。

上記は、URLで与えられたクエリーの値を取得して、get_terms() のパラメータとして使用し、投稿タイプ projects のタームの配列を取得、ループで回して個々のタームのタイトル・URLなどのパラメータをオブジェクトのプロパティにしたうえで、新たな配列に順次追加する。
その配列をJSONに変換して出力する。

 

クエリーはWordPressで扱えるようにするために、 query_vars に追加する必要があるので、下記のように functions.php に記述をおこなった。

/* functions.php */

function my_add_query_vars( $vars ){
    $vars[] = 'outparent';
    $vars[] = 'outexclude';
    return $vars;
}
add_filter( 'query_vars', 'my_add_query_vars' );

 

表示部分(この場合トップページ)に用意するHTML

/* HTML */

<div class="type-selector"></div>
<div class="project-list"></div>

 

そして、JavaScript(jQuery)のコード

/* JS側のコード(jQuery) */

(function($){
$(function(){
    var apiUrl = 'http://xxxxxxx/output-api/?';

    var selector = {
        typeQuery: 'outparent=0',
        setType: function(){
            this.ajax(apiUrl + this.typeQuery, $('.type-selector'), '- Type -');
        },
        writeSelector: function(data, el, label){
            var options = JSON.parse(data);
            var tag = '<select>';
            tag  += '<option value="">' + label + '</option>';
            for(var i = 0; i < options.length; i++){
                tag += '<option value="' + options[i].id + '">' + options[i].name + '</option>';
            }
            tag += '</select>';
            el.html(tag);
        },
        ajax: function(url, el, label){
            $.ajax(url, {
                type: 'GET',
                dataType: 'text',
                async: true
            }).done(function(data){
                selector.writeSelector(data, el, label);
            }).fail(function(data){
                console.log(data);
            });
        }
    };
    selector.setType();

    var list = {
        typeListQuery: 'outexclude=257,258,259,260,261',
        allType: function(){
            this.ajax(apiUrl + this.typeListQuery);
        },
        byType: function(id){
            var query = 'outparent=' + id;
                this.ajax(apiUrl + query);
        },
        writeList: function(data){
            var list = JSON.parse(data);
            var tag = '';
            for(var i = 0; i < list.length; i++){
                tag += '<a href="' + list[i].url + '">';
                tag += '<div style="background-image:url(\'' + list[i].image_url + '\')"></div>';
                tag += '<p>' + list[i].name + '</p>';
                tag += '</a>';
            }
            $('.project-list').html(tag);
        },
        ajax: function(url){
            $.ajax(url, {
                type: 'GET',
                dataType: 'text',
                async: true
            }).done(function(data){
                list.writeList(data);
            }).fail(function(data){
                console.log(data);
            });
        }
    };
    list.allType();

    $('.type-selector').on('change', 'select', function(){
        var id = $(this).val();
        list.byType(id);
    });
});
})(jQuery);

上記で、
変数 selector に定義しているものが、selectタグ(プルダウンメニュー)に関するもの。
変数 list に定義しているものが、メニューの下に表示する子カテゴリ一覧に関するもの。
プルダウンメニューからType(カテゴリ)を選択すると、その子カテゴリ一覧がメニューの下に表示される。

outexclude= で除外カテゴリを列挙しているが、これらは親カテゴリのこと。何もせず取得すると親子カテゴリが混じってしまうので、親を取り除いて子カテゴリだけの一覧にするため。(自動的に子カテゴリだけに出来なくて残念だけど)

カテゴリ一覧という、あまり一般的でないケースについて長々と書いてしまったけど、参考になる人が居れば幸いです。

WordPressのデータをJSで取得するために

WordPressのトップページの一部にサムネイル付きのカテゴリ一覧を表示させて、ドロップダウンでカテゴリを切り替えて表示し、同様にタグの記事一覧もドロップダウンを設けて切り替え表示させる。
さらに、同じようなことをカテゴリ一覧のページでも出来れば・・・。

というような案件があって、どうしたものかと考えた。

JSでデータを取ってくるしかないよねと。

で、パッと思い浮かぶ方法は WP REST API を使う方法なんだけど、まだ使ったことがなくて覚えながらだと時間かかっちゃうなー、と思った。
それに、自分が必要なデータがちゃんと取れるのかどうかも分からない。(知らないから)

というわけで別の方法を考えた。

固定ページを1つ用意して、そのテンプレートに各種データを取得するコードを書き、URLクエリーで条件を与えることによって必要なデータを取得するというもの。
JSON文字列を出力して、それをJSで取得し、その後のデータハンドリングをやるというもの。

とりあえず今、タクソノミーのタームのデータをJSONで書き出すところまでは出来たところ。
最終的にちゃんと出来たらブログにもコードを上げようかと思っているところ。

<2018.2.2 追記>
こちらのページにコードを書いています。

[WordPress] JSでカテゴリ一覧を取得する