‘tag__not_in’=>array(9このブログはWORDPRESS THEME DESIGNER MegaNewsを利用しています。
記事にメリハリをつけるため、ヘッドラインを設けてみました。
通常サムネイルに対して2倍の大きさです。
ヘッドラインに表示させる記事は、投稿時にタグで「headline」と入れた記事で新しいものから4件です。
index.phpのヘッドラインを表示させたい場所に以下のソースをコピーします。
このブログであれば <div id=”content”> の下になります。
<?php if (have_posts()) : query_posts('tag=headline&showposts=4'); ?> <?php while (have_posts()) : the_post(); ?> <div style="float:left;"> <div class="hl_image"> <a href="<?php the_permalink(); ?>"><?php dp_attachment_image($post->ID,'full','alt="'.$post->post_title.'" border="0"');?></a> </div> <div class="hl_alpha"></div> <div class="hl_text"> <a href="<?php the_permalink(); ?>" style="color:#fff;"><h4><?php the_title(); ?></h4></a> <?php the_excerpt(); ?> </div> </div> <?php endwhile; endif; ?> <?php wp_reset_query(); ?> <div style="clear:both;"></div> <div style="height:15px;"></div>
タグや記事件数を変更したい場合は以下の部分を任意で変更してください。
記事件数はかならず偶数にしてください。
<?php if (have_posts()) : query_posts('tag=■■■■■&showposts=■'); ?>
以上がヘッドラインを追加する場合です。
ヘッドラインが不要な場合はここまでを無視して以下の参照してください。
元のテーマではカテゴリー毎の最新記事とサムネイルを並べていますが、これをカテゴリーに関わらず新しい記事を表示させるようにします。
まず、以下の行を削除します。
<?php $categories = get_categories('hide_empty=1'); foreach ($categories as $category) : query_posts('showposts=1&cat='.$category->cat_ID); if (have_posts()) : the_post(); ?>
消した場所に以下の行をコピーします。
<?php if (have_posts()) : query_posts(array('tag__not_in'=>array(9),'showposts'=>12)); ?> <?php while (have_posts()) : the_post(); ?>
タグ:headlineを含まない記事の最新12件となります。
‘tag__not_in’=>array(9)がタグの除外を意味しますが、除外の場合はタグIDを指定する必要があります。
ヘッドラインを追加しない場合は『’tag__not_in’=>array(9),』を削除して以下のようにしてください。
<?php if (have_posts()) : query_posts(array('showposts'=>12)); ?> <?php while (have_posts()) : the_post(); ?>
タグIDはダッシュボードの「投稿タグ」を開いてheadline(もしくは任意のタグ)にマウスを合わせてリンクURLを見ると確認できます。
Tag_ID=の次に書かれている数字がタグIDです。
確認したTag_IDをサンプルの9と差し替えてください。
次に<!– begin post –> <!– end post –>の間を以下の内容に差し替えます。
<div class="post"> <div class="thumb"> <a href="<?php the_permalink(); ?>"><?php dp_attachment_image($post->ID,'thumbnail','alt="' . $post->post_title . '" border="0"');?></a> </div> <h4> <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a> </h4> <?php the_excerpt(); ?> <a href="<?php the_permalink(); ?>" class="readmore">記事を読む</a> </div>
それぞれについての説明です。
<div class="thumb"> <a href="<?php the_permalink(); ?>"><?php dp_attachment_image($post->ID,'thumbnail','alt="' . $post->post_title . '" border="0"'); ?></a> </div>
thumbレイヤー内に、記事へリンクしている画像の中で画像IDがいちばん最後の画像1枚をthumbnailサイズで表示させます。
注意すべきは「画像IDが最後」と「thumbnailサイズ」の2点です。
1記事に複数の画像を貼り付ける場合、最後にアップロードした画像がサムネイルとして表示されます。
そのため、サムネイルにしたい画像は記事中の表示位置に関わらず、必ず最後にアップロードしてください。
サムネイルサイズはダッシュボードの「設定」-「メディア」で指定します。
サムネイルのサイズは幅150、高さ150として「サムネイルサイズを実寸にトリミングする」にチェックしてください。
<?php the_excerpt(); ?>
元のテーマでは記事本文の先頭100文字程度を自動で引用していますが、ここでは記事の抜粋に入力した内容を表示します。
記事を新規追加する際は、抜粋にも必ず入力してください。
最後に <!– end post –> の下に以下をコピーします。
<?php endwhile; endif; ?> <?php wp_reset_query(); ?>
以上でindex.phpの変更は終了です。
(変更後のindex.phpはこちらからダウンロードできます)
次にスタイルシートを変更します。
ヘッドライン用のCSSが以下になります。
全文をそのままスタイルシートの最後にコピーしてください。
#content .hl_image { position: relative; width: 312px; height: 150px; overflow: hidden; margin: 5px 5px 6px 6px; z-index: 5; } #content div.hl_alpha { position: relative; width: 300px; height: 63px; margin: -81px 0 6px 6px; padding: 6px; background-color: rgb(0,0,0); z-index: 10; filter: alpha(opacity=65); -moz-opacity:0.65; opacity:0.65; } #content div.hl_text { position: relative; width: 300px; height: 63px; margin: -81px 0 6px 6px; padding: 6px; z-index: 15; color: rgb(255,255,255); font-size: 10px; line-height: 14px; } #content div.hl_image img { width: 314px; margin-top: -25px; } #content div.hl_text h4 { font-size: 12px; padding-bottom: 12px; }
スタイルシートの118行目~125行目を以下に差し替えます。
#content .post .thumb { width: 150px; height: 110px; overflow: hidden; margin-bottom: 5px; background-image: url("./images/thumb.gif"); } #content .post .thumb img { width: 150px; margin-top: -20px; } #content div.hl_text h4 { font-size: 12px; padding-bottom: 12px; }
サムネイルは150px×150pxの正方形でつくられますが表示されるのは110pxなので、20pxほど上に移動させ中心部分が表示されるようにしています。
サムネイルがない場合、なにも画像が表示されませんので背景画像に「no image」と書いた画像を用意しています。
画像の大きさは幅150px×高さ110pxにして、~/wp-content/themes/meganewstheme/images/にthumb.gifとしてコピーしてください。
(別名にする場合はCSSのthumb.gifを任意のファイル名に変更してください)
ワードプレスのページ送り(ページネーション)をプラグインなしで実装する方法
ワードプレスでのページ送りをプラグインなしで実装するためのPHPとCSSです。 機能的にはシンプルですが、簡単なCSSで自由にカスタマイズできるのがポイントです。
2011年製MacBook Proの延命を目的にHDDを『SanDisk Ultra II SSD(240GB)』へ交換しました
SDカードやCFカードはずっとSanDiskしか使っていないし信頼もしていないボクなので、SSDだってもちろんSanDiskを選ぶことに躊躇はありません。
iPhoneは機内モードで倍速充電されるかの検証と、これ以外で速い充電方法を探してみた
iPhoneの充電は機内モードにすると倍速だ!というTipsが定期的に流れてくるけど、本当に倍速なの?ほかにも方法はあるんじゃないの?ということで検証してみました。
俺の雑誌愛が暴走する雑誌だけのブログ『crocodile MAG’STACK』始めてました。
自分の雑誌録を兼ねたブログを立ち上げました。 読んで益なし損もなし。薬にならなきゃ毒でもなし。
年額790円から、3ヶ月期限であれば無料まで。個人や個人事業主にオススメのドメイン認証SSL
個人や個人事業主などの方でも導入しやすい安価なSSLのご紹介。3年契約で年額790円から、3ヶ月毎の更新手続きすれば無料で利用可能なSSLも。
鰐ノート版『2015年、このマンガがスゴイ!~いちおしの新作マンガ10選~』
2015年に初巻もしくは単巻が発売されたマンガの中から、カテゴリに関わらず舌を巻き膝を叩き腕が唸って腹が捩れたものから厳選した10作品ご紹介です。毎年も良作ばかりでほんと選ぶのに苦労するわー。