小金井にあるWEB制作会社の備忘録

MEMORANDUM

WordPress(ワードプレス)オリジナルテーマの作り方

wordpress(ワードプレス)を使ってテーマを自作した際に使用した、最低限知っておきたい基本的な内容をメモ。

wordpress(ワードプレス)を使ったホームページの作成

まず「テーマ」のファイルを収納するフォルダを作成。
そのフォルダの中に、必要に応じてファイルを新規に作成。
今回、制作に必要となったファイルは下記。記事の一覧とトップページを兼用しているほか、投稿ページと固定ページのデザインは同じものを流用している。

  • style.css //テーマの設定に必須
  • header.php //外部読み込み用共通ファイル
  • side.php  //外部読み込み用共通ファイル
  • footer.php  //外部読み込み用共通ファイル
  • function.php //機能の追加に必要
  • index.hp
  • single.php(page.php)

テンプレートファイルの優先順位

WordPress(ワードプレス)では、ページの種類ごとに、使うテンプレートファイルの優先順位があり、該当ファイルがない場合は時点のファイルを使うようにできている。
「index.php」は最も優先順位が低いが、全ての種類のページに対しての最終手段として使われるため、「index.php」があればテーマとして成立する。

ページの種類 優先順位1 優先順位2 優先順位3
トップページhome.php index.php
アーカイブページcategory.php archive.php index.php
投稿ページsingle.php index.php
固定ページ page.php index.php
404ページ 404.php index.php

分岐タグ

WordPress(ワードプレス)では、 同一のテンプレートファイルを兼用してもデザインを変更できるよう、分岐タグの準備がある。
「index.php」は全ての種類のページとして使用できるので、条件分岐タグを用いることで、ページ分のテンプレートファイルを用意しなくてもページデザインを切り替えることも可能。

ページの種類条件分岐タグ
トップページis_home()
カテゴリー別アーカイブページis_category(), is_archive()
タグ別アーカイブページis_tag(), is_archive()
投稿日別アーカイブページis_date(), is_archive()
月別アーカイブページis_month(), is_date(), is_archive()
年別アーカイブページis_year(), is_date(), is_archive()
検索結果ページis_search()
投稿ページis_single()
固定ページis_page()
404ページis_404()

CSS

@charset "utf-8";
/*
Theme Name: テーマの名前
Theme URI: http://web.syu-u.com
Description: テーマの説明文
Version: 2.0 テーマのバージョン
Author: syu 制作者
Author URI: https://web.syu-u.com 制作者のホームページ
*/
@import url('./pc.css');
@import url('./sp.css');

バージョンの数値はアップデートの際に更新の判断材料となる。
更新の必要があると表示される場合は数値を大きくすることで回避できる。

header.php

<!DOCTYPE HTML>
<html>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo( 'name' ); ?></title>
<meta name="description" content="<?php bloginfo( 'description' ); ?>">
<meta name="keywords" content="<?php bloginfo( 'description' ); ?>">
<meta name="viewport" content="width=device-width, user-scalable=no, minimal-ui">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script language="javascript" src="<?php echo get_template_directory_uri(); ?>/js/main.js"></script>
<?php wp_head(); ?>
<body <?php body_class(); ?>>
<header class="header animated fadeIn headerleft">
<div id="inner-header">
<div id="logo">
<?php if(is_home()): ?>
<h1><a href="<?php bloginfo('url'); ?>" class="blog_title"><?php bloginfo('name'); ?></a></h1>
<?php else: ?>
<a href="<?php bloginfo('url'); ?>" class="blog_title"><?php bloginfo('name'); ?></a>
<?php endif; ?>
</div>
<div id="g_nav">
<div class="btnClose"><a href=""><img src="<?php echo get_template_directory_uri(); ?>/images/common/btn_close.png" width="100%"></a></div>
<?php wp_nav_menu(array('container' => 'nav', 'container_class' => 'header__nav', 'theme_location' => 'header__nav' ) ); ?>
</div>
<div class="btnMenu"><a href=""><img src="<?php echo get_template_directory_uri(); ?>/images/common/btn_menu.png" width="100%"></a></div>
</div>
</header>

footer.php

<footer>
<div class="footer__inner">
<div class="footer__widget_area">
<?php dynamic_sidebar( 'footer-widget' ); ?>
</div>
<?php wp_nav_menu(array('container' => 'nav', 'container_class' => 'footer__nav', 'theme_location' => 'footer__nav' ) ); ?>
<small class="copyright">Copyright<?php echo date('Y'); ?> <a href="<?php bloginfo('url'); ?>" rel="nofollow"><?php bloginfo( 'name' ); ?></a>.All Rights Reserved.</small>
</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

sidebar.php

<div id="side">
<div class="side__widget_area">
<?php dynamic_sidebar( 'side-widget' ); ?>
</div>
</div>

index.php

