投稿記事にスライドショーの追加

画像スライダーをつけるには
Meta Slider
プラグインを使います

本来なら撮影した写真を使うのですが
今回は実験
とはいっても最初から素材を用意するのは大変なので
無料写真素材サイト
FOODIE’S FEED

のものを使わせていただくことにします

なお、本来は、カスタム投稿でアップロードしたものを
使う予定でしたが、方法がわからないため
プラグインと投稿ごと行うことになります

まずは
Meta Slider
をインストールします

ダッシュボード > プラグイン >
新規追加で
Meta Slider
で検索し、インストールと有効化を行います

するとダッシュボードに
Meta Slider という項目ができるので
これをクリックし、
最初のスライドショーを作成するため
＋ボタンをクリックします

名前が新規スライダーだとわかりにくいので
sweet に変更し、スライドを追加をクリック

ファイルアップロード画面になるので
ダウンロードしておいたファイルを選択します

なお、アップロードするサイズが大きいとエラーがでます

初期設定では２MBなので
変更しないとほぼ無理だと思います

今回は Ubuntu 14.04 での設定変更です
方法は２つあり
php.ini を変更する
もしくは
.htaccess での設定になります

今回はphp.ini の変更にします

sudo vim /etc/php5/apache2/php.ini

で設定ファイルを開き

/post_max
で検索

６７３行目ぐらいに

post_max_size = 8M

があるので

post_max_size = 2000M

に変更

次に、
/upload_max
で検索し
８０５行目あたりの

upload_max_filesize = 2M

を

upload_max_filesize = 2000M

に変更

これで２GBまでアップできます

設定できたら

sudo service apache2 restart

で apache2 を再起動

もう一度アップロードすると成功します

アップロードが完了すると
一覧ができるので
保存をクリックします

次に、投稿記事に挿入していきます

テストとして
ダッシュボードの投稿から
Hello world を選びます

モードをビジュアルからテキストに変更し
スライダーを追加
をクリックします

どれを追加するか選ぶ画面になりますが
今回は１つしかないので
そのまま
Insert slideshow
をクリックします

すると、

[metaslider id=16]
というように
ショートコードが挿入されます

これで投稿にスライダーが追加されます

今回は記事の下へ追加しましたが
場所を変更することで
投稿内の好きな場所へ配置することができます

なお、今回の変更で不要になるギャラリー部分は削除しますので

<h3>ギャラリー</h3>
<img src="image/food.jpg" alt="" width="300" height="300">

を削除します

これでソースは

<?php get_header(); ?>

<?php if(have_posts()): while(have_posts()): the_post(); ?>

  <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  <?php if ( get_post_meta($post->ID,'ShopName',TRUE) ): ?>
  <h3><?php echo post_custom("Impression")?></h3>
  <?php endif;?>
  <?php the_content(); ?>
  <img src="image/tee.jpg" alt="" width="300" height="300">

  <h3>メニュー</h3>
  <div data-role="collapsible">
    <h3>私のおすすめメニュー</h3>
    <p>イカスミパスタ</p>
  </div>
<?php if ( get_post_meta($post->ID,'ShopName',TRUE) ): ?>
<h3>店舗情報</h3>
  <table data-role="table" data-mode="reflow" class="ui-responsive">
    <thead>
      <tr>
        <th>店名</th>
        <th>定休日</th>
        <th>営業時間</th>
        <th>ランチ価格</th>
        <th>住所</th>
        <th>電話番号</th>
        <th>HP</th>
        <th>アクセス</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><?php echo post_custom("ShopName")?></td>
        <td><?php echo post_custom("Holiday")?></td>
        <td><?php echo post_custom("Time")?></td>
        <td><?php echo post_custom("lunch")?></td>
        <td><?php echo post_custom("Address")?></td>
        <td><?php echo post_custom("tel")?></td>
        <td><?php echo post_custom("Hp")?></td>
        <td><?php echo post_custom("Access")?></td>
      </tr>
    </tbody>
  </table>
<h3>周辺地図</h3>
<?php
    $map = esc_html(get_post_meta($post->ID,"Address",true));

    echo do_shortcode('[map addr="'.$map.'" height="400px" zoom="16"]');
 ?>
  <?php endif;?>

  <?php endwhile;   else: ?>
    <p>記事はありません</p>
  <?php endif; ?>


<?php get_footer(); ?>

となります

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル