コピペで使える!wordpressのオリジナルテーマを作るときのス二ペット集

とりあえずこれをコピペしておけば最低限OKというコード

ワードプレスのオリジナルテーマを作る上で最低限必要なコードを記載しておきました。

次回以降ではCMSとしてお客様に管理画面ごと納品する為に必要な管理画面を設定するまでのコードをまとめます。

今回は、コピペOKな最低限オリジナルテーマとして表示が可能になるまでのスニペットを紹介します。

最低限必要なファイル

  1. header.php
  2. index.php
  3. footer.php
  4. single.php
  5. page.php
  6. style.css
  7. screenshot.png(必要であれば)
  8. loop.phpやcontent.php、page-***.php(必要であれば)

 

 

style.css

オリジナルテーマの作者情報やテーマ名を規定

header.phpやindex.phpなどのテンプレートファイなどが入っているディレクトリに以下を記載したcssファイルを作成する事で、そのオリジナルテーマの情報を規定出来ます。同様にscreenshot.pngという画像ファイルを同じディレクトリに入れておくと、そのオリジナルテーマの画像が表示されます。


@charset "utf-8";
/*
Theme Name: ここにテーマ名
Description: ここに説明文
Version: 1.0-20150114
Author: ここに著者名
Author URI: https://itachizame.net/
*/

header.php

TOPページとそれ以外のページでの条件分岐

head内で使用するtitleタグを、TOPページとそれ以外のページでそれぞれ別のものを使いたい時


<?php if( is_front_page() && is_home() ): //TOPページの場合?>
<title><?php bloginfo('name'); ?>|<?php bloginfo('description'); ?></title>

<?php else: //TOPページ以外の場合?>
<title><?php the_title(); ?>|<?php bloginfo('name'); ?></title>

<?php endif; ?>

bodyタグに特定のクラス名を付与するコード

例えば特定のページで別のスタイルを使用したい場合など


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

テンプレートのあるファイルのURLを取得する

テンプレートファイル内のcssフォルダにあるcssを取得したいときなど


<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/main.css">

固定ページのリンクをはる

例えばIDが561というページのURLを取得したい場合など


<a href="<?php echo get_page_link('561'); ?>" >ページタイトル</a>

TOPページのURLを取得


<a href="<?php echo home_url(); ?>">トップページへ戻る</a>

/headタグ終了直前にはらなきゃいけないやつ

プラグイン等がちゃんと起動しなくなっちゃうので必要です。


<?php wp_head(); ?>

footer.php

/bodyタグ終了直前にはらなきゃいけないやつ

上記同様、プラグインが起動しなくなっちゃうので必ず入れます。


<?php wp_footer(); ?>

index.php

header.phpやfooter.phpやらのテンプレートを読み込むコード


//header.phpを読み込む
<?php get_header(); ?>

//footer.phpを読み込む
<?php get_footer(); ?>

//オリジナルのテンプレートを読み込む。例えばloop.phpだったら
<?php get_template_part( 'loop' ); ?>

//sidebar.phpを読み込む
<?php get_sidebar(); ?>


<h3>page.php</h3>
<h4>カスタム投稿の記事を出力するループ</h4>
<p>以下の場合、eventという投稿タイプを10件出力します。</p>

<ul>
    <?php $args = array(
        'numberposts' => 10,                //表示(取得)する記事の数
        'post_type' => 'event'    //投稿タイプの指定
    );
    $customPosts = get_posts($args);
    if($customPosts) : foreach($customPosts as $post) : setup_postdata( $post ); ?>
        <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <?php endforeach; ?>
    <?php else : //記事が無い場合 ?>
        <li><p>記事はまだありません。</p></li>
    <?php endif;
    wp_reset_postdata(); //クエリのリセット ?>
</ul>

オリジナルの固定ページテンプレート

例えば、page-event.phpというphpファイルを作成、header.phpを読み込む時に以下のコードを入力すると、固定ページ作成ページで以下の名前のテンプレートを使用できる。


<?php
/**
 * Template Name: イベント告知一覧表示用テンプレート
 */

get_header(); ?>

投稿の一覧を表示させるループ

以下の場合、単純に最新の投稿を4件表示させます


<?php query_posts('showposts=4'); ?>
      <ul>
        <?php while (have_posts()) : the_post(); ?>
        <li><a href="<?php the_permalink()  //投稿のリンクを出力?>">
            <p class="newsDat font-red"><?php the_date( 'Y.m.d' ); //投稿された日付を出力?></p>
            <p class="newsTit"><?php the_title(); //投稿のタイトルを出力?></p>
            <p class="newsDes"><?php remove_filter ('the_content', 'wpautop'); //投稿の本文を出力。ただしpタグなどの自動整形を削除?>
            <?php echo mb_substr(strip_tags($post-> post_content),0,200).'...'; //投稿の本文を200文字以内まで表示?></p>
          </a></li>
        <?php endwhile;?>

single.php

ページのタイトルや本文を表示


<?php if(have_posts()): while(have_posts()): the_post(); ?>

<h3><?php the_title(); //投稿のタイトル?></h3>
<p><?php echo get_the_excerpt(); //ページの抜粋を表示させる?></p>
<p><?php the_content(); //本文の表示?></p>

<?php endwhile; endif; ?>

前後の投稿記事のリンクを出力する


<!-- 投稿前後のナビゲーションの表示 -->
    <div class="navigation">
      <div class="alignleft"><?php next_posts_link('? Older Entries') ?></div>
      <div class="alignright"><?php previous_posts_link('Newer Entries ?') ?></div>
    </div>
    

