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

MEMORANDUM

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

公開日：2020-03-18
最終更新日：2020-05-07

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 );
?>

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

双海カオルのタロット占い

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

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

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

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

分岐タグ

CSS

header.php

footer.php

sidebar.php

index.php

single.php（page.php）

function.php

カテゴリー

最近の投稿

同一カテゴリーの記事

WordPress（ワードプレス）の「tax_query」と「meta_query」を併用して「OR」取得を実装

WordPress（ワードプレス）のグーテンベルクにオリジナル投稿ブロックを設置する

WordPress（ワードプレス）で特定カテゴリーの子カテゴリーを取得・表示する