WordBench 富山 に参加してきました。

【勉強会】WordBench 富山 勉強会@富山市 第67回 11月26日(土)
https://www.facebook.com/events/1741536562763982/
に参加してきました。

今秋は、いろいろな方と出会いがあり、遠方の勉強会への参加が多めです。
ありがたいことです。
軽い気持ちで参加したら、20名以上の参加で会場はびっしり埋まってて、富山のWP熱すげーなってのが第一印象。
あと、開始前に会場裏の「富岩運河環水公園」ってところをフラフラ歩いてたんだけど、すっっっごくいいところで、あまりに美しすぎて謎の敗北感を感じるほど。(褒め言葉です)
WordBench富山に(参加&&会場がサンフォルテ)だったら足を運ぶことをお勧めします。

Welcartについて

WordPressのECサイト構築プラグイン「Welcart」を開発しているコルネ株式会社の南部様によるセッション。Welcartについてわかりやすく解説していただき、開発の歴史や運営の方法、セキュリティについてなど、色々盛りだくさんに解説をしていただきました。
Welcartは、たしか5年前とかそういう時期に(たしかまだバージョン1になる前)、あるお客様と一緒にWordPressでECサイトできないか検討している過程で使ったことがありました。そのときは、申し訳ないけどなかなかに使いづらくて断念しました。(そのお客様の業態とシステムがあわないってのが大きかったですが)。。そのときは結局ECキューブを選択したのですが、それがキッカケで、その後も特にWelcartと触れ合うキッカケがないままになっていました。
でも、今回お話を聞いて当時と比べてめちゃめちゃ進化しているなぁ、、、て思いました。
デモを見せてもらいましたが、もう別物ですね。今後は積極的に使っていこうと、心をあらたにして、食わず嫌いだった自分を恥じる今日このごろです。

感じた事

コアな機能は本体プラグインで提供しつつ、ウィジェットとかの見た目機能は専用テンプレートで提供してて「カスタマイズするときはこれの子テーマをつくりましょう」という姿勢や、拡張機能を専用プラグインで配布しているところ。
あとは、当たり前なのかもですが商品情報がカスタム投稿として実装されているところとか(これはデモみてるときのURL見てそう思っただけなんで違うかも)、WordPressの流儀というかそういうのに添ってつくられているので、普段からWordPressをがっつりやっている人には、いじりやすそうだなって感じました。
あと、なんというか、南部様の話しぶりとかからにじみ出てくる人柄が、「THE開発者」って感じの方で、こういう方がリーダーシップとって開発されているシステムなので、これからもどんどん良くなっていくだろうなと感じました。(なんか偉そうな書き方になってしまいました。すみません。m( _ _ )m)

よりよいコードを書く!


WordBench富山の神垣さんによるセッションでした。
静的コード解析による読みやすいコードを書きましょう。というお話。
普段から「大事だよね」とかいいながら、ついつい疎かになる「コーディング規約」について、ちゃんとやろうぜ!って内容と、ちゃんとやるための手法やツールの紹介をしていただきました。
「3日経てば他人のコード」は、自分の中で「var_dump書きたくなったらテスト書け」と並ぶCI格言にリストされました。
WordPressのコーディング規約は、1,2回読んだだけで、実際にはクォートの部分とか直接のパフォーマンスに関わりそうな部分しか守ってなかったので、(ごめんなさい・・)、ちゃんと守ろうって心をあらたにしました。というか自動チェック&自動整形ですね。Atomでどこまでできるんだろうか。。。あとで調べねば。あと、{}とかifのスペースは個人的にはどっちとも言えないなぁ。。という印象でしたが、ヨーダ記法はまさにそのとおりだと思ったので意識して取り入れるようにしたいと思います。

こういう『書き方』をちゃんとやっていないと、結局勘違いとかで無駄な時間を取られたりするので超大事。
ありがとうございます。m( _ _ )m

以上。

