作業しながらめもめも。

初めてやってみました。今まではこれ、デフォルトのテーマ”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”とだけ出たら成功！






署名を作る



style.cssのコメントで、テーマの名前や説明を記述できるらしい。既存のものを見てみる。



    

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




/*
Theme Name: Twenty Eleven
Theme URI: http://wordpress.org/extend/themes/twentyeleven
Author: the WordPress team
Author URI: http://wordpress.org/
Description: 2011年版の WordPress テーマは洗練されていて、軽量で、柔軟性があります。メニュー、ヘッダー画像、背景をあなたなりにアレンジしてみてください。明と暗のカラースキーム、リンクカラー、3つのレイアウトオプションが利用できるようになっています。「Twenty Eleven」は、フロントページをコンテンツの目立つショーケースへと変身させるショーケース固定ページテンプレートを備えています。ウィジェット対応のたくさんのエリア (サイドバー、3つのフッターエリア、ショーケース固定ページウィジェットエリア) があり、また、アサイド・リンク・引用・ステータスを表示する「短冊」ウィジェットを備えています。印刷用と管理者のエディタ用のスタイル、アイキャッチ画像（投稿、固定ページ上のヘッダー画像と注目の"固定"記事の大きな画像として）のサポート、6つの異なる投稿フォーマットの特別なスタイルが含まれています。
Version: 1.2
License: GNU General Public License
License URI: license.txt
Tags: dark, light, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-width, flexible-width, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
*/




真似して書いてみる。Tagsはここに書いてあるものが全てで、この中から選択して記述するのかな。



/*
Theme Name: Ginpen
Theme URI: https://ginpen.com/
Author: Takanashi Ginpei
Author URI: https://ginpen.com/
Description: Ginpen.com用のテーマです。
Version: 2.0
License: Don't use.
License URI: license.txt
Tags: dark, white, one-column, flexible-width
*/




これでテーマ管理画面を開くと名前やら説明やらが表示されるようになった。



画像は？



twentyelevenの方でlsで見てみると、screenshot.pngというものを見つけた。これだな。



手っ取り早くコピーしてくる。後で、出来上がったらスクリーンショットを撮ればいい。



表示してみた



やたー表示されたよー。



管理画面で表示された



index.phpを調整する



    

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




<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Eleven
 */

get_header(); ?>

        <div id="primary">
            <div id="content" role="main">

            <?php if ( have_posts() ) : ?>

                <?php twentyeleven_content_nav( 'nav-above' ); ?>

                <?php /* Start the Loop */ ?>
                <?php while ( have_posts() ) : the_post(); ?>

                    <?php get_template_part( 'content', get_post_format() ); ?>

                <?php endwhile; ?>

                <?php twentyeleven_content_nav( 'nav-below' ); ?>

            <?php else : ?>

                <article id="post-0" class="post no-results not-found">
                    <header class="entry-header">
                        <h1 class="entry-title"><?php _e( 'Nothing Found', 'twentyeleven' ); ?></h1>
                    </header><!-- .entry-header -->

                    <div class="entry-content">
                        <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'twentyeleven' ); ?></p>
                        <?php get_search_form(); ?>
                    </div><!-- .entry-content -->
                </article><!-- #post-0 -->

            <?php endif; ?>

            </div><!-- #content -->
        </div><!-- #primary -->

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




コメント除いて40行に満たない短いコード。最初のコードは何か機械的な意味はあるのかな？（style.cssみたいに。）



ぱっと見て気になるのはここ。



    

  • get_header()
    • 

  • if ( have_posts() ) :
    • 

  • while ( have_posts() ) : the_post()


      

    • endwhile
      • 

    • 

  • get_template_part( 'content', get_post_format() )
    • 

  • get_sidebar()
    • 

  • get_footer()
    • 




get_header(), get_sidebar(), get_footer()はそのままなのでわかりそう。どこからheaderやらを呼んでくるのかはわからないが、きっと内部的にheader.phpとか、決められた名前のPHPを部分テンプレートとして読み込むんだろうと推測。



