無料相談・お問い合わせ
ブログを移転しました。
移転先 札幌のホームページ制作・Wordpressのハルリのブログ
Haluri Blog

ブログトップページのデザインを変更

2012年 1月12日  ホームページ作成日記

wordpressのデフォルトの状態だと、トップページは新着記事が並ぶだけなので、ニュースサイト風のデザインに変更しました。

主な修正点は、

  • 新着記事と最新のつぶやきを左右に並べて表示
  • 新着記事の文字数を制限
  • 新着記事のカテゴリー・投稿日時表示
  • ブログトップにもtwitter・はてなブックマークボタン設置

です。

それぞれ変更する方法は以下の通りです。

新着記事と最新のつぶやきを左右に並べて表示

 これは単純にthemes内の使っているテーマのindex.phpとスタイルシートを修正しました。

最新のつぶやきはフィードを取得して、件数を指定して表示しています。

新着記事の文字数を制限

 まずwordpressの日本語版をダウンロードした時に含まれているWP Multibyte Patchの設定をいじります。

 /wp-content/plugins/wp-multibyte-patchフォルダのwp-multibyte-patch.phpファイルを開くと、24行目に以下のような記述があるはずです。

'excerpt_mblength' => 110,

 ここで記事本文を何文字表示するか設定できますので、お好みの文字数を指定してください。

次にテーマのindex.phpの記事本文を表示するthe_contentをthe_excerptに変更すれば、先程指定した文字数で記事本文を表示することができます。

新着記事のカテゴリー・投稿日時表示

 記事のカテゴリーを表示したい部分に<?php the_category(',') ?>を投稿日時を表示したい部分に<?php the_time('Y.n.j'); ?>を挿入するだけでOKです。

ちなみに、カテゴリーは自動的にリンクも挿入されます。

ブログトップにもtwitter・はてなブックマークボタン設置

 ページタイトルとURLの取得がうまくできなかったので、前々回に書いたwordpressへの設置方法ではなく、前回書いたホームページに設置する方法で設置しました。

 詳しくはこちらをご覧ください→ホームページにtwitter・はてブのオリジナルボタンを設置する方法

 

今回の変更点は以上です。

変更する方法も書きましたので何かの参考になれば幸いです。



Facebookページにご参加ください

ホームページの作成やSEO対策、Wordpress、WEBマーケティングなど、様々なタメになる情報を配信しています。Facebookページへの参加は下の『いいね!』ボタンをクリックしてください。

関連記事

人気記事

コメント

お名前

コメント本文


pagetop