大勢が参加する勉強会だと、意見とかもバンバン出て活気がありますね。次回は長岡との合同開催の計画も持ち上がっているようで今後が楽しみです。

WordPressで記事内の画像を、一覧表示のときなどに取得してサムネイルで表示する方法。と、謎のob_startについて

WordPressでサイトを構築していると、TOPページなどにいわゆる「新着情報コーナー」として最近の記事の日付とタイトルなどを一覧表示する機会が結構あります。
そして、その時にタイトルだけじゃなくて、投稿内にはりつけられた最初の画像を表示したい。という要望が結構あります。
(アイキャッチ画像とかつかおうよ)って思わないこともないけど、過去の投稿がたくさんあるサイトのリニューアルなどのときなど、画像の中に貼り付けてある画像を使いたいシーンは結構あります。

さて、その方法について、Googleなどで
「Wordpress 投稿 最初の画像 取得」
などで検索すると、下記のようなコードをfunctions.phpに書きましょう。って内容を紹介している記事が結構見つかります。

function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    ob_start();
    ob_end_clean();
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];
  
    if(empty($first_img)){ //Defines a default image
        $first_img = "/images/default.jpg";
    }
    return $first_img;
}

いつもながら、皆様の公開してくださる情報には本当に助けていただきます。
ありがとうございます。なんて思いながらありがたく使わせていただくのですが、、、

ひとつ気になるところがあります。

4,5行目のところに
ob_start();
ob_end_clean();
の記述が。

これはPHPでバッファリングするときに使う関数です。
参考:http://php.net/manual/ja/function.ob-start.php

上記のコードを1行づつみてみると。

    global $post, $posts;
    $first_img = '';

投稿を格納している$post変数を関数内でも使えるようにする。
返り値を入れるための変数を初期化

    ob_start();
    ob_end_clean();

ここが気になる。

    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];

正規表現で、投稿内のimgタグから画像のURLを取り出し。

    if(empty($first_img)){ //Defines a default image
        $first_img = "/images/default.jpg";
    }

投稿内に画像が貼り付けられていない時の処理。

という感じです。

そうなんです。
ob_start();
ob_end_clean();
だけ、何のためにあるのかわからないのです。
この関数でつかっている「catch_that_image」という関数名で検索すると似たようなコードが沢山でてくるのです。

おそらく、一番最初にこのコードを公開した人がいろいろと苦労をしたものと思われます。
いろいろ試しながらコードを書いていくうちに、テスト的に書いたコードをつい消し忘れる。ってのはよくあることです。

そして、その「コード」がとても便利なために、どんどんシェアされて広まっているのではないでしょうか。
と思うのですが。。。

そんなわけで、どなたか情報がありましたら教えて下さい。

情報募集中でございます。

  • 何かこういうときのために必要なのだ。という情報がありましたら教えて下さい。
  • もしくは、これは古いコードで今はこっちを使うんだぜ。ってのがありましたら教えて下さい

一応、不要と思われる部分を取り除いたコードを掲載しておきます。

function catch_that_image() {
    global $post, $posts;
    $first_img = '';
    $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
    $first_img = $matches [1] [0];
  
    if(empty($first_img)){ //Defines a default image
        $first_img = "/images/default.jpg";
    }
    return $first_img;
}

投稿内で使うとき

<img src="<?php echo catch_that_image(); ?>" alt="<?php the_title(); ?>">

こんな感じです。

「wp_list_comments() でコメントが表示されない」~4年前の悩みが時を超えて解決されるドラマチックというか、ほんとは恥ずかしい話~

WordPressの記事内に、コメントの一覧を表示させようと思って wp_list_comments を書いたけれどもコメントが表示されないとき。
原因は、wp_list_commentsを、comments.php など、comments_templateを使って呼び出したテンプレート以外で使っているからです。

comments_templateをつかって、コメントのテンプレートファイルを呼び出す(デフォルトはcomments.php)ときに、あらかじめコメントが呼び出されて、そのコメントを表示する関数が wp_list_comments というわけです。
つまり、wp_list_commentsは、コメント一覧を表示する関数であって、コメントを呼び出す作業が別に必要ということです。

