ECCUBEプラグイン WpPostのカスタマイズ ページング機能

はいどうもこんばんわANDくんです。

EC-CUBEのプラグイン、WpPostのカスタマイズシリーズでお送りしています。

今回はWpPostの記事を取得しつつ、ページング機能を付けるカスタマイズを行いたいと思います。
WpPostは記事を全件取得しつつ、ページングするような機能が付いてなかったのでそれをつけます。

カスタマイズ方法としてはあまり良くないカスタマイズしてると思うので参考程度に。もうちょっとどうにかしたかった。

まず、ページを作成します。
そして、そのページのメインコンテンツ部分を空にし、WpPostのブロックをメインコンテンツ部に表示になるように配置します。

        $expost = $wppost_postlist['postlist_exclude'];

から

        /**
         * コメント条件の取得
         * 
         * 
         */

の間に

        /* ▼▼▼ページャーをするための追加処理▼▼▼ */
        // テンプレートに渡すための初期化変数
        $this->range = 3; //前後にどれだけの数表示するか

        if(!empty($_GET["pages"])){
            $pages = $_GET["pages"];
            if(is_numeric($pages)){
                $pages--;
            }else{
                $pages = 0;
            }
        }else{
            $pages = 0;
        }
        $offset = $pages * $postnum;

        //記事数取得
        global $wpdb;
        $this->numposts = $wpdb->get_var("SELECT count(*) FROM $wpdb->posts WHERE post_status = 'publish' AND post_type = 'post'"); //全記事取得
        $this->pages_num = $pages + 1;
        $this->max_pages_num = ceil($this->numposts / $postnum);

        if($this->pages_num < 1 || $this->pages_num > $this->max_pages_num ){
            $this->pages_num = 1;
            $offset = 0;
        }
        $this->loopStart = $this->pages_num - $this->range;
        if($this->loopStart < 1)$this->loopStart = 1;
        $this->loopEnd = $this->pages_num + $this->range + 1; //smartyのループはループ終端の一つ前で終わるようなので+1する
        if($this->loopEnd > $this->max_pages_num + 1)$this->loopEnd = $this->max_pages_num + 1;

        /* ▲▲▲ページャーをするための追加処理▲▲▲ */

