好きなCSS frameworkはFoundation5です。
wordpressでレスポンシブなサイトを作っています。

Foundationで作られたwordpressのthemeのFoundationPressをいじって作っています。
その時に使った事のメモです。

やりたかったこと

single-pageにスライドショー作りたかったので、
FoundationにあるOrbitというものを使う
予定でしたがどうやって画像を指定すればいいか、わからなかったのです。

ですが、いろいろ教わった結果、Wordpressのプラグインと組み合わせることで解決できました。

Custom Field Suite

インストールや使い方に関してはググってもらったらいいかと思います。

今回は６枚のすらいどにするつもりだったので、下記のように入力フィールドを５つ作成して
customFieldSuiteの例

URLを返すようにする。

あとはviewの部分に

<ul class="example-orbit" data-orbit data-options="bullets:false; slide-number:false; ">
<?php
  for( $i = 1 ; $i < 6 ; $i++ ){
    if( $cfs->get( 'image' . $i , $post->ID ) ){ ?>
      <li data-orbit-slide=" slide<?php echo $i ; ?> ">
        <img src="<?php echo  $cfs->get( 'image' . $i , $post->ID ); ?>" alt="slide" />
      </li>
  <?php	}}	?>
</ul>
<ul class="small-block-grid-4"><!--サムネイル-->
<?php
  for( $i = 1 ; $i < 7 ; $i++ ){
      if( $cfs->get( 'image' . $i , $post->ID ) ){ ?>
          <li><a data-orbit-link="slide<?php echo $i ; ?>">
            <img src="<?php echo  $cfs->get( 'image'. $i , $post->ID ); ?>" alt="slide" /></a></li>
<?php		}}	?>

gistがおかしいのでコードにした
とまあこんな感じにpostする数だけループを回し、帰ってきたリンクを挿入すれば
綺麗なスライドショーになります。
また、今回は画像のスライダーにサムネイルを表示するようにしました。
これは下記のリンクを参考に作成しました

Orbit | Foundation Docs
http://foundation.zurb.com/docs/components/orbit.html

Foundationのスライダーをサムネイル付きにする方法 | Welcart カスタマイズ
http://welcustom.net/foundation-orbit-slider-thumbnail/

最後に

どうすればThe_contentの中身をいじれるのかなーと考えていましたが
そんなことしなくてよかったんですねｗ

やっとwordpressを理解し始めたように思います。