で、if ( have_posts() ) :が気になる。呼んで字のごとく、”if have posts”「もし投稿があれば」という事なんだが、まあ自分で使う分にはいらないんじゃないか？　関数実行のコストもあるし。（PHPにおいてそれがどれくらいの重みを持つのかはわからないけれど。）



while末尾のコロン:はよくわからないけど、これはきっとPHPの独特な記法なんだろう。



というわけで、こんな感じに。



    

  • wp-content/themes/ginpen/index.php
    • 




<?php get_header(); ?>
<?php while ( have_posts() ) : the_post(); ?>
[post]
<?php endwhile ?>
<?php get_footer(); ?>




投稿の数だけ[post]が並べば成功。いやヘッダーフッターを用意してないからエラーかな？　今回”one-column”で作るつもりなので、サイドバーはありません。



表示してみた



んーなんか変なヘッダーとフッターが表示されたな。なんだろう。



とりあえず「ユーザー＞あなたのプロフィール＞管理バーの表示＞サイトを表示する際」のチェックは外してみる。他は？



header.phpとfooter.phpを作ってみる



PHPファイルにPHPじゃなくてただの文字を記述。



    

  • wp-content/themes/ginpen/header.php
    • 




[header]




    

  • wp-content/themes/ginpen/footer.php
    • 




[footer]




これでそれぞれ出力されるかな？



表示してみた



出た出た。HTMLのソースコードがシンプルすぎて笑えるレベル。



index.phpを整理



header.phpでDOCTYPEと<html>を吐いてfooter.phpで</html>を吐く、という非対称性はどうも気持ちわるいので、これはindex.phpに埋め込んでしまおう。head要素、body要素については後々調整する。



あと全部ひとつの<?php … ?>にまとまるかな。



こんな感じに。



    

  • wp-content/themes/ginpen/index.php
    • 




<!DOCTYPE html>
<html>
<?php
get_header();
while ( have_posts() ) {
  the_post();
  echo "[post]";
  // get_template_part( 'content', get_post_format() );
}
get_footer();
?>
</html>




header.phpを作成



twentyelevenのやつを見ながらぽちぽち。



lang属性



html要素に付けるやつ。これは今回index.phpの方でやってるので、それを追加。



<html <?php language_attributes(); ?>>




charset



<meta charset="<?php bloginfo( 'charset' ); ?>" />




title



うげ、なんか長い……。



まとめると、こんな感じの処理。



    

  1. 記事のタイトル表示


      

    • なければ表示しない。
      • 

    • カテゴリ階層があれば縦線|で区切る。
      • 

    2. 

  2. ブログのタイトル表示


      

    • 「設定＞一般＞サイトのタイトル」で入力したもの。
      • 

    3. 

  3. ホームなら、ブログの説明表示


      

    • 「設定＞一般＞サイトのタイトル」で入力したもの。
      • 

    4. 

  4. 必要そうならページを表示
    5. 




なるほど、たしかにタイトルは高機能だなあ。





プロファイル



なにこれ？



<link rel="profile" href="http://gmpg.org/xfn/11" />






microformatの一種らしい。




  
例えば、



    <a href="http://www.crypton.co.jp/mp/pages/prod/vocaloid/cv01.jsp"
        rel="sweetheart spouse">初音ミク</a>


  
  
というXHTMLで「初音ミクは俺の愛する嫁」と表現できるわけです。





んーなくてもいいかな。



スタイルシート



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




Ping Back



<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />




HTML5対応



<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script>
<![endif]-->




おお！



html5.jsといえば、HTML5（で定義された新しい要素）に対応していないブラウザーでも正常に表示させるためのライブラリー（という表現でいいのかわからないけど）。これ入れておけばsectionとかarticleとか使い放題なわけです。



WordPress機構



<?php
    /* We add some JavaScript to pages with the comment form
     * to support sites with threaded comments (when in use).
     */
    if ( is_singular() && get_option( 'thread_comments' ) )
        wp_enqueue_script( 'comment-reply' );

    /* Always have wp_head() just before the closing </head>
     * tag of your theme, or you will break many plugins, which
     * generally use this hook to add elements to <head> such
     * as styles, scripts, and meta tags.
     */
    wp_head();
?>




wp_head()



これはソースコードを見れば一目瞭然。





