タグ: wordpress

3-4.中身のPHP化（sidebar.php + functions.php）

現在のsidebar.phpは

  <div id="widget">
   <ul class="widget_block">
    <li class="widget_container">
     <h3 class="widget_title">widget_title</h3>
     <div class="widget_parts">
      WIDGET の 中身 1
     </div>
    </li>
   </ul>
  </div>

で。
widgetに対応してるということにしなくてはいけないので、<li>部分を

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
<?php endif; ?>

で囲むことにする。

  <div id="widget">
   <ul class="widget_block">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
    <li class="widget_container">
     <h3 class="widget_title">widget_title</h3>
     <div class="widget_parts">
      WIDGET の 中身 1
     </div>
    </li>
<?php endif; ?>
   </ul>
  </div>

さらに、functions.php ファイルを作成して以下のソースを書き込む。

<?php
if ( function_exists('register_sidebar') ) {
    register_sidebar();
}

とりあえずこれでwidgetに対応してるテーマということになる。
このへんのやり方はWidgetizing Themes – WordPress Codex 日本語版を参考に。というかそのままやっただけです。

3-3.中身のPHP化（footer.php）

footer.phpは6行しかないので一気に。

  <div id="footer">
   <div id="copyright">Powered by WordPress</div>
  </div>
 </div>
</body>
</html>

これを・・・変えるところは1箇所だけだった。

  • 変更点01：bodyタグ終了部分直前 
    </body>

    head終了直前の追記と同様に、bodyの終了直前にも追加可能な場所を確保しておく。

    <?php wp_footer(); ?>
</body>
  <div id="footer">
   <div id="copyright">Powered by WordPress</div>
  </div>
 </div>
<?php wp_footer(); ?>
</body>
</html>

今後変更点が出るかもしれないし。いまのところはこれで。

3-2.中身のPHP化（header.php）

header.phpはこの状態。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>TEST CONTENT</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div id="wrap">
  <div id="header">
   <h1 id="title">サイトのタイトルだよー</h1>
   <div id="search">検索？<input type="text" size="10" /></div>
   <div id="desc">サイトの説明文が入ったりします</div>
  </div>

テンプレートタグ – WordPress Codex 日本語版を参考に進める。

  • 変更点01：titleタグ 
    <title>TEST CONTENT</title>

    bloginfoでブログ名の表示、wp_titleで記事タイトルを表示できるようなのでコレを使う。
    google等の表示に合わせたいので「記事タイトル – ブログタイトル」の表示形態で。

    <title><?php wp_title(' - ', true, 'right'); ?><?php bloginfo('name'); ?></title>
  • 変更点02：CSSリンク 
    <link rel="stylesheet" type="text/css" href="style.css" />

    ここでもbloginfoを使う。

    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />

    これで、使用中のメインCSSファイルのURLに変換できる。

  • 変更点03：headタグ終了部分直前 
    </head>

    headの中身はここに書いてあるだけしか使わない！という事なら必要ないんだけど、
    プラグイン入れたりすると必要に応じてheadの中身を追加されたりするので
    「追加するならここによろしく」
    という意味合いで。

    <?php wp_head(); ?>
</head>
  • 変更点04：サイトのタイトル 
    <h1 id="title">サイトのタイトルだよー</h1>

    サイトのタイトルをbloginfoから持ってくる。
    ついでにリンクになっていると便利なのでこれもbloginfoから持ってきてAタグで囲む。

    <h1 id="title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
  • 変更点05：サイトの説明 
    <div id="desc">サイトの説明文が入ったりします</div>

    サイトの説明文もbloginfoから持ってくる。

    <div id="desc"><?php bloginfo('description'); ?></div>
<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title><?php wp_title(' - ', true, 'right'); ?><?php bloginfo('name'); ?></title>
 <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php wp_head(); ?>
</head>
<body>
 <div id="wrap">
  <div id="header">
   <h1 id="title"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
   <div id="search">検索？<input type="text" size="10" /></div>
   <div id="desc"><?php bloginfo('description'); ?></div>
  </div>

こんなかな？

3-1.中身のPHP化（index.php）

現在、この状態。
ここから置き換えが必要なところを書き換えていく。

<?php get_header(); ?>
  <div id="main">
   <div id="content">
    <div class="content_container">
     <h2 class="content_title">content_title</h2>
     <div class="content_category">content_category</div>
     <div class="content_tag">content_tag</div>
     <div class="content_author">content_author</div>
     <div class="content_create_datetime">0000/00/00 00:00:00</div>
     <div class="content_updator">content_updator</div>
     <div class="content_update_datetime">0000/00/00 00:00:00</div>
     <div class="content_parts">
      CONTENT の 中身 1
     </div>
    </div>
   </div>
<?php get_sidebar(); ?>
  </div>
