Twenty Twelve のトップページに抜粋記事一覧を表示・・・WordPress

　新しいWordPressのデフォルトのテーマ「Twenty Twelve」でトップページやカテゴリーページなどは、<!--more--> をいちいち使用するのは面倒なので、
デフォルトのままだと記事全文が表示されるので、抜粋記事の一覧を表示させたいと思っていた。 Twenty Elevenでは不完全ながら、「トップページに抜粋記事の一覧を表示・・・WordPress」でトップページに一覧表示させていたのだが、新テーマTwenty Twelveを使用するにあたって、少しだけ、テンプレートタグ、条件分岐タグについて、

• WordPress　Codex日本語版「テンプレートタグ/the excerpt」
• WordPress　Codex日本語版「条件分岐タグ」
• 「The present note」・・・WordPressの投稿記事一覧を抜粋表示する条件分岐タグの使い方 メイン・カテゴリー・タグ・アーカイブページなど

　上記を参照し、勉強してみた。。。条件分岐タグはブログのトップページなどで特定の内容を表示させたいときに、is_home()というように条件を指定するのに使用し、テンプレートタグのthe_excerpt()は抜粋記事を表示するときに使用する・・・と書かれている。。。具体的にはトップページに抜粋記事を表示させたいときは、、、




　<?php if ( is_home() ) {
    the_excerpt();}
 else {
    the_content();
} ?>



　という風に、?php ifで is_home＝トップページの場合には、the_excerpt＝抜粋表示、else＝それ以外の場合には、the_content＝全文表示、と指定するらしい。。。




　本題に戻り、でTwenty Twelveで抜粋記事一覧を表示するには、テーマをそのまま弄ってもいいのだが、いつも通り子テーマを作り、子テーマについては、、、

• 「WordPress Codex 日本語版・・・子テーマについて」
• WordPressのTwenty Elevenのテーマカスタマイズ・・・子テーマ

　　その子テーマのcontent.phpを弄るのだが、Twenty Twelve のcontent.phpをTeraPadにそのまま貼り付けると、３７行目あたりに、