/**
 * Fire the wp_head action
 *
 * @since 1.2.0
 * @uses do_action() Calls 'wp_head' hook.
 */
function wp_head() {
        do_action('wp_head');
}




とはいえdo_action()の詳細はわからないけど。なんでも事前にadd_action()しておくと、ここでまとめて実行してくれる……らしい。



プラグインを入れた時に自動で追加されるタグとかが出力される、んだと思う。



wp_head()で追加される不要なものを削除



これはfunctions.phpで。今回はここで初めて作ります。



    

  • wp-content/themes/ginpen/functions.php
    • 




<?php
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'wp_generator');
?>




CSSフレームワーク



<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/bootstrap.min.css" />




bloginfo('template_directory')で使用中テーマファイルディレクトリのURLを得られる。





bodyの開始



前述の理由からbody絡みは別にやる。というわけで、見るファイルは引き続きheader.phpだが、今回記述するのはindex.phpの方という事にします。（それはそれでなんだかなあとも思うけど……。）



body用クラス



<body <?php body_class(); ?>>




必要なものが良い感じに設定されるらしい。



例:



<body class="home blog logged-in">




自分で独自にクラス名を追加したい場合は引数に与えられば良いらしい。





個人的には、attr="value"を出力するものとvalueだけを出力するものが混在しているのは、どうにも気持ち悪く思う……。



ヘッダー



head要素じゃなくてdiv.header的なやつね。これもhead.phpで記述されている。



これも設定した内容でサイト名とか画像とか出力してるんだけど、自分専用なら固定で出力してしまおう。



ヘッダー画像



これ↓って、記事のサムネイル画像が大きかったら、通常のヘッダー画像の代わりにそれを出力するって事かな？　そんな機能があるなんて知らなかった。



                <?php
                    // The header image
                    // Check if this is a post or page, if it has a thumbnail, and if it's a big one
                    if ( is_singular() &&
                            has_post_thumbnail( $post->ID ) &&
                            ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) ) ) &&
                            $image[1] >= HEADER_IMAGE_WIDTH ) :
                        // Houston, we have a new header image!
                        echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
                    else : ?>
                    <img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
                <?php endif; // end check for featured image or standard header ?>




検索フォーム



ここの条件分岐はよくわからない……。



            <?php
                // Has the text been hidden?
                if ( 'blank' == get_header_textcolor() ) :
            ?>
                <div class="only-search<?php if ( ! empty( $header_image ) ) : ?> with-image<?php endif; ?>">
                <?php get_search_form(); ?>
                </div>
            <?php
                else :
            ?>
                <?php get_search_form(); ?>
            <?php endif; ?>




色の指定があれば色付きの枠で、そうでなければそのまま検索フォームを出力する、と読める。合ってる？



ブロックスコープがあれば、クラス名だけ変数にして、出力部分は統合して、みたいな事ができそうなんだけど。



get_search_form()についてはこちら。



関数リファレンス/get search form – WordPress Codex 日本語版




  
テーマに searchform.php が無い場合は、WordPress はビルトインの検索フォームを表示します。





ふむふむ。label を必ず含めてくださいとはどういう事だろうか。



テキストブラウザー対応



テキストブラウザーやスクリーンリーダー向けに本文までジャンプするリンクとを出力。



これはあった方が良いかも。



これでheader.phpおわり。



本文



後回しに。



とりあえず、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>




footer.php



サイドバー



コメントにも書いてあるけど、ウィジェット設定から追加できるやつを出力。便利ね。



            <?php
                /* A sidebar in the footer? Yep. You can can customize
                 * your footer with three columns of widgets.
                 */
                get_sidebar( 'footer' );
            ?>




クレジット



テーマの名前 “twentyeleven” が記述してあるけど、動かしてみても出力はされていない様子。なんだろ？



            <div id="site-generator">
                <?php do_action( 'twentyeleven_credits' ); ?>
                <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyeleven' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyeleven' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'twentyeleven' ), 'WordPress' ); ?></a>
            </div>




wp_footer()



wp_head()と同じだね。



プラグインを使う場合は必須です。



これでfooter.phpおしまい。短かったな。



改めて、本文



長くなったのでいったんここまで。



参考