<?php get_footer(); ?>
  • 変更点01：記事の中身を表示するためのループ 
        <div class="content_container">
      ・・・
    </div>

    この中身が表示記事数分だけループする。whileで回すのが吉らしい。

    <?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>

    have_postsで表示する投稿が残っているか判断し
    the_postで次の投稿に進み、グローバル変数$postを設定するとのこと。
    詳細は関数リファレンス/WP Query – WordPress Codex 日本語版に。

  • 変更点02：記事の中身
    前述のthe_postで、記事ごとの情報を$postに割り当てているので、その中身を引っ張り出せるように書き換えていく。

         <h2 class="content_title">content_title</h2>
     <div class="content_category">content_category</div>
     <div class="content_tag">content_tag</div>
     <div class="content_author">content_author</div>
     <div class="content_create_datetime">0000/00/00 00:00:00</div>
     <div class="content_updator">content_updator</div>
     <div class="content_update_datetime">0000/00/00 00:00:00</div>
     <div class="content_parts">
      CONTENT の 中身 1
     </div>

    それぞれに使用するテンプレートタグは以下のとおり。
    テンプレートタグのリストはこちら。
    タイトル → the_title
    該当ページURL → the_permalink
    カテゴリー → the_category
    タグ → the_tags
    投稿者 → the_author
    公開日時 → the_dateとthe_time
    ※the_dateは「同じ日に複数の記事がある場合は、最初の記事とともに一度だけ出力される。」ということなので、the_timeに “Y/m/d H:i:s” を出力させた方がイイ。
    更新者 → the modified author
    更新日時 → the_modified_dateとthe_modified_time
    本文 → the_content

         <h2 class="content_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
     <div class="content_category"><?php the_category(', ') ?></div>
     <div class="content_tag"><?php the_tags(); ?></div>
     <div class="content_author"><?php the_author(); ?></div>
     <div class="content_create_datetime"><?php the_time('Y/m/d H:i:s'); ?></div>
     <div class="content_updator"><?php the_modified_author(); ?></div>
     <div class="content_update_datetime"><?php the_modified_date('Y/m/d'); ?> <?php the_modified_time('H:i:s'); ?></div>
     <div class="content_parts">
      <?php the_content('more...', 'false'); ?>
     </div>

ここまでやるとこうなる。

<?php get_header(); ?>
  <div id="main">
   <div id="content">
    <div class="content_container">
    <?php while (have_posts()) : the_post(); ?>
     <h2 class="content_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
     <div class="content_category"><?php the_category(', ') ?></div>
     <div class="content_tag"><?php the_tags(); ?></div>
     <div class="content_author"><?php the_author(); ?></div>
     <div class="content_create_datetime"><?php the_time('Y/m/d H:i:s'); ?></div>
     <div class="content_updator"><?php the_modified_author(); ?></div>
     <div class="content_update_datetime"><?php the_modified_date('Y/m/d'); ?> <?php the_modified_time('H:i:s'); ?></div>
     <div class="content_parts">
      <?php the_content('more...', 'false'); ?>
     </div>
    <?php endwhile; ?>
    </div>
   </div>
<?php get_sidebar(); ?>
  </div>
<?php get_footer(); ?>

ふむ。いいかな。

カテゴリ別・タグ別のRSSを取得する

通常、WordPressのFeedは「http://katzplus.com/feed/」で取得する。
特定カテゴリのFeedのみ取得したい場合は
「http://katzplus.com/category/[カテゴリ名]/feed/」で取得できるみたい。
特定タグの場合も同様に
「http://katzplus.com/tag/[タグ名]/feed/」で取得できる。

例えば、

http://katzplus.com/tag/plugin/feed/

で、このサイトで「plugin」のタグが付いたもののみのFeedを取得することができる。

2.header / footer / sidebar の分割

1.ワイヤーフレームを作るで作成したHTMLを

  • index
  • header
  • sidebar
  • footer

の4つに分割する。
分割というか、index から他の3つを抜き出す。

header.php ——

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>TEST CONTENT</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div id="wrap">
  <div id="header">
   <h1 id="title">サイトのタイトルだよー</h1>
   <div id="search">検索？<input type="text" size="10" /></div>
   <div id="desc">サイトの説明文が入ったりします</div>
  </div>

footer.php ——

  <div id="footer">
   <div id="copyright">Powered by WordPress</div>
  </div>
 </div>
</body>
</html>

sidebar.php —–

   <div id="widget">
    <ul class="widget_block">
     <li class="widget_container">
      <h3 class="widget_title">widget_title</h3>
      <div class="widget_parts">
       WIDGET の 中身 1
      </div>
     </li>
    </ul>
   </div>

それぞれを抜き出してファイルとして作成。
index には代わりに

<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

を入れておく。

そうすると index はこんな感じになる。

<?php get_header(); ?>
  <div id="main">
   <div id="content">
    <div class="content_container">
     <h2 class="content_title">content_title</h2>
     <div class="content_category">content_category</div>
     <div class="content_tag">content_tag</div>
     <div class="content_author">content_author</div>
     <div class="content_create_datetime">0000/00/00 00:00:00</div>
     <div class="content_updator">content_updator</div>
     <div class="content_update_datetime">0000/00/00 00:00:00</div>
     <div class="content_parts">
      CONTENT の 中身 1
     </div>
    </div>
   </div>
<?php get_sidebar(); ?>
  </div>
<?php get_footer(); ?>

この状態だと結構悲しい事態なので、さくっと次に進める。

