jqueryで作るカスタム投稿の画像スライダーライブラリ

jQueryで作るカスタム投稿の画像スライダーライブラリ

2012.9.8WordBench神戸上村崇

Saturday, September 8, 12

自己紹介

• 上村崇 ( うえむらたかし ) • フリーランスのシステムエンジニア• サーバインフラ、組込みシステム、Web とか。• C、PHP。最近はCodeIgniterとかFuelPHPがブーム。

• IT 業界のキャリア 10 年ちょっと• 西宮在住

@uemera uemura


XOOPS勉強会準備

JavaScript

WordPress サーバインフラ

PHPフレームワークFuelPHP、CodeIgniter

最近のオレ

さくらVPS(CentOS)、LAMP、メールサーバ、git、samba、netatalk

jQuery

主に技術サポート

WordBench, サーバ関係


本日の流れ

• まずは完成形のデモ

• jQueryスライダーbxsliderとは?

• カスタム投稿タイプとは?

• WordPressで画像スライダーを作る


デモ

http://localhost/wordpress341/?post_type=akb48Saturday, September 8, 12

http://localhost/wordpress341/?post_type=akb48


このスライダーの特徴

• 画像スライダーとしても使える。

• スライダーに記事(画像)を追加・編集できる。


本日の流れ

• 完成形のデモ





divブロックまるごとスライダー化できる

<div id="slider1">

<div>Slide one content</div>

<div>Slide two content</div>

<div>Slide three content</div>

<div>And so on...</div>

</div>


css、js読み込み

コンテンツ

スライダー操作のためのID

「画面表示時に”foo”をスライダー化する」処理を行うJavaScript


デモ

http://localhost/bxslider/index.htmlSaturday, September 8, 12



本日の流れ






・投稿・固定ページ・カスタム投稿タイプ


投稿

固定ページ

ブログを投稿するのに使う

静的ページを作るのに使う


固定ページはここに出る


Custom Post Type UI


ラベル(人が識別するための名前)

AKB48

投稿タイプ名(URLとして使用される文字列)

akb48


投稿

AKB48のカスタム投稿タイプができた

固定ページ


functions.phpに書く方法

投稿タイプのラベル(日本語可)

メニューに表示する位置

公開する

アーカイブ表示ON

カスタム投稿タイプ名(半角小文字で)


詳しい使い方は register_post_type で検索

http://wpdocs.sourceforge.jp/関数リファレンス/register_post_typeSaturday, September 8, 12

http://wpdocs.sourceforge.jp


参考リンク

WordPressのカスタム投稿（ポスト）タイプを作成するまでの手順リスト - かちびと.net

http://kachibito.net/wordpress/custom-post-type-list.html

カスタム投稿タイプのアーカイブページを作成する | Cat Speak

http://cat-speak.net/2012/02/29/433/







AKB48の記事一覧を表示するアーカイブページ




本日の流れ






記事1

記事2

記事3


wordpress

wp-‐contentthemestwentyeleven


インデックスページ(最新投稿順の一覧ページ)

シングルページ(１記事のみのページ)

カテゴリーごとページ(カテゴリごとに分けたページ一覧)

日付ごとページ(月毎に分けたページ一覧)

index.php

index.php

index.php

index.php

category.php

date.php

優先

優先

single.php優先

archive.php優先

archive.php優先

テンプレートの優先順位


AKB48スライダー用のテンプレートを作る

テンプレートの原点はindex.php

→ カスタム投稿タイプのアーカイブ記事は、

　 archive.php があればこれを使う。

→ archive-akb48.phpがあればこれを使う。

archive-投稿タイプ名.php(archive.php をコピーして作る。)


詳しい使い方は “テンプレート階層” で検索

http://wpdocs.sourceforge.jp/テンプレート階層Saturday, September 8, 12



記事ループ

ループの外側を”slider1”のdivで囲む

bxSliderの起動


完成 !


ありがとうございました


jqueryで作るカスタム投稿の画像スライダーライブラリ

Technology