Home > トラたま袋のWP更新履歴 > サムネイル表示用Wiget

サムネイル表示用Wiget

時系列順ではかなりあとの方の更新でしたが、ちょうど今テスト用WPから本家WPに移植作業中なので、作業がてら掲載。

特定のタグがついた記事に投稿された画像を、新着表示するプログラムです。テーマに変更を加えます。
ファンクション名が引用元のままだったり、オプション名が適当だったりしますが、ご愛敬。
なお、表示サンプルは本家をご覧下さい。

プラグイン化の方法がわからないのでテーマに直接書き加えます。
特にfanction.phpは常に読み込まれているのか、エラーを起こすと以降管理画面上で編集作業が不可能になります。必ずあらかじめfanction.phpのバックアップを取り、FFFTPやプロバイダのファイルマネージャーなどのファイルを直接編集(上書き)可能な環境を用意して作業してください。

参考にさせていただいたのはこちら

大半が上記記事の丸写しではありますが、機能自体をWidgetとして追加、オプション変更ができるように変更しました。

細かい変更点

  • ウィジェットとして追加、オプションで表示する件数やタグが変えられます。
  • 2枚以上画像がある記事に対応 (表示件数は単純に画像の「表示枚数」として動作)
  • 画像直リンクに変更 (単純なギャラリーとして機能)
    • lightbox2が入っていると幸せになれます

fanction.phpにwidgetを追加する

以下のコードをfanction.phpの先頭に追加して下さい。

PLAIN TEXT
PHP:
  1. <?php
  2. function attachment_ancherlinks3($num=5,$size="thumbnail",$tagslug=""){
  3.     $args = "tag=".$tagslug."&numberposts=".$num;
  4.     $myposts = get_posts($args);
  5.     $imgcnt = 1;
  6.     print "<ul id=\"thumb-post-lists\">";
  7.         for($i=0;$i<$num;$i++){
  8.         if($i>= count($myposts) ) return;
  9.         $attachments = get_children(array('post_parent' => $myposts[$i]->ID, 'post_type' => 'attachment', 'post_mime_type' => 'image', 'orderby' => 'menu_order'));
  10.         if(count($attachments)>= 1){
  11.             for($ii=0;$ii<count($attachments);$ii++){
  12.                 if($num<$imgcnt) return;
  13.                 $attachment = array_shift($attachments);
  14.                 $image = wp_get_attachment_image_src($attachment->ID, 'full');
  15.                 print "<li><a href=\"$image[0]\" title=\"$title\" rel=\"lightbox[1]\">".wp_get_attachment_image($attachment->ID,$size)."</a>";//サムネイル出力
  16.                 print "</li>";
  17.                 $imgcnt++;
  18.             }
  19.         }else{
  20.         }
  21.     }
  22.     print "</ul>";
  23. }
  24. ?>
  25. <?php
  26. register_sidebar_widget(__('Sample','hoge'), 'widget_sample');
  27. register_widget_control( 'Sample', 'sample_control' );
  28.  
  29. function widget_sample($args){
  30.     $options = get_option('mywidget_sample1');
  31.     $title = empty($options) ? __( 'Sample' ,'hoge') : $options;
  32.     $showmax = get_option('mywidget_sample2');
  33.     $max = $showmax;
  34.     $showtag = get_option('mywidget_sample3');
  35.     $tag = $showtag;
  36.     extract($args);
  37.     echo $before_widget;
  38.     echo $before_title . $title . $after_title;
  39.     echo '<p>現在タグスラッグ'.$showtag.'の画像を新着'.$showmax.'件表示しています</p>';
  40.     attachment_ancherlinks3($max,"thumbnail",$tag);
  41.     echo $after_widget;
  42. }
  43. function sample_control(){
  44.     $options = get_option('mywidget_sample1');
  45.     $showmax = get_option('mywidget_sample2');
  46.     $showtag = get_option('mywidget_sample3');
  47.     if (isset($_POST['mywidget_sample1'])) {
  48.         update_option('mywidget_sample1', $_POST['mywidget_sample1']);
  49.     }
  50.     if (isset($_POST['mywidget_sample2'])) {
  51.         update_option('mywidget_sample2', $_POST['mywidget_sample2']);
  52.     }
  53.     if (isset($_POST['mywidget_sample3'])) {
  54.         update_option('mywidget_sample3', $_POST['mywidget_sample3']);
  55.     }
  56. ?>
  57. <p><label for="mywidget_sample"><?php _e( 'Title:','hoge' ) ?>
  58. <input id="mywidget_sample1" name="mywidget_sample1" type="text" value="<?php echo $options; ?>" /></label></p>
  59. <p><label for="mywifet_sample2"><?php _e( 'MaxImage:','hoge' ) ?>
  60. <input id="mywidget_sample2" name="mywidget_sample2" type="text" value="<?php echo $showmax; ?>"
  61. /></label></p>
  62. <p><label for="mywifet_sample3"><?php _e( 'Tag:','hoge' ) ?>
  63. <input id="mywidget_sample3" name="mywidget_sample3" type="text" value="<?php echo $showtag; ?>"
  64. /></label></p>
  65. <input type="hidden" id="sample-submit" name="sample-submit" value="1" />
  66. <?php
  67. }
  68. ?>

なお、表示条件の指定はタグスラッグで行います。なるべく半角英数にしておいたほうがいいかも知れません。

保存すると、ウィジェットの編集画面でSampleというウィジェットが追加できるようになるので、タイトルと表示数、表示するタグスラッグを入力して保存してください。
サイドバーに新着画像の一覧が表示されたはずです。

表示スタイルを変更する

style.cssに以下の行を追加して下さい

PLAIN TEXT
CSS:
  1. #sample li {display:inline;}
  2. #sample img {margin:0 5px 0 0;}

これで表示が横並びになります。
リストアイテムのマークがついてしまう場合も、ここで変更して下さい。

サムネイルサイズを変更する

設定のメディアからサムネイルサイズを変更します。この変更はギャラリー機能などに影響しますので注意して下さい。
だいたい横4枚～5枚に表示できるサイズがオススメです。
ちなみに2列になっても大丈夫だと思います。

注意事項

下記のTodoと内容がかぶりますが、現時点で実装出来てないことがありますので、以下の点に注意して下さい。

  • サムネイルサイズが共有されているため、サムネイルを使っている記事に影響する
  • Widgetが複数登録できないので、条件を変えた複数の一覧を作りたい場合は、fanction.phpにWidgetを追加する必要がある
  • 添付されただけの画像は表示されません
    • 他記事から引っ張ってきてるだけの画像が表示されないのは仕様です

Todo (未解決問題)

  • サムネイルサイズを独自で持たせる
  • Widgetを複数追加可能にする
  • プラグインとして独立させる
  • オプションで添付しただけの画像を表示できるようにする
  • タグスラッグ→タグ名に変換したい

おそらくこれ以上自分の技術では不可能なので、わかる方に改変いただくしかないかと思います。(他力本願)

コメント (Close):2

****** 11-11-17 (木) 23:26
このコメントは管理者の承認待ちです
****** 11-11-20 (日) 17:49
このコメントは管理者の承認待ちです

トラックバック:5

このエントリーのトラックバックURL
http://t3.xii.jp/nawo/2010/03/09/35/trackback/
Listed below are links to weblogs that reference
サムネイル表示用Wiget from Seasonism Season3
****** 13-07-17 (水) 10:03
このコメントは管理者の承認待ちです
****** 19-03-29 (金) 5:22
このコメントは管理者の承認待ちです
****** 19-03-29 (金) 19:50
このコメントは管理者の承認待ちです
****** 19-05-01 (水) 12:33
このコメントは管理者の承認待ちです
****** 20-03-05 (木) 2:51
このコメントは管理者の承認待ちです

Home > トラたま袋のWP更新履歴 > サムネイル表示用Wiget

Information

ここは裏たま袋。
本家はこちらです→トラたま袋

最近の投稿
最近のコメント
カテゴリー
タグクラウド
アーカイブ
RSS トラたま袋の新着
フィード

Return to page top