1.ワイヤーフレームを作る

作成方法、というかパーツの構成要素が
テーマの作成
テンプレート入門
あたりに書いてあるので読みながら進める。

が、パッと見のモックがないとやる気が出ないので
とりあえず、ワイヤーフレームだけ作ってみる。
作るのは今じゃあまり見かけない、左サイドバー形式。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>TEST CONTENT</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div id="wrap">
  <div id="header">HEADER</div>
  <div id="main">
   <div id="content">CONTENT</div>
   <div id="widget">WIDGET</div>
  </div>
  <div id="footer">FOOTER</div>
 </div>
</body>
</html>

htmlはこんな感じだろう、きっと。

これにCSSを合わせて左サイドバー形式にする。
CSS Tools: Reset CSSもあとで組み合わせる。

#header, #main, #footer {
  width: 1000px;
  text-align: center;
  border: 1px solid #FF9999;
}
#content {
  float: right;
  width: 100%;
  margin-left: -260px;
  border: 1px solid #99FF99;
}
#widget {
  float: left;
  width: 240px;
  border: 1px solid #9999FF;
}
#footer {
  clear: both;
}

MediaQueriesの適用とかはとりあえず後回しで。
テーマ情報というものを記述しないといけないらしいけど、これも後で。
コレで最低限できた。
・・・ま、ただのHTMLです。
さすがにこれだけだと何が何やらなので、もうちょっと書き足してみる。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>TEST CONTENT</title>
 <link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
 <div id="wrap">
  <div id="header">
   <h1 id="title">サイトのタイトルだよー</h1>
   <div id="search">検索？<input type="text" size="10" /></div>
   <div id="desc">サイトの説明文が入ったりします</div>
  </div>
  <div id="main">
   <div id="content">
    <div class="content_container">
     <h2 class="content_title">content_title</h2>
     <div class="content_category">content_category</div>
     <div class="content_tag">content_tag</div>
     <div class="content_author">content_author</div>
     <div class="content_create_datetime">0000/00/00 00:00:00</div>
     <div class="content_updator">content_updator</div>
     <div class="content_update_datetime">0000/00/00 00:00:00</div>
     <div class="content_parts">
      CONTENT の 中身 1
     </div>
    </div>
   </div>
   <div id="widget">
    <ul class="widget_block">
     <li class="widget_container">
      <h3 class="widget_title">widget_title</h3>
      <div class="widget_parts">
       WIDGET の 中身 1
      </div>
     </li>
    </ul>
   </div>
  </div>
  <div id="footer">
   <div id="copyright">Powered by WordPress</div>
  </div>
 </div>
</body>
</html>

こんな。
content_container と widget_container は繰り返せるようにすればいいだろう、多分。
widget部分については ul / li で書いておいたほうが後々いいらしいので、そうしておく。

日本語表示を改変する

wordpress は基本は、英語。
他の言語は言語ファイルを経由することで表示されている、はず。
で、言語ファイルは「wp-content/languages」の中に格納されている。
開けてみると「.po」ファイルや「.mo」ファイルがある。
「.po」ファイルは翻訳のための置き換えリスト、「.mo」ファイルは置き換えリストをwordpressの読みこみ用に変換したもの、と言うこと。
詳細は I18n for WordPress Developers – WordPress Codex 日本語版 に。

で、具体的には「固定ページ」という単語を「サイトコンテンツ」に置き換えたい。
「サイトコンテンツ」という単語は admin-ja.po の 1328行目と 3993行目の２ヶ所にすでにあるけど気にしない事にする。
とりあえず新しい「admin-ja.po」「admin-network-ja.po」「ja.po」の３ファイルができたのでコレを変換する。

msgfmt -o admin-ja.mo admin-ja.po

で、

プログラム 'msgfmt' はまだインストールされていません。  次のように入力することでインストールできます:
apt-get install gettext

そういうことなので素直にインストールして再トライ。

できました！

RSS Includes Pages

RSS Includes Pages を使うと、feed に投稿だけでなく、固定ページの更新情報も載せることができる。
しかし、feed に両方の更新が載り、個別の更新情報などを取ることはできなくなってしまう。
そのへんの設定などもないので採用は保留。

HungryFEED

RSS Feed とかページ上に表示したいとき、HungryFEED を使用する。
sidebar上であれば普通に RSS Widget があるのでそれを使えばいい。

shortcodeで
[ hungryfeed url=”http://verysimple.com/feed/” ]
みたいに書くだけなので、いろいろなところのfeedを好きなだけ持ってこれる。

もし設置時に

Error Processing Feed: /var/web/katzplus/wp-content/cache/185fa482284bdaae3b78e21065455af8.spc is not writeable at /var/web/katzplus/wp-includes/class-simplepie.php line 1780

とか言われるようであれば、
設定ページの「Cache Duration (in seconds)」を「0」にしてキャッシュの書き込みを行わないようにすればOK。

このサイトの RSS Feed を下に表示してみる。
[hungryfeed url=”http://katzplus.com/tag/plugin/feed”]

making theme

テーマを作ってみる。
twentyelevenはいいテーマなんだけど、IE6で見ると崩れるね、やっぱりね。