2010年8月8日(日)

WordPress3.0に移行!Twenty Tenテーマをカスタマイズ



一月程前に、Wordpress3.0に移行しました。
現在は3.0.1-jaになっています。

アップデートするにあたり、これまでのデータやテーマなどにいろいろと支障があるのか不安でしたが、まったく問題なくあっさり 完了。
いくつかのサイトで試してみましたが、大丈夫そうですね。

Wordpress3.0のデフォルトのテーマは「Twenty Ten」というものに変わっています。
これまで、このブログはWordpressのデフォルトテーマを使っていましたが、変わってしまったので、「Twenty Ten」でコーティングをし直してみました。

Wordpress3.0で実装されたメニュー機能などはこのブログでは不要なので、バッサリと切り捨て。
全体のカラムのサイズとか調整するだけですんなり完成。

で、そのままではなんなので、トップページの表示を少し変えてみました。

Wordpress2.9から「投稿サムネイル画像」、3.0では「アイキャッチ画像」と名称変更された機能を利用し、トップページに各記事のサムネイルを表示。



掲載方法はすごく簡単。
記事を投稿する際に、右下にある「アイキャッチ画像」から画像を選択するだけ。



ページへの表示は「loop.php」の中のトップページに関するソースの部分に、

<?php the_post_thumbnail(‘thumbnail’); ?>

を追加するだけ。

これまで、トップページには記事の内容を全て掲載していたので、かなりスクロールの長いページになっていましたが、これでかなりスッキリしました。

想定外の効果としてブログ全体のPVが3割以上もアップしていました。
トップページから個別のページへの流入が増えたのでしょうかね?



カテゴリー: Web Design   タグ:   この投稿のパーマリンク

WordPress3.0に移行!Twenty Tenテーマをカスタマイズ への11件のコメント

  1. ピンバック: AdSenseの謎 5 | [NC]News Clipping

  2. ピンバック: Twenty Tenテーマのカスタマイズ!トップページに表示する記事をカテゴリ別に制御してみた。 | [NC]News Clipping

  3. NJ より:

    はじめまして。
    私もこちらのサイトのようなトップページの投稿表示スタイルにしてみたいと思いこのサイトに辿り着きました。
    そこでご質問なのですが、具体的にをloop.phpのどちらに記述すればよろしいのでしょうか?
    私もtwentytenのテンプレートを使用しているので、試行錯誤してみましたがなかなか上手く行きません。宜しくお願いいたします。

  4. hatto より:

    >NJさん

    コメントありがとうございます。
    loop.phpの120行目あたりから


    <?php /* How to display all other posts. */ ?>

    <?php else : ?>
    <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

    <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'kubrick'), the_title_attribute('echo=0')); ?>" class="thumbnail_img"><?php the_post_thumbnail('thumbnail'); ?></a>
    <h2 class="time"><?php the_time(__('Y年n月j日(D)')) ?> <!-- by <?php the_author() ?> --></h2>
    <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyten' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2>

    <div class="entry-meta">


    という感じで表示したい部分に

    < ?php the_post_thumbnail(‘thumbnail’); ?>

    を記入しています。

  5. NJ より:

    ありがとうございました。その後cssをイジって、どうにか近い感じになりました。感謝です!

  6. shun より:

    きれいなサイト&興味深い記事なのでRSS登録していつも読ませてもらってます。

    自分もカテゴリアーカイブページにサムネイルを表示したく、色々な記事を参考にトライしていますが、こちらのサイトのように、左側にサムネイル、右側にタイトル/日付/記事概要、という配置が上手くできずにいます。サムネイルの後改行して記事概要というように表示されてしまいます。
    サムネイルは元画像の切り抜きではなく、リサイズ(縮小)したものを表示したいと思っています。

    左側にサムネイル、右側にタイトル/日付/記事概要のように表示させるのはCSSで制御しているのでしょうか? 可能でしたら、実現方法を概要で結構ですのでご教示いただけると幸いです。
    よろしくおねがいします。

  7. hatto より:

    >shunさん

    コメント遅くなりすみません。
    サムネイル部分はCSSで調整しています。
    単純にサムネイル画像をFloatで左側に寄せているだけですので、ソースを見て頂ければすぐにわかると思います。

  8. konno より:

    おせわになります。
    サムネイル表示以前の段階ですが教えてください。
    ワードプレス10日の初心者でテーマはTwenty Ten 1.2でHTMLとPHPは少しは分かります。

    >これまで、トップページには記事の内容を全て掲載していたので、かなりスクロールの長いページになっ>ていましたが、これでかなりスッキリしました。

    こちらでもトップページに”投稿ページ”を設定すると画像を含めて記事の全てが表示されてしまいます。(1ページに表示する最大投稿数で設定した記事数の全ての内容)
    まず記事の文章を抜粋表示できるようにして画像を表示されないようにして、それからサムネイルの表示に進むのではないのかと考えいますが、上の”→続きを読む”のように記事の一部分の表示はどうすればよいか教えてください。
    よろしくお願いいたします。

  9. hatto より:

    >konnoさん

    コメントありがとうございます。
    loop.phpの160行目あたりをこんな感じにしています。


    <?php echo mb_substr(strip_tags($post-> post_content), 0, 60); ?>
    <a href="<?php the_permalink(); ?>" class="more-link" style="display:block;float:right;">⇒続きを読む</a >


    60の部分が表示させたい文字数です。

  10. konno より:

    回答ありがとうございます。
    無事解決しました。

  11. shun より:

    返信大変遅くなりました。
    おかげさまで無事実装できました。ありがとうございました。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <img localsrc="" alt="">