を挿入します。

        $args = array(

の中の

            'offset'           => 0,

            'offset'           => $offset,

に変更します。

処理部は以上でOK。次にテンプレート部分でページャーを作ります。

<div class="pagination">
    <div class="pager">
        <!--{if $pages_num > 2 && $pages_num > $range+1}--><!--{* 最初へ *}-->
            <a href="<!--{$smarty.server.SCRIPT_NAME}-->" class="first">最初へ</a>
        <!--{/if}-->
        <!--{if $pages_num > 1}--><!--{* 前へ *}-->
            <a href="<!--{$smarty.server.SCRIPT_NAME}-->?pages=<!--{$pages_num-1}-->" class="prev">前へ</a>
        <!--{/if}-->
        <!--{section name=i start=$loopStart loop=$loopEnd}--><!--{* ループ箇所 *}-->
            <!--{if $pages_num == $smarty.section.i.index}-->
                <span class="page_here"><!--{$smarty.section.i.index}--></span>
            <!--{else}-->
                <a href="<!--{$smarty.server.SCRIPT_NAME}-->?pages=<!--{$smarty.section.i.index}-->"><!--{$smarty.section.i.index}--></a>
            <!--{/if}-->
        <!--{/section}-->
        <!--{if $pages_num < $max_pages_num}--><!--{* 次へ *}-->
            <a href="<!--{$smarty.server.SCRIPT_NAME}-->?pages=<!--{$pages_num+1}-->" class="next">次へ</a>
        <!--{/if}-->
        <!--{if $pages_num < $max_pages_num-1 && $pages_num < $max_pages_num-$range }--><!--{* 最後へ *}-->
            <a href="<!--{$smarty.server.SCRIPT_NAME}-->?pages=<!--{$max_pages_num}-->" class="last">最後へ</a>
        <!--{/if}-->
    </div>
</div>

こんな感じの物をページャーを置きたいところに配置します。
形とかもっと良い物あるかもしれませんが、最低限の機能は備えているかなと。
あとは軽くデザインを変更してください。今回はDB修正必要なかったはず・・・です。
ちょっと過去の事なので抜けてることもあるかもしれませんが・・・。

このような対応は下記のサイトのブログ箇所で行っています。参考までにご確認してみてください。
商品は・・・気が向いたら購入してみてはいかがでしょう!

コレクションシバ

ECCUBEプラグイン WpPostのカスタマイズ スマートフォンで表示

どうもこんばんわANDくんです

本日はECCUBEプラグインのWpPostのスマートフォン版でも有効にさせる方法を書いていきます。

WpPostは足りない機能の一つとしてスマートフォン版で使えないって事がありますね。

今回の修正はデータベースの変更を行いますので、よくわからないとかがある場合はECCUBEのストアで販売してあるプラグインを購入いただくのがいいと思います。
でもまあデータベースを修正できるのであればそんなに難しくは無いかなと思います。

また、WpPostはインストールされている前提で話を進めていきますね。

まず、ブロックについて

スマートフォン版にブロックを先に管理画面から作成します。そのブロックをWpPostのブロックとなるようにデータベースで指定します。

dtb_blocテーブルをいじっていくことになります。mysqlやpsqlやphpmyadminやらいろいろ環境があると思いますのでそこは各自にお任せします。

データベースをチラッと見て、今追加したブロックを確認、bloc_idを覚えておきます。

where句は device_type_id = 2 and bloc_id = (該当するid番号) みたいな感じで変更するのを指定します。
bloc_idはdevice_type_idが違った場合に被る事があるので、device_type_idとbloc_id両方で指定する必要があります。

変更するカラムは

php_path
deletable_flg
plugin_id

この3つのカラムをPC版のWpPostのブロックに習い同じように変更します。

frontparts/bloc/plg_WpPost_list.php 
0
(数字 環境による)

それぞれおそらく 空 1 空 の形から上記に変更します。これでブロックの設定は完了。
くれぐれも別のブロックを書き換えないでくださいね!

次はwppost/plg_WpPost_category.php wppost/plg_WpPost_post.php の二つについて。

まず先ほどと同じように今度はページを新規で2つ作ります。 対象が2つだから2つ作成します。

ページ名: WordPressポスト表示
ファイル名: plg_WpPost_post
ページ名: WordPressカテゴリ表示
ファイル名: plg_WpPost_category

とりあえずはこんな形で2ページ作成しておきます。わかりやすいのでPC版と合わせる形ですね。

セレクト文をしてみます。弊社はPostgresqlです。他の環境ではわからないですが(特にPHPから触る系)まあほとんど同じでしょう。

select device_type_id,page_id,page_name,url,filename,edit_flg from dtb_pagelayout where page_name like '%WordPress%';

セレクト文をすると弊社のカスタマイズ時では下記のように

 device_type_id | page_id |       page_name       |                url                |           filename            | edit_flg
----------------+---------+-----------------------+-----------------------------------+-------------------------------+----------
             10 |      40 | WordPressカテゴリ表示 | wppost/plg_WpPost_category.php    | wppost/plg_WpPost_category    |        2
             10 |      39 | WordPressポスト表示   | wppost/plg_WpPost_post.php        | wppost/plg_WpPost_post        |        2
              2 |      39 | WordPressポスト表示   | user_data/plg_WpPost_post.php     | user_data/plg_WpPost_post     |        1
              2 |      40 | WordPressカテゴリ表示 | user_data/plg_WpPost_category.php | user_data/plg_WpPost_category |        1

そうしたら今度はDBの修正し、上記のdevice_type_idが2の物をPC版の物と同じようにします。

update dtb_pagelayout set url = replace(url,'user_data','wppost'),filename = replace(filename,'user_data','wppost'),edit_flg = 2 where device_type_id = 2 and (page_id = 39 or page_id = 40);

上記の場合なら具体的にはこう。

この後、ECCUBEからもう一度スマホ版の二つのページを編集で再登録しなおし(スマホ版のWpPostページのtplの再作成)してひとまずOKです。

PC版のテンプレートを参考にスマホ版を作成していきましょう。

また、スマホ版のuser_dataフォルダに最初にページを作成しようとした分のゴミが残ってるかと思いますが、気になる場合は削除しておくといいでしょう。

こんな感じですね。ECCUBEをわかってみるとそこまで難しくないカスタマイズとなります。

ECCUBEプラグイン WpPostのカスタマイズ 記事タイトルを表示

なんか暑くなってくるらしいですね。虫が増えるのかと思うと少し嫌な気分になってきますANDくんです。

ECCUBEプラグインの中で、WordPressと連携し、ECCUBE上でWordPressの内容を表示できるプラグインがあります。

ECCUBE上でWordPressを表示させるためにはこれを使わなければそれなりに難しいカスタマイズになってしまうのかなっていう気がしますね。
まあこのプラグインを使ってもいろいろ下準備とかが必要になり、大変なものではあるのですが・・・。

無料のWpPostですが、使ってみると案外機能が足りないなと感じます。
機能を多くしたかったりスマートフォンに対応させるためには有料のを買わないといけないですし、その機能も何が追加されるのかとか思うところがありますので、必要なところは自分でカスタマイズする必要があるのかなと思うしだいであります。

ライセンスがLGPLの物なので、カスタマイズしても、カスタマイズ方法載せても大丈夫なはず・・・ですよね。

今回はタイトルバーに記事タイトルを表示させるカスタマイズを行いたいと思います。
とは言え、バージョンが最新の物は無理やり対応させています。が、そのやり方もあまり気に入らないやり方だったので個人的には変えたい所です。
しかし、javascriptでページのタイトル変更した場合、検索エンジンってそれを拾ってくれるんですね。てっきりjavascriptは無視されるものなのかと思っていました。

今のWpPostの記事を表示させると、記事タイトルに一瞬「WordPressポスト表示」となってその後にjavascriptで書き換えられることとなります。
siteframe.tplを変更し、タイトルの形式を変更していた場合その形も変更されてしまいます。(個人的にはECCUBEデフォルトのタイトルの表示が気に食わないってのありますが。)

WordPressポスト表示はその表示するページの元々のページ名、そのページ名を普通に表示させるようにしつつ、javascriptを無効にしちゃいましょう。

/eccube/data/downloads/plugin/WpPost/templates
にあるplg_WpPost_header_add.tplをいったん空にするなり全部コメントアウトするなりします。これでjavascriptは読み込まれなくなりますね。
本当はそもそもこのファイルをインクルードしないようにすればいいのですが、どこですればいいのかちょっと見当たりませんでした。

次に/eccube/data/downloads/plugin/WpPost
にあるplg_WpPost_LC_Page.phpを開き

public function init() {

内の一番後ろに

        if ($_GET["postid"]) {
            $postid = $_GET["postid"];
            $wp_post_base = get_post($postid, 'ARRAY_A');

            $this->tpl_title = $wp_post_base['post_title'];
        }

これを追加します。
これでカスタマイズ完了。
javascriptに頼らずにタイトルを表示することができるようになります。

最新版ではECCUBE側のバージョンに合わせてplg_WpPost_LC_Page_XXXX.phpみたいなファイルがたくさんあるので、バージョンによっては違うファイルを変更する必要があるかもしれませんが、たぶん同じ方法で行けると思います。

WpPostさんもこれを正式に採用していただけませんかねー_(:3 」∠ )_って思う今日この頃でした。

関係ないけど、ちょっとあるけど、WpPostのページにgetを無く表示した場合、全記事表示してしまうのは脆弱性じゃないのかな・・・?って思いました。

Facebookのフォトストリーム(全投稿画像)のAPI

関係ないけど今住んでるとこの近くのすき家が数ヶ月のあいだパワーアップ閉店開始してしまいました。
チーズ牛丼が食べられなくなってしまう・・・そんなANDくんです。こんばんわ(昼1時)。

FacebookのAPIを取得するときに、特定のalbumから取得するみたいなやり方はたくさん情報がみつかります。

全ての投稿画像を取得したいっていうAPIはなかなか見つかりませんでした。アルバムから全取得とかしないとダメなのかなーとか頭によぎっていたのですが、ちゃんと存在するようですね。

  • http://graph.facebook.com/ページ番号/photos/uploaded

の形式のようですね。

弊社の場合は

  • http://graph.facebook.com/160617914001202/photos/uploaded

もしくは

  • http://graph.facebook.com/parafamily.co.jp/photos/uploaded

こんな感じですね。
まあ後ろにはいろいろステータスがつくわけですが。
photosだけだとプロフィール画像とかを取得するだけですし、こういうAPIがあったんですね。なかなか情報が無くて苦労しました。

ただ、このURLでは全画像の枚数を取得できないので、そこはアルバムから合計求めるしかないんですかねー?
とりあえず今はそういう形式で取得することにしています。

注意点としてはユーザのものをAPIで取得するのはオススメしないってことぐらいですかね。
FacebookAPIの普通だとは思いますが・・・ こういうページの情報は企業用ページを作成してそちらを取得するようにしましょう。
権限とかの問題でいろいろ面倒くさく現実的ではないのです。Facebookの個人の情報を取得する部分のAPIは。

そしてそれを使ってそんなこんなしているのが下記のURLになります。
参考程度にチラッと見て、ついでにお花のアレンジを買うといいと思います(何

http://wnico.jp/album.php

参考になればと思います。