WordPressのテーマをカスタマイズする

当サイトではWordpressを使っていますが、一番のメリットは、ブログの機能を維持したまま好きなようにサイトをアレンジできることです。HTMLの知識が少しあれば、あとはなんとでもなります。

まず、基礎知識として、Wordpressは、

「header」「content」「sidber」「footer」

などの組み合わせでできているということです。それぞれのファイルをアレンジしていけば、好きなようにサイトをアレンジできるというわけです。例えば、「header」のファイルを開いてみましょう。この中に、ブログのメイン画像があるはずです。このメイン画像のパスを変更すると、サイトの画像も入れ替わるというわけです。HTMLが使えるので、リンクを貼ったり、バナーを貼ったりもできます。「footer」も同じようにアレンジできます。ここにはサイトの説明などを入れておくといいでしょう。

さて、一番アレンジしたいのはトップページではないでしょうか。「なまら北海道だべさ」では、どのようにアレンジをしているのかを簡単に紹介します。

1、index.phpをアレンジ。
①全体にかかわること。<?php get_header(); ?> ←これはheader.phpを読み込むという命令です。
ですから、これを消してheader.phpの内容を丸ごとコピーして張り付けると、他のページに影響なく、トップページの画像だけ入れ替えることができます。これは、投稿ごとに画像を変えるなどのときにも使えるテクニックです。

<?php get_sidebar(); ?> ←sidbar.phpを読み込みます。これを消して、サイドバーごとアレンジしてしまうのもいいでしょう。その際は、下記のstyleも変更しないとうまく行きません。

<div id=”content”> ←style.cssの中で、字の大きさや、画像の位置、余白、ページの幅など細かく設定されています。contentをアレンジしたいのなら、styleの中のcontentの部分をいろいろとアレンジすると良いです。ただ、一箇所アレンジしたことが、他のページにも影響しますので<div id=”content-onsen“>などとして、スタイルシートの方も

/* Content-onsen */ ←このように、コピー&ペースト後にハイフンで名前をつけて、他と区別すると安心だと思います。

記事の幅(ページの幅ではないです。ページの幅を変えたいときは、スタイルシートの#wrapという部分を変更。)
#content-onsen {width:700px; line-height:1.6em; margin:20px 35px 5px; padding:0;}

#contentwide-onsen {line-height:1.6em; margin:0 20px 0px 15px; padding:0;}

#content-onsen h2,#contentwide h2 {font-size:2.5em; margin:0 0 0px; font-family: AR P行楷書体H; line-height:1.4em;}

#content-onsen h3,#contentwide h3 {font-size:1.4em; margin:0 0 8px;}

#content-onsen img,#contentwide img {border:0px solid #d0d0d0; float:left; margin:3px 10px 3px 0;}

#content-onsen ul,#contentwide ul,#content ol,#contentwide ol {margin:0 0 16px 20px;}

#content-onsen li,#contentwide li {padding:0 0 0 5px;}

#content-onsen ul ul,#contentwide ul ul,#content ol ol,#contentwide ol ol {margin:0 0 0 16px;}

#contentwide-onsen {line-height:1.6em; margin:0 10px 0px 0px; padding:0;}

何がどう変わるのかはいろいろやってみないとわかりません。marginは余白。左、上、右、下の順番だったような気がします。pxを書き忘れて効果がなかったりしますので注意してください。いろいろさぐりながらやるのもまたおもしろいですよ。

②記事の表示の仕方

デフォルトでは、記事をそのまま表示する形になっています。できれば、トップページはタイトルと日付だけを表示したいなんてこともあるかもしれません。また、投稿時刻・コメントの数を表示したいという場合もあるかもしれません。wordpressはその辺のアレンジが自由自在です。

まずは、デフォルトのソースをお見せしましょう。

青字で私が解読したことを書き込みます。
赤字の部分は、好きな言葉にしても良いところです。&laquo;は<< 
<div>
<h2><a href=”<?php the_permalink() ?>←投稿のアドレス” rel=”bookmark” title=”<?php the_title(); ?>”><?php the_title(); ?>←投稿のタイトル</a></h2>←<h2>はタイトルの部分です
<div>
<?php the_content(‘Read more &raquo;’); ?>←よくわかりませんが、消すとエラー
</div>

<p><strong>Posted:</strong> <?php the_time(‘F jS, Y’) ?>←投稿日時 under <?php the_category(‘, ‘) ?>←投稿カテゴリ.<br />
<a href=”<?php comments_link(); ?>←コメントのURL“><strong>Comments:</strong> <?php comments_number(‘none‘,’1‘,’%’); ?>←コメントの数</a>
<?php edit_post_link(‘Edit this post‘,’ | ‘,”); ?>←コメントを編集するか Edit this postは「編集」などわかる言葉に書き換えてもいい</p>
</div>
<?php endwhile; ?>←消すとエラー
<div>
<p><span><?php next_posts_link(‘&laquo; Previous entries‘) ?>←前の記事</span>
<span><?php previous_posts_link(‘Next entries &raquo;’) ?>←次の記事</span></p>
</div>
<?php else : ?>←消すとエラー

この赤字の部分を自分の好きな言葉にアレンジするだけでも結構違います。

なまら北海道だべさのトップページは下記のようにしています。これで、日付とタイトルだけが表示されるようになります。テンプレート(テーマ)によって若干違うので、保存しながら少しずつアレンジをして楽しんでみてください。


<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>
・<?php the_time(‘F’); ?><?php the_time(‘j’); ?>日(<?php the_time(‘D’); ?>)  <a href=”<?php the_permalink() ?>” rel=”bookmark” title=”Permanent Link: <?php the_title(); ?>”><?php the_title(); ?></a></br>
   <?php endforeach; else: ?>
   <p><?php _e(‘Sorry, no posts matched your criteria.’); ?></p>
   <?php endif; ?>
  <center><?php posts_nav_link() ?></center>
<?php if (have_posts()) : ?><?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?><?php endif; ?>

スポンサーリンク
スポンサーリンク

シェアする

フォローする

スポンサーリンク
スポンサーリンク