WordPress

WordPress テーマ作成事始め。

2013-03-01HowToCreate

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

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

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

index.phpに書くこと

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

1
2
3
<?php get_header(); ?>
  hoge hoge
<?php get_footer(); ?>

header.phpに書くこと

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
<!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にログインした時にページ上部に表示されるバーを補完したりして、かなり重要なので必ず書く。

1
2
3
    <?php wp_footer(); ?>
  </body>
</html>

style.cssに書くこと

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

1
2
3
4
5
6
7
8
/*
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に書くこと

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

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?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引数は、フックする関数の引数の数です。

Bookmark this on Hatena Bookmark

Topic