<?php get_header(); ?>
<?php if(is_home()): ?>
<figure class="mainimage" style="background: url('<?php header_image(); ?>') center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; ">
<hgroup>
<h2><img src="<?php echo get_template_directory_uri(); ?>/images/common/title.png" width="100%" alt="<?php bloginfo('name'); ?>"></h2>
</hgroup>
</figure>
<?php else: ?>
<?php breadcrumb(); ?>
<?php endif; ?>
<div class="wrap">
<main class="main">
<ul class="post-list">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>			
<li class="post">
<a href="<?php the_permalink() ?>">
<figure class="eyecatch">
<?php if(has_post_thumbnail()) { echo the_post_thumbnail('full'); } ?>
<span class="cat-name"><?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?></span>
</figure>
<section class="entry-content">
<h2 class="entry-title"><?php the_title(); ?></h2>
<p class="entry-meta"><?php the_time('Y.m.j') ?></p>
<div class="description"><p>
<?php
if(mb_strlen($post->post_content,'UTF-8') >50 ){
	$content= str_replace('\n', '', mb_substr(strip_tags($post-> post_content), 0, 50,'UTF-8'));
	echo $content.'…';
}else{
	echo str_replace('\n', '', strip_tags($post->post_content));
} 
?></p></div>
</section>
</a>
</li>
<?php endwhile; endif; ?>
</ul>
<?php if( function_exists("the_pagination") ) the_pagination(); ?>
</main>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

single.php(page.php)

<?php get_header(); ?>
<?php breadcrumb(); ?>
<div class="wrap">
<main class="main">
<article class="pageSub">
<section id="container">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<h1><?php the_title();?></h1>
<figure class="eye_chatch"><?php if(has_post_thumbnail()) { echo the_post_thumbnail('full'); } ?></figure>
<div>
<?php the_content();?>
</div>
<?php endwhile; endif; ?>
</section>
</article>
</main>
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

function.php

<?php
// サイドエリアのウィジェットを作成
register_sidebar( array(
     'name' => __( 'Side Widget' ),
     'id' => 'side-widget',
     'before_widget' => '<div class="side__widget_area__container">',
     'after_widget' => '</div>',
     'before_title' => '<h3 class="side__widget_area__container__title">',
     'after_title' => '</h3>',
) );
 
// フッターエリアのウィジェットを作成
register_sidebar( array(
     'name' => __( 'Footer Widget' ),
     'id' => 'footer-widget',
     'before_widget' => '<div class="footer__widget_area__container">',
     'after_widget' => '</div>',
     'before_title' => '<h3 class="footer__widget_area__container__title">',
     'after_title' => '</h3>',
) );
 
// アイキャッチ画像
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size(220, 165, true ); // 幅 220px、高さ 165px、切り抜きモード

// カスタムナビゲーションメニューを作成
add_theme_support('menus');
register_nav_menus(
	array(
		'header__nav' => 'ヘッダーナビゲーション',
		'footer__nav' => 'フッターナビゲーション',
	)
);

//ページング機能
function the_pagination() {
	global $wp_query;
	$bignum = 999999999;
	if ( $wp_query->max_num_pages <= 1 )
	return;
	echo '<nav class="pagination">';
	echo paginate_links( array(
		'base'         => str_replace( $bignum, '%#%', esc_url( get_pagenum_link($bignum) ) ),
		'format'       => '',
		'current'      => max( 1, get_query_var('paged') ),
		'total'        => $wp_query->max_num_pages,
		'prev_text'    => '<',
		'next_text'    => '>',
		'type'         => 'list',
		'end_size'     => 3,
		'mid_size'     => 3
  ) );
  echo '</nav>';
}

function breadcrumb(){
    global $post;
    $str ='';
	echo('<nav class="pankuzu"><ul>');
    if(!is_home()&&!is_admin()){
        $str.= '<li><a href="'. home_url() .'">ホーム</a></li>';
        if(is_category()) {
            $cat = get_queried_object();
            if($cat -> parent != 0){
                $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                foreach($ancestors as $ancestor){
$str.='<li><a href="'. get_category_link($ancestor) .'">'. get_cat_name($ancestor) .'</a></li>';
                }
            }
$str.='<li><a href="'. get_category_link($cat -> term_id). '">'. $cat-> cat_name . '</a></li>';
        }else if(is_page()){
            if($post -> post_parent != 0 ){
                $ancestors = array_reverse(get_post_ancestors( $post->ID ));
                foreach($ancestors as $ancestor){
                    $str.='<li><a href="'. get_permalink($ancestor).'">'. get_the_title($ancestor) .'</a></li>';
                }
            }
			$str.='<li>'. get_the_title() .'</li>';
       }else if(is_single()){
            $categories = get_the_category($post->ID);
            $cat = $categories[0];
            if($cat -> parent != 0){
                $ancestors = array_reverse(get_ancestors( $cat -> cat_ID, 'category' ));
                foreach($ancestors as $ancestor){
                    $str.='<li><a href="'. get_category_link($ancestor).'">'. get_cat_name($ancestor). '</a></li>';
                }
            }
            $str.='<li><a href="'. get_category_link($cat -> term_id). '">'. $cat-> cat_name . '</a></li>';
			$str.='<li>'. get_the_title() .'</li>';
        }
    }
    echo $str;
    echo('</ul></nav>');
}

// カスタムヘッダー
$custom_header = array(
	'random-default' => false,
	'width' => 1980,
	'height' => 600,
	'flex-height' => true,
	'flex-width' => false,
	'default-text-color' => '',
	'header-text' => false,
	'uploads' => true,
	'default-image' => get_stylesheet_directory_uri() . '/img/default_img.png',
);
add_theme_support( 'custom-header', $custom_header );
?>

ページング機能とパンくずリストの機能、トップページのヘッダー画像を変更できるようにカスタムヘッダー機能を追加。
その他の機能に関しては、ウィジェットやプラグインを導入したり、別途制作で対応。