Webnist（うぇぶにすと) Blog

スライド表示用投稿を作ってみる

2011/06/05

ども、WPer 界で上位に食い込む位いい声の Webnist です。ネタが尽きてきた中で頭を絞って出てきた、一滴を今回書いていこうかと思います。その内容は、最近？流行りのスライドで写真等を表示する事をWordPressで簡単にやってしまおうということです。今回、準備頂く物は以下になります。

WordPress (動くまでが WordPress です)
くじけぬ心
向上心
スライド表示用のカスタム投稿タイプ(Custom Post Type)
jQuery の Orbit ライブラリー (http://www.zurb.com/playground/orbit-jquery-image-slider)
今回使用するテーマはめ組さんの膳テーマを使用しています。

に掲げた5項目です。 1〜3については、飛ばしまーす。

スライド表示用カスタム投稿タイプについて

これについては、検索すると色々なところで解説されているので詳しく書かないですが、おでさんの『カスタム投稿タイプ(Custom Post Type)の導入と使い方 [WordPress 3.0]』を読めば理解できると思いますよ。ソースコードで追加していくのは、ちょっと面倒なので僕は楽をして、プラグインを使います。僕が使っているプラグインは『GD Custom Posts And Taxonomies Tools』というですね、理由は特にありませんが... ただ、このプラグイン日本語化されていないのです。。。僕は英語がわからないので、誰か日本語化してくれないかなっと期待しています。今回はスライド用なので分かりやすく『slide』というカスタム投稿タイプを作成します。 [caption id="attachment_74" align="alignleft" width="201" caption="GD CPT Tools の設定画面"][/caption] Name のところでカスタム投稿タイプの名前を入力します。（日本語は避けといたほうが安全です。） Labels のところでカスタム投稿タイプのラベルを入力します。(日本語でも大丈夫です。) Auto fill rest をクリックすると他の部分は勝手に記入してくれます。が、日本語化されていないので英語で入ってきます。 Settings のところでカスタム投稿タイプの投稿画面に表示する項目を選択できます。今回は、スライド表示用なのでデフォルトに Excerpts と Post Thumbnails を追加しています。とりあえず上記を設定して、Save Custom Post を押して保存します。 [caption id="attachment_107" align="alignleft" width="149" caption="カスタム投稿メニュ"][/caption] 保存したら画像のようなメニューが追加されます。

jQuery の Orbit ライブラリーの追加

http://www.zurb.com/playground/orbit-jquery-image-slider ここからファイルをダウンロードしてきます。使用しているテーマに slide というフォルダを作ってその中に解凍してできた、orbit-1.2.3(記事を書いている時のバージョンは1.2.3です) 内の jquery.orbit-1.2.3.min.js, orbit-1.2.3.css, orbit をコピーします。コピーしたら、テーマの functions.php を編集します。以下のソースで js を読み込みます。 [php] add_action( 'wp_print_scripts', 'add_slide_js' ); function add_slide_js() { wp_enqueue_script( 'jquery' ); wp_enqueue_script( 'orbit-script', get_stylesheet_directory_uri() . '/slide/jquery.orbit-1.2.3.min.js' ); } [/php] 以下のソースで CSS を読み込みます。 [php] add_action( 'wp_print_styles', 'add_slide_style' ) ; function add_slide_style() { wp_enqueue_style( 'orbit-style', get_stylesheet_directory_uri() . '/slide/orbit-1.2.3.css' ); } [/php] 以下でスライド用のスクリプトを有効化します。 [php] add_action( 'wp_head', 'add_slide_script' ); function add_slide_script() { ?> [/php] [javascript] $('#slide_box').orbit(); [/javascript] 上記で、#slide_box と指定しましたので、orbit-1.2.3.css を編集します。デフォルトでは、#featured となっている部分を、 #slide_box に変更しましょう。これで、スライドの下準備は完了です。次に WordPress 側で、カスタム投稿タイプでスライド表示に進みます。

カスタム投稿タイプでスライド表示

さて、いよいよ大詰めにきました。ここで、一息入れてお菓子を食べるも、一気に進んでいくのもありです。 WordPress 側で、カスタム投稿タイプを表示する設定をしていきます。 functions.php にまず以下を追加します。 [php] add_image_size( 'slide-thumb', 970, 99999 ); [/php] これで、アイキャッチに追加したときの画像の大きさを追加します。大きさは、テーマによっては違うのでそれに合わせてください。次に、カスタム投稿タイプを表示するために、以下を追加します。 [php] function slide_post_list() { global $post, $post_type; $args = array( 'numberposts' => 5, 'post_type' => 'slide', ); $get_posts = get_posts( $args ); if ( $get_posts ) { $output = '

' . "\n"; $output .= '

' . "\n"; foreach( $get_posts as $post ) { setup_postdata( $post ); $attachment_id = get_post_thumbnail_id(); $attachment_src = wp_get_attachment_image_src( $attachment_id, 'slide-thumb' ); $output .= '' . "\n"; } $output .= '

' . "\n"; foreach( $get_posts as $post ) { setup_postdata( $post ); $excerpt = $post->post_excerpt; $output .= '' . $excerpt . '' . "\n"; } $output .= '

' . "\n"; echo $output; } } [/php] 上記を追加し保存したら、テーマの表示したい部分につかします。今回は、ヘッダーのメイン画像を置き換えて使用するために header.php に記述します。 [php] [/php] 画像以上で、スライド表示用投稿を作ってみるの紹介を終わりにします。あっそうそう、もちろん IE6 はサポート外ですよ。。。外部サイトにリンクするという説明はまた別の話で。

Welcome to Webnist（うぇぶにすと Blog Sites This is your...

2011/05/10

Welcome to Webnist（うぇぶにすと) Blog Sites. This is your first post. Edit or delete it, then start blogging!

test

2011/04/15

test

コメントの項目足してみるパン

2010/12/24

WordPress のコメントの部分に項目を足すことは、サイトを検索すると引っかかりますが、保存するところまでは説明されていませんでした。。。そこで、データベースを見ていたら、commentmeta というテーブルがあるではないですか！っということで、commentmetaを利用し、追加した項目を保存してみましょう。とりあえず、テーマファイルの function.php に以下のソースを追加します。 [php] // Comment Customize add_action( 'comment_form_field_comment', 'add_comment_field' ); function add_comment_field( $defaults ) { $defaults = '

twitter@

'; $defaults .= '

' . _x( 'Comment', 'noun' ) . '

'; return $defaults; } add_action( 'comment_post', 'save_comment_field' ); add_action( 'edit_comment', 'save_comment_field' ); function save_comment_field( $comment_id ) { if ( !$comment = get_comment( $comment_id ) ) return false; do_action('comment_form', $post->ID); $custom_key_twitter = 'twitter'; $get_comment_twitter = esc_attr( $_POST[$custom_key_twitter] ); if ( "" == get_comment_meta( $comment_id, $custom_key_twitter )) { add_comment_meta( $comment_id, $custom_key_twitter, $get_comment_twitter, true ) ; } else if ( $get_comment_twitter != get_comment_meta( $comment_id, $custom_key_twitter )) { update_comment_meta( $comment_id, $custom_key_twitter, $get_comment_twitter ) ; } else if ( "" == $get_comment_twitter ) { delete_comment_meta( $comment_id, $custom_key_twitter ) ; } return false; } add_action( 'add_meta_boxes_comment', 'add_comment_field_box' ); function add_comment_field_box() { global $comment; $comment_ID = $comment->comment_ID; $custom_key = 'post_reviews_date' ; $custom_key_twitter = 'twitter' ; $noncename = $custom_key . '_noncename' ; $get_twitter = esc_attr( get_comment_meta( $comment_ID, $custom_key_twitter, true ) ); echo '' . "\n"; echo '

twitter@

' . "\n"; } [/php] add_comment_field でコメントの項目を足しています。 [php] $defaults .= '

' . _x( 'Comment', 'noun' ) . '

'; [/php] 上記は必ず入れてください。入れないとコメントのテキストエリアが表示されません。 [php] function add_comment_field( $fields ) { $fields['twitter'] = '

twitter@

'; return $fields; } add_filter('comment_form_default_fields','add_comment_field'); [/php] もありますが、ログインした際は表示されないので目的に合わせて変更してください。 [php] add_action( 'comment_post', 'save_comment_field' ); add_action( 'edit_comment', 'save_comment_field' ); function save_comment_field( $comment_id ) { if ( !$comment = get_comment( $comment_id ) ) return false; do_action('comment_form', $post->ID); $custom_key_twitter = 'twitter'; $get_comment_twitter = esc_attr( $_POST[$custom_key_twitter] ); if ( "" == get_comment_meta( $comment_id, $custom_key_twitter )) { add_comment_meta( $comment_id, $custom_key_twitter, $get_comment_twitter, true ) ; } else if ( $get_comment_twitter != get_comment_meta( $comment_id, $custom_key_twitter )) { update_comment_meta( $comment_id, $custom_key_twitter, $get_comment_twitter ) ; } else if ( "" == $get_comment_twitter ) { delete_comment_meta( $comment_id, $custom_key_twitter ) ; } return false; } [/php] で commentmeta に保存します。 [php] add_action( 'add_meta_boxes_comment', 'add_comment_field_box' ); function add_comment_field_box() { global $comment; $comment_ID = $comment->comment_ID; $custom_key = 'post_reviews_date' ; $custom_key_twitter = 'twitter' ; $noncename = $custom_key . '_noncename' ; $get_twitter = esc_attr( get_comment_meta( $comment_ID, $custom_key_twitter, true ) ); echo '' . "\n"; echo '

twitter@

' . "\n"; } [/php] で管理画面からのコメント編集の際にコメントに追加したボックスが表示されます。コメントに表示するときは comment.php 内に [php] wp_list_comments(); [/php] があると思うのでそれを [php] wp_list_comments( array( 'callback' => 'mytheme_comment' ) ); [/php] などにして、mytheme_comment の関数を読み込みます。 mytheme_comment の関数は [php] function mytheme_comment($comment, $args, $depth) { $GLOBALS['comment'] = $comment; $comment_ID = $comment->comment_ID; $get_twitter = esc_attr( get_comment_meta( $comment->comment_ID, 'twitter', true ) ); ?>

id="li-comment-">

' ); ?> %s says:'), get_comment_author_link()) ?>

comment_approved == '0') : ?>

$depth, 'max_depth' => $args['max_depth']))) ?>

comment_ID, 'twitter', true ) [/php] で読みだしています。 get_comment_meta は get_post_meta と同じような感じです。以上、文章がおかしいですが大体の流れが分かって頂ければと思います。

jpg のアップロードの画質変えちゃろ

2010/12/24

ｊpg のサムネール画像アップロード時する際画質のデフォルトの値は90になっています。jpg の画質を変える事を検索してみたら、コアファイルをいじる記事が多かったので、コアファイルをいじらずに変更できるコードを紹介します。 [php] add_filter( 'jpeg_quality', 'child_jpeg_quality' ); function child_jpeg_quality( $jpeg_quality ) { $jpeg_quality = 100; return $jpeg_quality; } [/php] 上記の $jpeg_quality の値を変更する事でワザと劣化させて表示させる事も可能です。例：画質100 例：画質50 例：画質10

カスタムメニューを画像にする

2010/11/25

以下をテーマ内のfunction.phpに挿入してください。 [php] add_filter( 'the_title', 'img_nav_menu_title' ); function img_nav_menu_title($title) { if( preg_match( "/\[\[(.*)\]\]/", $title, $match ) ) { $get_title = $match[1]; $get_img_url = clean_url($get_title); if($get_title == 'none') { $title = ''; } else { $get_img_dir = str_replace( get_option('home') . '/', ABSPATH, $get_img_url ); $get_size = getimagesize( $get_img_dir ); $get_alt = preg_replace( "/\[\[(.*)\]\]/", '', $title ); $title = ''; } return $title; } else { return $title; } } [/php] ナビゲーションラベルにラベル名[[画像のURL]] を入力すると画像が表示されます。ラベル名[[none]] とするとタイトルは表示されません。 ※前回のウィジェットタイトルに画像を入れるをしている場合は、 [php] add_filter( 'the_title', 'img_widget_title' ); [/php] を追加してもらえれば使用できます。後はCSSを調整して終了です。

ウィジェットタイトルに画像を入れる

2010/11/25

以下をテーマ内のfunction.phpに挿入してください。 [php] add_filter( 'widget_title', 'img_widget_title' ); function img_widget_title($title) { if( preg_match( "/\[\[(.*)\]\]/", $title, $match ) ) { $get_title = $match[1]; $get_img_url = clean_url($get_title); if($get_title == 'none') { $title = ''; } else { $get_img_dir = str_replace( get_option('home') . '/', ABSPATH, $get_img_url ); $get_size = getimagesize( $get_img_dir ); $get_alt = preg_replace( "/\[\[(.*)\]\]/", '', $title ); $title = ''; } return $title; } else { return $title; } } [/php] ウィジェットのタイトルにタイトル[[画像のURL]] を入力すると画像が表示されます。タイトル[[none]] とするとタイトルは表示されません。

ウィジェットタイトルに画像を入れる

2010/09/09

雨宿り

2010/09/09

大きめな傘で

次期テーマ作成中

2010/08/09

今、テーマを作成しています。主な機能としては

投稿数によってレベルを持たせる。
最終投稿日によって画面の色を変化

基礎的な部分は作成されています。公開は近日