完成図

120507-1

クリックするとフェイドしながら切り替わります。フッターにありますので、実際の動きは触って確かめてみてください。

新着記事とランダム記事を関数として定義

functions.php

どちらもbl6さんの記事を参考にさせて頂きました。functions.phpに書いちゃうことで、htmlがスッキリして超素敵です。

追記:get_postsで書いてみる

とってもメジャーだったquery_postsという方法、今後はあまりお勧めされなくなってくるとのことですので、サブクエリ発行に適しているというget_postsで書いてみました。

(追記日:2013年7月24日)

タブメニューをつくる

jQuery

jQueryでこんなことしたいなーとか思って探してみると、だいたいコードが載ってるという…。いつもながら凄すぎる…!

私はEasy Smooth Scroll Linksというプラグインを入れていたのですが、スムーズスクロール系は相性が悪いみたいです。バッティングしない方法は、こちらの記事をご参照ください。

html

先ほど定義した関数をタブのエリア内に読み込みます。かっこ内の数字が件数になっています。カテゴリはテンプレートタグでそのままいけます。

css

cssはこのサイト用のものなのであんまり参考にならないと思いますが、一応。

あんまりタブっぽいデザインにならなかったので分かりにくいかな…と思ってアイコンとか入れてみたんですが…。どうかな…。。

自分で書くことは、何より勉強になる

とはいえ、ゼロからjQueryを書けるほど私もまだ分かっていないので、いつもいろんなサイトから勉強させて頂いているのですが、少なくともプラグインを入れて有効化しておしまい、ていうよりは自分の糧になっている気がします。

どこかのサイトさんのコードを拝借しても、環境が違うので一発で動く!っていうことは少ない気がします。検証して、動かなくてw、悩んで解決するという過程が非常に重要なのだと。そしてそれをブログの記事としてまとめてみると、あ、こんなに時間かかったのに文字にするとこれだけなんだな、ということにも気づけたりするんですが、何気にこの“まとめる”という作業が重要なんじゃないでしょうか。

「自分でもよく分かってないけどとりあえず動いた」で終わりにしちゃうことも出来るけど、記事にしようとするなら、他人に分かりやすくするために動いたコードの整理整頓をしなきゃいけないし、そうこうしているうちに曖昧だった部分がクリアになってきます。

アウトプットって、大事なんですね。

  • このエントリーをはてなブックマークに追加
  • follow us in feedly 641
  • RSSを登録

公開日:2012/05/07
更新日:2014/02/26


コメントを残す




*印は必須項目です。コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にですがスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)


back to top