WordPress テーマ作成事始め。

WordPress

WordPress テーマ作成事始め。

2013-03-01HowToCreate

WordPressのテーマを作るための、最低限のひな形をメモ。

とりあえず、次のファイルがあれば最低限、何かは表示できそうです。仕様的には、index.phpとstyle.cssは必須だった気がします。

index.php
header.php
footer.php
functions.php
style.php

index.phpに書くこと

とりあえず、ヘッダとフッタを呼び出すコードを書いておきます。

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

header.phpに書くこと

wp_headはとりあえず重要なので、必ず書く。

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
  <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    <title><?php wp_title( '|', true, 'right' ); ?></title>

    <?php wp_head(); ?>
  </head>

  <body <?php body_class(); ?>>
    <header id="masthead" class="site-header" role="banner">
      <hgroup>
        <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
        <h3 class="site-description"><?php bloginfo( 'description' ); ?></h3>
      </hgroup>
    </header>

footer.phpに書くこと

wp_footerは、例えばWordPressにログインした時にページ上部に表示されるバーを補完したりして、かなり重要なので必ず書く。

    <?php wp_footer(); ?>
  </body>
</html>

style.cssに書くこと

とりあえずテーマの説明は書いておこう…。

/*
Theme Name: Kuronekoya Style
Theme URI: http://kuronekoya.ifo
Description: A theme by <a href="http://kuronekoya.info">kuronekoya</a>.
Version: 1
Author: kuronekoya
Author URI: http://kuronekoya.info
*/

functions.phpに書くこと

ちょっとした工夫をしているので、とりあえずソースをば。

<?php
/* stylesheets and scripts */
function kuroneko_scripts_styles() {
    // Loads our main stylesheet
    wp_enqueue_style( 'kuroneko-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'kuroneko_scripts_styles' );

/* title */
function kuroneko_wp_title( $title, $sep ) {
    if (is_feed()){
        return $title;
    }

    // Add the site name.
    $title .= get_bloginfo('name');

    // Add the site description for the home/front page.
    $site_description = get_bloginfo( 'description', 'display' );
    if ( $site_description && ( is_home() || is_front_page() ) ){
        $title = "$title $sep $site_description";
    }

    return $title;
}
add_filter( 'wp_title', 'kuroneko_wp_title', 10, 2);
?>

add_actionは、特定のアクションに関数をフックする…と、説明がありますが、とりあえず省略。wp_enqueue_scriptsというアクションがされたら、kuroneko_scripts_stylesを実行するようにします。kuroneko_scripts_stylesでは、使用するCSSを定義しています。header.phpに

その下にある、kuroneko_wp_titleは、タイトルを返すための関数で、twenty twelveからのコピーです。これがないと、header.phpのタイトルタグの間に書かれているPHPを実行しても、なんの文字列も返されません。つまり、wp_titleが呼ばれたら、kuroneko_wp_titleを実行して、タイトル文字を返して、それがページのタイトルとして使われる、ということです。add_filterの第3引数は優先度、第4引数は、フックする関数の引数の数です。

Nikalog World we live in, is filled with wonderful things...