wp_list_comments をcomments_tempalteで呼び出すテンプレート以外で使うとき

$comments_arg=array(
  'post_id'=>$post->ID,
);
$list_arg=array(
/*wp_list_commentsのパラメータ*/
);
wp_list_comments(array(),get_comments($comments_arg));

という感じになります。

  • get_commentsにもいろいろパラメータを設定できます。
  • post_idは、そのコメントが紐づけられている投稿のIDです。もちろんループ以外だったりのときはpost_idの値取得方法は変わりますね
  • wp_list_commentsのパラメータはお好みで設定してください。

参考

  • Code Reference:get_comments
  • Code Reference:wp_list_comments
  • 以上。
    wp_list_comments() でコメントが表示されないときの対処方法でした。

    こっから先はあんまり関係ない話

    WordPressでサイト作る人、特に「仕事」として作る場合って、圧倒的にコーポレイトサイトが多いじゃないですか。
    そうすると、当然ながらコメント関連の機能は殺しますよね。
    企業サイトで、コメント機能を生かしているところってあまり見かけませんから。
    また、コメント機能をつけるにしても、最近ならFacebookなどのソーシャルなコメント機能と簡単に連携できますから、そっちでコメント書いてもらったりシェアしてもらった方がオイシイ事も多いわけで・・・

    それでなのかどうかわからないですけど、Wordpressの事を調べるときに、コメント関連のカスタイマイズとかの情報って、記事やテンプレート等のそれに比べて少ないと思いませんか?
    気のせいかもしれませんが・・・

    実は、今をさかのぼる事4年前、まだ私が、ほぼ個人事業主として活動していた頃にあるブログ記事を書きました。
    http://www.genki-works.com/2011/03/02/wp_list_comments でコメントが表示されない/
    ↑ それがコレです。

    ところが、自分で書いておいてすっかり忘れてしまっておりまして、最近まったく同じ状況で「wp_list_comments書いてるのにコメントでないじゃん!」ってハマってしまいました。

    で、いつものようにGoogle先生で調べていましたら下記の記事が見つかったわけです。
    https://ja.forums.wordpress.org/topic/23248

    これをヒントに、wp_list_commentsの第二引数や、get_commentsに辿りつき、解決に至ったわけです。

    で、「いやあ、助かった、、、これ書いてくれた人、回答してくれた人に感謝ですな。」なんて思いつつ・・・

    「お、何か元記事があるぞ。<このページと同じ現象がおきています>だって? よの中には同じようなことで悩んでいる人がいるものだな。この元記事の人は解決したんかいな?教えてあげようかな。。」

    なんて思ってリンクをたどってみると・・・

    「俺じゃん!」

    ってなってしまったわけです。

    いやあ、これ、マジ恥ずかしいです。
    そして、元記事の俺、なんかスゲー適当な事を解決方法みたいにして書いてるし。。。うわーうわーうわー・・・・

    ってなりながら、今ブログ書いてます。

    4年前に書いたことが、巡り巡って今日の悩みを解決してくれたことになんだかドラマチックだなとか、やっぱりネットっておもしれーなとか感じながら、(お前、自分で書いた記事くらい覚えとけや)という心の声が、やっぱり恥ずかしい今日この頃。

    あとで、昔のブログもなおしておかないとな・・・

    ログインしてる状態でも「非公開:」の記事が表示されないようする。

    WordPressの仕様なのですが、管理者としてログインしたまま記事の一覧を見ると、非公開の記事が 「非公開:」というテキストがついてそのまま表示されてしまいます。
    個人的には「下書きわかりやすい仕様だと思うのですが、中には「非公開なのに表示されてる!」とビックリしちゃう人がいますので、ログインしても非公開は表示しないという風にしてみようと思います。

    ヒントをいただいたのは、この記事。
    http://d.hatena.ne.jp/deeeki/20090917/wp_publish_only
    ありがとうございます。

    基本的には上記でOKだったのですが幾つか修正がありました。

    is_site_admin() がエラー
    この関数は新しいWordPressでは使えないようです。替りに is_super_admin() を使います。
    「下書き」や「非公開」のプレビューが見れなくなってしまう。
    考えてみれば当たり前なのですが、「公開」の記事しか表示されないようにしていますから、「下書き」や「非公開」の記事をプレビューしようとすると「ページが見つかりません」となってしまいます。
    でも考えて見ると、非公開と出るのが困るのは「一覧」状態ですし、プレビューは「シングルページ(投稿や固定ページ)」で行います。なので、is_singular() で判定して、シングルページではないときだけ、非公開とかを表示しない。という設定にしてみました。

    そこで、上記のスニペットを改造させていただき、一覧表示のときに「非公開」の記事は表示されなくなるが、「下書き」や「非公開」のプレビューはできる。というコードを書いてみました。

    function parse_query_ex() {
        if (!is_super_admin() && !get_query_var('post_status') && !is_singular()) {
            set_query_var('post_status', 'publish');
        }
    }
    add_action('parse_query', 'parse_query_ex');
    

    こんな感じです。

    • シングルページのサイドバーとかに記事一覧だしているときとかは非公開が出ちゃうかも。
    • 固定ページをカスタマイズして記事一覧だしてたりするときも出ちゃうかも。

    【感謝】
    この記事を書くにあたって、下記サイトの記事に大変お世話になりました。
    http://d.hatena.ne.jp/deeeki/20090917/wp_publish_only
    有り難うございます。m(_ _)m

    WordPressプラグイン The Events Calendar 各テンプレートのカスタマイズ方法

    仕事でちょっと関わったのですが情報が英語ばかりで手間取ったので備忘を兼ねて・・・

    【プラグイン名】
    TThe Events Calendar
    https://wordpress.org/plugins/the-events-calendar/

    公式サイト
    https://theeventscalendar.com/

    上記のプラグインはイベントカレンダーをWordpressに設置するプラグインなのですが非常に多機能で完成度が高いプラグインです。
    ドキュメントやフォーラムも充実しています。(基本全部英語なんですが、コード探したりするだけなら英語できなくてもなんとなくあたりをつけて情報探したりできます)

    今回の問題は、このプラグインが吐き出すカレンダーやウィジェットなどの見た目を変えたいというもの。

    テンプレートファイル自体は、
    WordPressインストールディレクトリ/wp-content/plugins/the-events-calendar/views
    の中にいろいろと入っていますので、該当するっぽいテンプレートを編集すれば、見た目を変えることができます。
    が、やっぱりというかなんというか、pluginsディレクトリ内のファイルなので、アップデートなどで元に戻ってしまう事があるようです。

    そこで、下記の方法でテンプレートを上書きする方法がオススメです。

    1. 今使っているテーマのディレクトリ内に /tribe-events というディレクトリを作る
    2. その中に、プラグインの/viewsディレクトリと同じ階層でファイルを置くと、該当するテンプレートを置き換えることができます。

    例):ウィジェットで表示される「リスト表示」の見た目を変える

    1. [プラグインディレクトリ]/the-events-calendar/views/widgets/list-widget.php を編集する。
    2. [今使っているテーマ]/tribe-events/widgets/list-widget.php としてアップロードする。

    例):イベントの詳細表示(カレンダーとかからイベントをクリックしたとき開く)の見た目を変える

     

    1. [プラグインディレクトリ]/the-events-calendar/views/single-event.php を編集する。
    2. [今使っているテーマ]/tribe-events/single-event.php としてアップロードする。

     

    以上で編集完了。

    試していないけど同じ要領で、views内のテンプレートを自由に変更できると思われます。

    これなら、テーマ内にテンプレートがあるので、アップデートなどで上書きされ元に戻ったりする心配はありません。