functions.php

コピペで使えるパンくずリストのス二ペット


// パンくずリストの表示
function breadcrumb(){
    global $post;
    $str ='';
    if(!is_home()&&!is_admin()){
        $str.= '<div id="breadcrumb" class="cf"><div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">';
        $str.= '<a href="'. home_url() .'" itemprop="url"><span itemprop="title">ホーム</span></a> &gt;</div>';
 
        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.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor) .'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor) .'</span></a> &gt;</div>';
                }
            }
        $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a></div>';
        } elseif(is_page()){
            if($post -> post_parent != 0 ){
                $ancestors = array_reverse(get_post_ancestors( $post->ID ));
                foreach($ancestors as $ancestor){
                    $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_permalink($ancestor).'" itemprop="url"><span itemprop="title">'. get_the_title($ancestor) .'</span></a></div>';
                }
            }
        } elseif(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.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($ancestor).'" itemprop="url"><span itemprop="title">'. get_cat_name($ancestor). '</span></a> &gt;</div>';
                }
            }
            $str.='<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="'. get_category_link($cat -> term_id). '" itemprop="url"><span itemprop="title">'. $cat-> cat_name . '</span></a></div>';
        } else{
            $str.='<div>'. wp_title('', false) .'</div>';
        }
        $str.='</div>';
    }
    echo $str;
}

パンくずリストのスタイリングは以下を参考に。


/* 全ページ共通 パンくず */
#breadcrumb {
  font-size: 12px;
  }
  #breadcrumb div {
    display: inline;
    }
    #breadcrumb div a {
      padding: 10px;
      color: #000;
      text-decoration: none;
      position: relative;
      }

header内の不要なものを削除

プラグインのhead cleanerなどでも消せますが、プラグインをなるべく最小限に抑えて軽量化を狙います。


//head内の不要なものを消去
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'index_rel_link' );
remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'start_post_rel_link', 10, 0 );
remove_action( 'wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0 );
remove_action( 'wp_head', 'wp_generator' ); 

本文の中の自動改行を削除する

pタグやbrタグを自動で含めない為のコードです。その下にあるのは、固定ページ以外は自動整形を復活させるためのコードなので、要らなければコメントアウトするか削除して構いません。

また、is_pageの部分をsingleに変更すれば固定ページでなく投稿ページだけを自動整形をonにします。


// 記事の自動整形を無効にする
remove_filter('the_content', 'wpautop');
 
// 固定ページ以外は自動整形を復活させる
if ( ! function_exists( 're_wpautop' ) ) {
    add_action('wp', 're_wpautop');
    function re_wpautop() {
        if(!is_page()) add_filter('the_content', 'wpautop');
    }
}

ログイン時に、ページの上部に表示される管理バーを削除する


//admin bar非表示
add_filter( 'show_admin_bar', '__return_false' );

固定ページにも抜粋機能を加える


//固定ページに抜粋を加える
add_post_type_support( 'page', 'excerpt' );

contact form7のcssやjsを特定のページでのみ読み込む

以下の場合は、contactというスラッグのついたページでのみ読み込む設定にしています。


//コンタクトフォームcss,jsの読み込みページを限定
function my_contact_enqueue_scripts(){
wp_deregister_script('contact-form-7');
wp_deregister_style('contact-form-7');
if (is_page(array('contact'))) {
    if (function_exists( 'wpcf7_enqueue_scripts')) {
        wpcf7_enqueue_scripts();
    }
    if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
    wpcf7_enqueue_styles();
    }
}

記事の編集ページにある不要なメタボックスを削除する

以下で全てを網羅してますが、消さなくていい部分は//でコメントアウトして消さないようにしてください。例えばスラッグとか


//投稿内の不要なメタボックスを削除
function remove_default_post_screen_metaboxes() {
 remove_meta_box( 'postcustom','post','normal' ); // カスタムフィールド
 remove_meta_box( 'postexcerpt','post','normal' ); // 抜粋
 remove_meta_box( 'commentstatusdiv','post','normal' ); // コメント
 remove_meta_box( 'trackbacksdiv','post','normal' ); // トラバ
//remove_meta_box( 'slugdiv','post','normal' ); // スラッグ
 remove_meta_box( 'authordiv','post','normal' ); // 著者
 }
   add_action('admin_menu','remove_default_post_screen_metaboxes');

   function remove_default_page_screen_metaboxes() {
// remove_meta_box( 'postcustom','page','normal' ); // カスタムフィールド
// remove_meta_box( 'postexcerpt','page','normal' ); // 抜粋
 remove_meta_box( 'commentstatusdiv','page','normal' ); // コメント
 remove_meta_box( 'trackbacksdiv','page','normal' ); // トラバ
// remove_meta_box( 'slugdiv','page','normal' ); // スラッグ
 remove_meta_box( 'authordiv','page','normal' ); // 著者
 }
   add_action('admin_menu','remove_default_page_screen_metaboxes');
   

ワードプレスにカスタム投稿機能を追加する

以下のコードではイベント告知という、項目を設け/eventという投稿タイプに設定しています。


//カスタム投稿タイプを追加
add_action( 'init', 'create_post_type' );
function create_post_type() {
    register_post_type( 'event', //カスタム投稿タイプ名を指定
        array(
            'labels' => array(
            'name' => __( 'イベント告知' ),
            'singular_name' => __( 'イベント告知の追加' )
        ),
        'public' => true,
        'has_archive' => true, /* アーカイブページを持つ */
        'menu_position' =>5, //管理画面のメニュー順位
        'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'custom-fields' ,'comments' ), 
        )
    );
}