[WordPress] Import Facebook Events プラグインのイベント表示部分のブロック数を変えてみた

先日、 IKUKO Labサイトに、facebookのイベントをインポートするプラグインを入れました。
その使い方と、デフォルト3列の一覧表示を1列にカスタマイズしたので方法をメモしておきますね。

この Import Facebook Events というプラグイン、まだ試運転中ですが、今のところいい感じ。

とりあえず集客がしやすいのでfacebookでイベントを立てるんだけど、それをいちいちWordPressのブログに転載するのが超面倒で、ついfacebookだけで終わらせちゃってブログに開催した記録を残せない〜😢
…ってなってる人にはオススメかな、と思います。
facebookでイベントを立ててない場合でも、手書きで新規イベントを登録できるのでだいじょうぶ。

使い方

インストールして有効化すると2カ所に分かれたメニューが表示されるので、最初に、Facebook ImportのSettingタブを開いて必要な情報を入れます。

必要な情報というのは Facebook App ID と Facebook App secret ですが、それぞれに 「from here」 というリンクが張られているので、そこからfacebookにアクセスして必要な情報を用意します。

それができたら、Importタブから、読み込みたいfaceboookイベントのID(長い数字のやつ)をコピペして、手動で取り込み!

取り込まれたイベントは、左側メニューの Facebook Events に一覧表示されます。このイベント一覧を、公開サイトに表示するには

http://あなたのドメイン/facebook-event

にアクセスします。投稿一覧と同じで、最新のものがから一覧表示されます。

これをイベント一覧ページとして使ってもいいのですが、ブログ記事と同じで開催日が終わったイベントでもいつまでもそこに表示されてしまいます。

もし、開催予定のイベントだけ表示したいと思う場合には、専用のページを作って、[facebook_events posts_per_page = “12”] というショートコードを書くと、下のようなブロックタイプのレイアウトで、開催予定のイベント一覧が作れます。posts_per_page = “12” というのは表示させる数を言っているのですが[facebook_events] だけでもOKです。

こうして表示させたイベントは、開催日が過ぎると表示されなくなります。

デフォルトではこのように3列に並ぶ仕様でカッコイイんですが、イベント名が長いときは短縮されてしまって何のイベントだか分からない。

そこで、3列だったのを、1列に変えることにしました。 そのほうがイベント名が読みやすいかなと思って。

1列に変えた方法

上の画像が、イベントブロックを1列に変えたところ。
横幅が狭くて右に余白があるのは使ってるテーマの問題で、基本的には横幅いっぱいになるはずです。

※ちなみに、青い字のイベント名の下の不自然な空欄ですが、ここには住所が表示されるはず。なのですが、イベントを読み込むときに住所がうまく読み込まれないみたいで、空欄になってしまいました。住所の表記の仕様が違うからじゃないかと思います。もし住所を表示させたいばあいは、個別のイベントページの下のほうに住所欄があるので、Address の欄を埋めると、2段目に黒字で表示されます。やってみて!

では、この青いブロックを3列から1列に変えた方法を書きますね。今書かないと、自分でもすぐに忘れて二度と思い出せないので、メモとして。

管理画面に、列数を変えるところが見当たらなかったので、プラグインフォルダ内のファイルを直接、編集しました。ファイルはこれです。見えるかな。

プラグインフォルダの中の、 import-facebook-events の中の includesフォルダの中の、class-import-facebook-ebents-cpt.php  です。

このファイルをエディターで開いて、634行目あたりに、

$col = 3;
$css_class = ‘col-ife-md-4’;

て書いてあるところがあるので下の図のように数字を変えます。

$col = 1;
$css_class = ‘col-ife-md-12’;

赤い矢印の部分に、いくつかの組み合わせが書いてあるので、ピンと来るかもしれませんが、3列にしたいときはmd-4のスタイルシートを、2列にしたいときはmd-6のスタイルシートを、というふうに、かけ算したとき必ず12になる組み合わせにします。

たぶんこれ横幅を12のグリッドに分けて幅の管理をするBootstrapというやつですね?
そうですね?
恥ずかしながらこの仕組み、最近ようやく知ったのですが、便利ですね。

ってことで、これ、WEBディレクトリ内のファイルを編集するので、お取り扱いは自己責任でお願いします。プラグインのアップデートで消えるかも、というのも要注意。まあ、消えたら消えたで、元の3列に戻るだけなので大勢に影響はなさそうですが。

※ちなみに2
このプラグインのファイルの編集、管理画面からもできます。
プラグイン→プラグインの編集から、当該プラグインに移動して、このファイルを編集します。
import-facebook-events/includes/class-import-facebook-events-cpt.php

くれぐれもお取り扱いには気をつけて!

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク