FacebookのFeedとSwiper.jsを使ってタイムライン表示をアレンジ

Customize

Facebookページのfeedをjson形式で取得して、自由な形でウェブサイト上に表示できることが分かったので、今度はそれを利用したカルーセル表示を実現してみます。

とりあえず、作成してみた結果はこちら。

[myphp file=’facebook_swipe’]

 

アレンジ前の基本形は、こちらになります。→　facebook
これを基にして、デザインを変更していきます。大まかな流れは以下のようになります。

  1. スライダー表示を実装するために、Swiper.jsを導入する。
  2. swiper.cssをヘッダ内に読み込ませるためにwp_enqueue_scripts関数へのアクションフックをfunctions.phpに追加する。
  3. feed描出用のphpファイルを作成して、ショートコードで呼び出す。
  4. スライダー表示を調整するため、scriptとcssを追加する。

Swiper.jsはレスポンシブ対応なスライダーが作成可能で、フリック操作もできるので、スマホやタブレットでも大変利用しやすいのではないかと思います。

以下、ひとつずつ見ていきます。

１．Swiper.jsの導入
Swiper
idangero.us

Swiper.jsの公式サイトからスクリプトをダウンロードして解凍します。distフォルダ内のswiper.min.cssとswiper.min.jsを自分のサイトのテーマフォルダにアップロードします。

２．Swiperファイルのサイトへの読み込み

headタグ内にswiper.min.cssを読み込むために以下のような関数をfunctions.phpに追加します。今回は子テーマフォルダに「css」というフォルダを作ってそこにアップロードしたので、$src引数は「get_stylesheet_directory_uri() . ‘/css/swiper.min.css’」としています。（get_template_directory_uri()関数だと親テーマのディレクトリを参照してしまうので注意。）

/*-------------------------------------------*/
/*  swiper.min.cssを追加
/*-------------------------------------------*/
function add_files() {
  wp_enqueue_style( 'swiper', get_stylesheet_directory_uri() . '/css/swiper.min.css', "", '20190704' );
}
add_action( 'wp_enqueue_scripts', 'add_files' );
３．描出用コードの作成

描出用のphpコードを作成して、テーマフォルダ内にアップロードします。ショートコードで呼び出す方法はこちらに詳しく書いたので、それをもとにいくつかの部分を変更します。

まず、Swiper.jsを使うために全体をdivで囲み、クラス指定をします。スライドの一つ一つの要素もdivでクラス指定をします。

【Swiper.jsの基本的なクラス指定】

<div class=”swiper-container”> // スライダー全体のクラス指定

<div class=”swiper-wrapper”> // スライド全体のクラス指定

<div class=’swiper-slide’>要素１</div> // スライド一つ一つの要素のクラス指定
<div class=’swiper-slide’>要素２</div>
<div class=’swiper-slide’>要素・・・</div>

</div>

<div class=”swiper-button-prev”></div> // 左矢印
<div class=”swiper-button-next”></div> // 右矢印

<div class=”swiper-pagination”></div> // ページネーション

</div>

実際のphpコードは下記のようにしてみました。

facebookから取得した異なる大きさの画像を使うので、大きさをそろえるために要素はdivで大きさを指定して、画像を背景画像として読み込んでいます。swiper.min.jsファイルもここで読み込んでいます。

全体としてこのような形になります。

<div class="swiper-container">
<div class="swiper-wrapper">

<?php
$url = 'https://graph.facebook.com/【FacebookページのID】/?fields=posts{id,message,story,created_time,full_picture,picture,permalink_url}&access_token=【Facebookページの無期限のアクセストークン】&locale=ja_JP';

$jsonData = file_get_contents($url);
$json = json_decode($jsonData, true);
$i=0;

foreach ($json['posts']['data'] as $data) {
if (empty($data['message'])){ continue;}
else {
if ($i >9){ break;} // 10件まで表示
else {

$f_contentStr = $data['message'];
$f_permalink = $data['permalink_url'];	
$f_contentStr = strip_tags($f_contentStr); // テキスト取得
$f_contentStr = preg_replace("/(\015\012)|(\015)|(\012)/", "", $f_contentStr); // 改行を削除
$len_c = mb_strlen($f_contentStr); // コンテンツ文字数
$len_c_max = 80; // 上限文字数
$extention = '･･･'; // 末尾に付ける文字
if($len_c>$len_c_max) {
    $f_contentStr = mb_substr($f_contentStr,0,$len_c_max); // 文字抜き出し
    $f_contentStr = $f_contentStr.$extention; // 末尾に付与
};

  if (isset($data['full_picture'])) {
    $f_pic = $data['full_picture'];
  }else{
    $f_pic = "【ダミー画像のURL】"; // 画像がなかったら代わりの画像を
  }

$f_date = $data['created_time'];
$f_date = mb_substr($f_date,0,10);

print "<div class='swiper-slide' style='position:relative; height:250px; margin:auto; background:url(" . $f_pic . ") no-repeat center top / cover;'>";
print "<div class='f_date'>" . $f_date . "</div>";
print "<a href='" . $f_permalink ."' target='_blank'><div class='f_content'>" . $f_contentStr . "</div></a>";
print "</div><hr>";
}
$i++;
}
}
?>
</div>

<!-- ナビゲーションボタン -->
<div class="swiper-button-prev swiper-button-white"></div>
<div class="swiper-button-next swiper-button-white"></div>

<!-- ページネーション -->
<div class="swiper-pagination"></div>

</div>

<script src='【ファイルへのパス】/swiper.min.js'></script>
４．cssとscriptの追加

ページネーションの丸印を外側に出すために、.swiper-containerの下側に余白を設定し、.swiper-wrapperをmargin-topで余白分だけ上にずらします。全体の高さを280px、wrapperの高さを250pxにして余白を30px取っています。

.f_date（日付部分）を「position:absolute; top:0px; right:0px;」として要素の右上に日付が表示されるようにします。.f_content（本文抜粋）は「position:absolute; display:block; bottom:0px;」として要素の下のほうに文字を載せます。背景に色を重ねて文字が見やすくなるようにしています。ブロック指定することで、文字全体にリンクが効くようにしました。

.swiper-container {
  padding-bottom: 30px;
  height: 280px;
}

.swiper-wrapper {
  height: 250px;
  margin-top: -30px;
}

.swiper-pagintaion {
  margin-bottom: -10px;
}

.f_date {
  position:absolute; 
  top:0px;
  right:0px;
  color:#fff;
  padding:5px;
  background:rgba(65, 105, 225, 1);  
}

.f_content {
  position:absolute;
  display:block;
  bottom:0px;
  color:#fff;
  padding:10px;
  background: rgba(0, 0, 0, 0.6);  
}

Swiper.jsの詳細設定のためのscriptを追加します。

<script>
var mySwiper = new Swiper ('.swiper-container', {
    loop: true,
    slidesPerView: 2,
    spaceBetween: 5,
    centeredSlides : true,
    breakpoints: {
        767: {
            slidesPerView: 1,
            spaceBetween: 0
        }
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
    pagination: {
        el: '.swiper-pagination',
 　　　　clickable: true,
    },
})
</script>

 

 

タイトルとURLをコピーしました