<?php if ( is_search() : // Only display Excerpts for Search ?>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<?php else : ?>　　　

<div class="entry-content">
<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentytwelve' ) ); ?>
<?php wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentytwelve' ), 'after' => '</div>' ) ); ?>
</div><!-- .entry-content -->
<?php endif; ?>



　と、検索結果の場合は抜粋表示で、その他は記事全文で、とおそらく書かれているであろう部分があるので、検索結果だけでなく、ブログのホームやカテゴリーやタグページでも抜粋表示されるように、<?php if ( is_search() : に条件分岐タグを下記のように、



<?php if ( is_search() || is_home() || is_archive() ) : // Only display Excerpts for Search ?>



　追加するだけで、トップページやカテゴリーページなどで記事が前文から抜粋表示になる。

bloggerで関連記事を表示する②

　bloggerで関連記事一覧を表示させる方法としては、前に「bloggerで関連記事一覧を表示する」での方法で、このブログでは関連記事を表示させているが、他の方法を探してみたら、「Smarter Related Posts Widget for Google Blogger - v2.0」といウィジェットがあったので試してみた。




　設置方法は「Smarter Related Posts Widget for Google Blogger - v2.0」のサイトに行き、記事中にある「 easy setup wizard 」をクリック。そうすると、

　設定画面が表示されるので、「Ｂlog URL」に自分のブログのＵＲＬを入力し、「Ｍode」で関連記事が、最近の投稿か選択し、「Ｍax posts」で表示する関連記事数、等設定。設定が終わったら、「update  demo＆code」をクリックすると、コードが表示されるので、記事下に関連記事を表示したい場合は、「テンプレート編集で」

<div class='post-footer'>

　が二つあるので上にある方の下に、先ほどのコードをコピーすると、「デモ」　このリンク先のブログのような関連記事一覧が表示される。関連記事の見出しについては、先ほどの設定画面の「Recent Title」に好きな見出しを任意につけられる。




　このブログも個別記事には関連記事が表示されるけど、何となく同じくブログタイトルのみのシンプルな関連記事一覧だけど、「bloggerで関連記事一覧を表示する」で書いた方法のほうがすっきりしていていいような気がする。。。

トップページに抜粋記事の一覧を表示・・・WordPress

　昔から抜粋記事の一覧を表示させたいと思っていたのだが、ブログを弄るととてつもなく時間がかかってしまうので、なかなか調べることもしていなかった。重い腰を上げて色々調べてみたら、「The present note」さんのサイトに、デフォルトのテーマのTwenty Elevenでのやり方がわかりやすく書いてあったので、早速やってみた。



　方法は、Twenty Elevenの content.php の  <?php the_content・・・・・・　 と書かれている部分を <?php the_excerpt　・・・・・に変更するだけ。そうするとカテゴリページもタグのページも、アーカイブも抜粋記事の一覧が表示される。記事数はWordPressのダッシュボードの「設定」→「投稿設定」の１ページに表示する最大投稿数を変えれば、記事一覧の表示数が変えられるので、一応５件にしてみたのだが、一つ大きな問題が。。。。

　このように、一応抜粋記事の一覧は表示されるようになったのだが、なぜか一番上の記事だけ抜粋が表示されない・・・・・。今日はこれだけでなくショーケーステンプレートも試してみたのだが、それでも一番最初の投稿だけ、ブログの題名だけで抜粋記事が表示されない。。。なんでなのだろうか・・・？

feedburnerdでbloggerの記事本文に全記事一覧を表示させる

　先日、「feedburnerで最新記事をbloggerのサイドバーに表示してみる」に書いたように、feedburnerの「バズ・ブースト」でサイドバーに最新記事一覧を表示させてみたが、今度は全記事一覧をbloggerの記事内に表示させようと、少ない知識で頑張ってみた。



　全記事一覧専用の記事をどうやって作ろうかとまず考えたが、bloggerには「ページ」とゆう機能があり、「ページガシェット」を「レイアウト」でタイトルの下に持ってくると、メニューバーのようなタブがhtmlを弄ることなしに簡単に作れるので、一先ず「ページ」機能を使うことにしてみた。




　管理画面で、



　　「ページ」→「新しいページ」→「空白のページ」

　をクリックし、タイトルを全記事一覧にして、feedburnerの「バズ・ブースト」で表示する記事を「ALL」に。そうすると全記事の一覧が表示されると思ったのだが、そのままでは「JavaScript」が反映されず、コードのままでしか表示されない。そこで、「ページ設定」のとこにある「オプション」をクリックし、

　「入力されたＨＴＭＬを解釈」をチェックし「完了」をクリック。そうすると「JavaScript」が解釈されされ、全記事一覧が表示される。そのうち変更するかもしれないが、今のところ、このブログにはブログタイトルの下の「記事一覧」をクリックすると、

　

　と、バズ・ブーストの設定画面で「記事内容を表示」にチェックを入れたので、

記事タイトルと、記事の抜粋が表示される。デフォルトの設定では、記事と記事のスペースがなく、記事タイトルと記事とのスペースもないので、feedburnerのヘルプ記事、『バズ・ブーストバズブーストの一般的なスタイル設定』を参照し、ＣＳＳに記述し、記事タイトルのフォントやスペース、記事の間の線を加えて装飾したが、初心者にしてはまずまずの出来栄えのような気がする。。。

seesaaブログで過去ログの記事一覧を表示する

　seesaaブログで前回の記事にもあった、カテゴリ記事一覧について調べていた時に過去ログ記事の一覧について書かれてる、『徒然なるままに』さんの記事が非常にわかりやすかったので、参考にさせていただきました。



 　『カテゴリ記事』の時と同じように、「デザイン」→「コンテンツ」で『過去記事コンテンツ』を作り、『過去記事コンテンツ』の「コンテンツＨＴＭＬ編集」で、<% if:page_name eq 'archive' -%>は二つあるので、上にある方の、





<% if:page_name eq 'archive' -%>
<div class="navi">
<% if:archive_page_name eq 'month' -%>
<% if:previous_archive -%>
・
・　　
・
<% /if %>
<% if:archive_page_name eq 'mday' %><% /if -%>
</div>
・
・
・
<% if:archive_page_name eq 'month' -%>
<% if:pager.need_pager -%>

リンクタグ箇所

<% /if -%>

ここに追加

<% /if -%>
<% /if -%>




　の<% /if -%>と<% /if -%><% /if -%>の間に『徒然なるままに』さんお記事中にある、




<div id="clist">
<script langage="JavaScript">
<!--
<% if:pager.need_pager -%>
・
・
・
・
<% else -%>
document.write("<% archive.createstamp | date_format("%Y年%m月") %>の記事一覧です。<hr/>");
<% /if -%>
// -->
</script>
<ul>
<% loop:list_article -%>
<li><a href="<% article.page_url %>" class="a"><% article.subject %></a></li>
<% /loop -%>
</ul>
</div>
<hr/>
<br/>




　を貼ったら、

　と過去ログの、ブログ設定で表示件数設定した記事分の、過去ログの一覧が表示された。ただ元のソースだと、装飾がなかったので、区切りの線の部分は付け足し、記事一覧も中央に表示されたので、「デザイン」→「デザイン一覧」で現在選択しているＣＳＳに




　　#clist {text-align:left;}



　　を追加して、記事を左寄せに。テスト記事なので、記事が数字のみなのが面白いが。。。seesaaブログは自分にはちょっとややこしい…

feedburnerで最新記事をbloggerのサイドバーに表示してみる

　せっかくfeedburnerを使ってみたものの、さまざまな機能があり、自分にはイマイチよくわからないことが多い。。。「フィード・ブックマーク」のアイコンはブログに追加したけれども、「バズ・ブースト」を試してみようと思う。



　bloggerの基本ガシェットには、最新記事一覧を表示するガシェットがなかったので、「bloggerで最新記事を表示する・・・bloggerのガシェットを使う」でbloggerにあるガシェットで最新記事を表示させてみたが、feedburnerのバズ・ブーストでもbloggerの基本ガシェットの「フィード」と同じように最新記事を自分のブログに表示できるので試してみた。



　ｆeedburnerにログインし、自己のサイトのフィードのページに行き、「集客支援」→「バズ・ブースト」とあるので、それをクリック。色々設定はできるのだが、最新記事を１件から全記事まで表示できる。とりあえず「フィード名」だけチェックを入れ、生成されたコードを、bloggerの基本ガシェットの「HTML/JavaScript」を貼り付けてみたら、

　と最新記事がサイドバーに表示された。今度は、

　記事の内容を表示にチェックを入れて見たら、記事の抜粋も、記事タイトルに合わせて表示されることになった。これは他のブログにも表示させることができるので、便利だと思うが、他に書いてるブログは競馬ブログなので。。。

bloggerで最新記事を表示する・・・bloggerのガシェットを使う

　bloggerでは基本ガシェットに最新記事一覧を表示するガシェットがなかったので、bloggerのガシェットを使って簡単に表示できる方法を試してみた。




　一つ目は、「基本ガシェット」にある「フィード」。これに自分のフィードＵＲＬを入力すれば、

　このように最新記事一覧が、記事タイトルのみで表示されるのだが、最大で５件までしか表示されない。




　もう一つのガシェットは「注目やその他のガシェット」にある「Recent Posts」。こちらは、「フィード」と異なり、ガシェットの設定画面で、

　色々と設定できる。「Number of Posts to Display」で表示する記事の件数を設定でき、「Display Post Date」で投稿した日付を表示するか選べる。それと「Show a summary of your blog posts」にチェックを入れれば、最新記事一覧の記事タイトルの下に、

　と、記事タイトルだけでなく、本文の抜粋を表示できる。それだけでなく、このガシェットをサイドバーでなく、「ブログの投稿」の上に設置すれば、記事の上に簡単に最新記事一覧をを表示することができる。

　物凄く簡単に設置でき便利だが、記事上に設置すると少しだけ読み込むのに時間がかかる。。。

seesaaブログでカテゴリ記事一覧を表示する

　もともとはseesaaブログで当ブログを始めようと思っていたのだけど、なかなか難しく、使い慣れたbloggerで始めることにしたわけだが、seesaaブログも、bloggerと同じく、カテゴリ記事一覧が実装しておらず、色々調べていたら、『勝手にブログカスタマイズ』の記事でわかりやすく解説してあったので、それを基に、カテゴリ記事一覧を作成してみた。。

　seesaaブログは記事コンテンツのｈｔｍｌ編集は「トップページ」、「記事ページ」、「過去ログページ」、「カテゴリ記事ページ」とそれぞれ個別に分けられるので、『デザイン』→『コンテンツ』を開き、カテゴリ専用の記事コンテンツを作り、そのカテゴリ専用の記事コンテンツの『コンテンツＨＴＭＬ編集』をする。

　<% if:page_name eq 'category' -%>

<div class="navi">

<a href="<% blog.page_url %>">TOP</a> / <% category.name %>

</div>

<% if:pager.need_pager -%>

<div class="navi">

　　　・

　　　・

　　　・

</div>

<% /if -%>

<% /if -%>

　<% if:page_name eq 'category' -%>は二つあるので前にある<% if:page_name eq 'category' -%>方の、１番最後の<% /if -%><% /if -%>の間に、『勝手にブログカスタマイズ』さんの記事にあるhtmlソース、

<div class="sidetitle">

<p>『<% category.name %>』の記事一覧です。</p>

</div>

<div class="side">

　　　・

　　　・

　　　・

<% /loop -%>

</div>

<br />

<hr />

　を貼ると、

　　

　カテゴリ記事一覧の上に、「ブログ設定」で「カテゴリ記事の表示件数設定」で設定した、表示記事の件数分の「カテゴリ記事一覧」が表示された。ただbloggerでも思ってることだが、下の記事は消したいが、どうやって弄ればいいのだろうか。。。

bloggerで関連記事一覧を表示する

　アーカイブやラベルの記事一覧は、その後ろに全記事が表示されるので、どうしようか悩んでいるが、関連記事の一覧はどうしても実装したかったので、またまたクリボウさんのサイトの『Blogger で「関連記事」リストを表示する 2 つの方法』の記事を参考にさせてもらいました。



　２つある方法の１つ目、ラベルごとの記事一覧を利用させていただきました。ｈｔｍｌ編集の「ウェジェットのテンプレート展開」で、<b:includable id='main' var='top'>の下に、



<b:includable id='related-posts' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='similiar'>
<div class='widget-content'>
<h3>関連記事:</h3>
         
・
・
・

   var test = 0;
       for (var i = 0; i &lt; labelArray.length; i++)
       if (labelArray[i] == textLabel) test = 1;
       if (test == 0) {
          labelArray.push(textLabel);
          var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?
                 labelArray.length : maxNumberOfLabels;
           if (numLabel &lt; maxLabels) {
             search10(homeUrl3, textLabel);
             numLabel++;
          }
       }
     </b:loop>
   </b:loop>
   </script>
</div>
</div>
</b:if>
</b:includable>



　のソースを貼り、テキストエリア・・・二つある<div style='clear: both;'/> <!-- clear for photos floats -->の一つ目のほうの次の行に<b:include data='posts' name='related-posts'/>を貼って完成。当ブログの個別記事をクリックすると下記のように、

　ラベル別の関連記事が表示されるようになった。ただもう一回ウェジェットのテンプレート展開を展開すると、関連記事のソースは、




<data:top.commentLabelPlural/></b:if></a>
            </b:if>
          </b:if>
        </b:if>
      </div>
    </div>
  </div>
</b:includable>




　の下にあるのはなんでだろう？元の位置から移動してる。。。

bloggerで記事一覧を表示させる・・・ラベル記事、アーカイブ記事

　クラシップテンプレートを断念したのは、アーカイブ記事一覧を表示させるのが上手くいかなかったので、どうしても記事一覧を表示させたかったのだが、色々探していたら、『クリボウの Blogger Tips』とゆう、bloggerのカスタマイズについて詳しく解説してあるあるサイトに、記事一覧を表示させるhtmlソースが書いてあったので、2つある<b:include data='top' name='status-message'/>の下の方にある方の下に、クリボウさんのサイトにある




<b:if cond='data:blog.pageType != &quot;item&quot;'>
 <b:if cond='data:blog.url != data:blog.homepageUrl'>
   <span>このページの記事一覧</span>
   <ul id='post-title-navigation'>
   <b:loop values='data:posts' var='post'>
     <li>
     <b:if cond='data:post.title'>
       <a expr:href='&quot;#&quot; + data:post.id'><data:post.title/></a>
     <b:else/>
       <a expr:href='&quot;#&quot; + data:post.id'><data:post.id/></a>
     </b:if>
     </li>
   </b:loop>
   </ul>
 </b:if>
 </b:if>
 <br/><br/>





　ソースを貼り付けたら、自分のブログも、アーカイブや、ラベル記事を表示させると、記事一覧が表示されたので、すごい助かった。。。

　このテンプレートのせいなのか、記事一覧と記事の日付がくっついてしまっていたので、<br/>を付け加えて調整したら、一応完成したのだが、一つだけ問題が。。。そのラベルやその月等のアーカイブ記事が、記事一覧の後に表示されるのだが、記事が増えるにつれ、表示される記事が増えるので、相当重くなりそうだし、記事一覧ページは、リンクだけの記事一覧がほしいような気もしてきた。。。



bloggerにはページ機能があるので、あまりに記事が増えてきたら、そのページに自分でリンク貼ったほうがいいのだろうか。。。記事一覧から記事を消す方法がわかれば苦労しないのだが。。。