※スマホ対応はしてません。

タグ: プログラマーだけどWordPressのテーマを1から作ってみる。

プログラマーだけどWordPressのテーマを1から作ってみる。(その4)

カテゴリー: サーバー

そういえばサイドバーを忘れてました。

作業の記録付けるのも忘れてました。

サイドバーにも二種類あるらしい

静的なものと、動的なものと。

後者が管理画面の外観>ウィジェットから操作できるやつで、前者は単純にテンプレートを読み込むだけ(対応アクションはある)。

静的なサイドバー

get_sidebar()で読み込む。

<?php get_sidebar('hoge'); ?>でsidebar-hoge.phpというテンプレートを探してきて、出力する。

これは簡単だね。ファイルがないとデフォルトのものを読み込むみたい。

動的なサイドバー

何もしないとウィジェット設定の画面でこのテーマではウィジェットは使用できませんと表示されてる。

利用できるようにするには、register_sidebar()を使って「登録」してやる必要があるみたい。

これをfunctions.phpに書いておく。

register_sidebar(array(
  'name' => 'サイドバー',
  'id' => 'sidebar-1',
));
register_sidebar(array(
  'name' => 'フッター',
  'id' => 'footer-1',
));

これでウィジェット設定に出てくる。

使うときはdynamic_sidebar()で読み込む。

<ul id="sidebar">
  <?php dynamic_sidebar( 'sidebar-1' ); ?>
</ul>

出力されるウィジェットはliタグで囲まれるようになるので、それらをulで括る必要がある。これはdynamic_sidebar()のオプションbefore_widget, after_widgetで変更できる。

タイトルはh2で出力されるんだけど、これも同様にbefore_title, after_titleで変える事ができたよ。

強引だけどこんな事もできるね

register_sidebar(array(
  'id' => 'table-1',
  'before_widget' => '<tr>',
  'before_title' => '<th>',
  'after_title' => '</th><td>',
  'after_widget' => '</td></tr>',
));
<table>
  <?php dynamic_sidebar( 'table-1' ); ?>
</table>

↓結果(整形済み)

<table>
  <tr>
    <th>アーカイブ</th>
    <td>
      <ul>
        <li><a href='http://localhost/?m=201204' title='2012年4月'>2012年4月</a></li>
        <li><a href='http://localhost/?m=201203' title='2012年3月'>2012年3月</a></li>
      </ul>
    </td>
  </tr>
</table>

こんな風に使う場面はないと思うけども。

多言語対応

そういえばこれも知りたいところ。明日調べよう。

プログラマーだけどWordPressのテーマを1から作ってみる。(その3)

カテゴリー: サーバー

もうちょいでできそうだねー。

とりあえずコメント

twentyelevenのindex.phpにもcontent.phpにもcommentという単語は見当たらない。どこだ?と思ったら、個別ページではindex.phpではなくsingle.phpが読み込まれているらしい。

というわけでsingle.php内で検索するとあっさり発見。

  • wp-content/themes/twentyeleven/single.php #25
                    <?php comments_template( '', true ); ?>

この一行でコメント一覧と投稿フォームまで表示された。このHTMLはどこで記述してるんだろう?

というか、その前にsingle.phpとは??

(さらに…)

プログラマーだけどWordPressのテーマを1から作ってみる。(その2)

カテゴリー: サーバー

前回の続き。例によって、あまり人に読まれる事を考慮してません(笑)

ここまでのあらすじ

(´-ω-`) oO

(´=ω・`) え、なに?

というわけで、

今日は記事本体を見ていきます。

記事を表示するのは幾つかパターンあるみたい。

  • 個別表示(パーマリンク)
  • 一覧表示
    • フロントページ
    • 検索
    • カテゴリー
    • タグ

今現在の仮の状態

今は記事の部分の出力はこんな感じ。

  • wp-content/themes/ginpen/index.php (部分)
<div id="main">
<ul>
<?php
while ( have_posts() ) {
  the_post();
  echo '<li><a href="';
  echo the_permalink();
  echo '">';
  echo the_title();
  echo '</a></li>';
  // get_template_part( 'content', get_post_format() );
}
?>
</ul>
</div>

ulはもちろん今だけです。本丸はコメントアウトしてあるget_template_part()の部分。

まあ関数の名前を見ればなんとなくわかる気がする。

get_template_part( $slug, $name )

テーマのその名前のテンプレートパーツをインクルードします。name を指定した場合は、特定の部分をインクルードします。{slug}.php ファイルが無い場合は、インクルードしません。

というわけでcontent.phpだな。

  • wp-content/themes/twentyeleven/content.php

100行程度。まずはこれをじっくり見てゆきます。

(さらに…)

プログラマーだけどWordPressのテーマを1から作ってみる。(その1)

カテゴリー: サーバー

作業しながらめもめも。

初めてやってみました。今まではこれ、デフォルトのテーマ”twentyten”のCSSだけ改造してやってたんだけど、諸々省略したり変更したりしても良いかなーと。

基本的には、最新のデフォルトテーマ”twentyeleven”のコードを読みながら、真似たり省いたりして自分専用のテーマをスクラッチ製造してみました。

空のテーマを作成する

テーマは wp-content/themes/<theme name> に作るらしい。ということで。

cd wp-content/themes
mkdir ginpen
cd ginpen

さらにPHPとスタイルシートが必要らしい。欠けていると「壊れたテーマ」とされてしまう。

“hello”とだけ表示するPHPを作成。

  • wp-content/themes/ginpen/index.php
<?php
echo "hello"
?>

空のスタイルシートを作成。

  • wp-content/themes/ginpen/style.css

↑本当に空です。

管理者でログインして、「外観>テーマの管理」から「ginpen : 匿名 作」を「有効化」する。

表示してみた

WordPressの(公開側の)ページを開いて、”hello”とだけ出たら成功!

(さらに…)

プログラマーだけどWordPressのテーマを1から作ってみる。(目次)

カテゴリー: サーバー

随時追加します。