HTMLサイトからワードプレスのテーマを作る方法

• １．ヘッダー部分をワードプレス化
• ２．フッター部分をワードプレス化
• ３．サイドバー部分をワードプレス化
• ４．記事一覧（繰り返し部分）部分をワードプレス化
• ５．繰り返し部分を作る
• ６．sidebar.php　を作る
• ７．functions.php　を作る
• ８．header.phpを作る
• ９.index.php を作る
• 10．footer.php を作る
• 11.single.php を作る
• 12.style.css を作る
• ※URLが変更になった場合は301設定を忘れずに！
• ※ショートコードをテーマ内で使う場合
• ※条件によって呼び出すファイルを変更する
• カスタムフィールドに記載がない場合の条件分岐
• カスタムフィールドの値を別ページで表示
• カスタムフィールドをループ外で使う
• 固定ページで投稿一覧を表示するテンプレートを作る
• ※検索エンジンに余計なファイルをインデックスさせないようにする
• カスタム投稿タイプを利用する
• ワードプレスのコードをワードプレス外で使用する方法
• カテゴリスラッグをクラス名などに使う

１．ヘッダー部分をワードプレス化

ヘッダーの部分を切り取り、新規ページに貼り付けをし、header.php　で保存します。。
ヘッダーの部分には　<?php get_header(); ?>　と記載して　header.php　を呼び出す

ヘッダーをページごとに分けたい場合は、header-1.php 等という新しいファイルを作り、呼び出すときは

<?php get_header(“1”); ?>

と記載する。

タイトル部分などの常に変更になる部分の書き方は、８．header.phpを作るで説明します。

２．フッター部分をワードプレス化

フッターの部分もヘッダーと同じように切り取り、新規ページに貼り付けをし、　footer.php で保存します。
フッターの部分に<?php get_footer(); ?>　で呼び出す

３．サイドバー部分をワードプレス化

サイドバーの部分も同じように切り取り、新規ページに貼り付けをし、　sidebar.php で保存します。
<?php get_sidebar(); ?>　で呼び出す

４．記事一覧（繰り返し部分）部分をワードプレス化

この部分は分けずに直接記載でも問題ありません。

ループ（繰り返し）部分は　loop.php　(loop部分は何でもOKです。)で保存
<?php get_template_part( ‘loop’ ); ?>　で呼び出す
ループ部分の作り方は5.loopをつくるで説明します。
1から4はワードプレスのインクルードタグといい、メインのテンプレートファイル（例えばindex.php)等から別のテンプレートファール（header.phpmなど）を呼び出せるタグです。
どのページでも基本的には変わらないヘッダーやフッター、サイドバーなどはこのインクルードタグを使うととても便利です。
http://wpdocs.osdn.jp/%E3%82%A4%E3%83%B3%E3%82%AF%E3%83%AB%E3%83%BC%E3%83%89%E3%82%BF%E3%82%B0

５．loop.php（繰り返し部分）　を作る

<?php if (have_posts()) : while (have_posts()) : the_post();?> 
<!-- この部分で記事を表示する処理をする。 --> 
<?php endwhile; // 繰り返し処理終了 
else : // ここから記事が見つからなかった場合の処理
?> 
<div class="post"> 
<h2>記事はありません</h2> 
<p>お探しの記事は見つかりませんでした。</p>
</div>
<?php endif; ?>

繰り返し記事の部分は 各記事で変わる部分のみ以下のように変更（テンプレートタグという　http://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0）

記事タイトル部分（ループ内）　　<?php the_title(); ?>

記事タイトルリンク付　<a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a>

記事へのリンク（ループ内）　<?php the_permalink(); ?>”>

(ループ外）<?php echo the_permalink(); ?>

記事投稿日時　　<?php the_date(); ?>（1日1回のみ表示）　又は　<?php the_time(‘Y年m月d日’); ?>

カスタムメニュー（要functions.php）　<?php wp_nav_menu(); ?>

記事のカテゴリ（リンク付き　ループ内　ul liで表示）　　<?php the_category(); ?>

記事のカテゴリの名前のみ

<?php echo $cat_name; ?>
<?php if ( have_posts() ) :　while ( have_posts() ) : the_post(); // この後にカテゴリー情報を取得する以下コードを記載をすることが前提
$cat = get_the_category(); $cat = $cat[0]; $cat_name = $cat->cat_name; ?>

記事本文を表示（ループ内）　<?php the_content(); ?>

記事の抜粋（ループ内）<?php the_excerpt(); ?>

アイキャッチ（ループ内　要functions.php）　<?php the_post_thumbnail(); ?>

（ループ外）　<?get_the_post_thumbnail(); ?>

アイキャッチURL　<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>

コメントのリスト　<?php wp_list_comments(); ?>

参考になる記事：　「投稿記事の○件目」で条件分岐　http://www.imaginationdesign.jp/blog/wordpress/2296/

６．sidebar.php　を作る 以下記述でウイジェットを使う

<!-- sidebar -->
<div id="sidebar">
<?php if ( is_active_sidebar( 'sidebar-1' ) ) :
dynamic_sidebar( 'sidebar-1' )
; else: ?>
<div class="widget"> <h2>No Widget</h2>
<p>ウィジットは設定されていません。</p>
</div> <?php endif; ?> </div>
<!-- /sidebar -->

  7．functions.php　を作る

必要な部分を追加

<?php 
// RSS2 の feed リンクを出力 
add_theme_support( 'automatic-feed-links' ); 

// カスタムメニューを有効化 
add_theme_support( 'menus' ); 

// カスタムメニューの「場所」を設定 
register_nav_menu( 'header-navi', 'ヘッダーのナビゲーション' );
register_nav_menu( 'side-navi', 'サイドナビゲーション' );

// サイドバーウィジットを有効化 
register_sidebar( array( 'name' => 'サイドバーウィジット-1', 
'id' => 'sidebar-1', 
'description' => 'サイドバーのウィジットエリアです。', 
'before_widget' => '<div id="%1$s" class="widget %2$s">', 
'after_widget' => '</div>', ) ); 

// アイキャッチを使用 
add_theme_support('post-thumbnails'); 

 
// read moreはリンク付き「続きを読む』に変更 
function new_excerpt_more($more) {
     return ' ... <a class="more" href="'. get_permalink() . '">続きを読む</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

//抜粋文字数その場で指定
function my_excerpt( $length ) {
     global $post;
     $content = mb_substr( strip_tags( $post -> post_content ), 0, $length );
     $content = $content . "...";
     return $content;
}
// パンくずリスト
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;
}

カスタムメニューを設置する

functions.phpで有効化（上記参照）したら、

設置する場所に以下のように表示する

<?php
$wpmenu = array(
    'menu'            => 'mainMenu',//WP管理画面で作ったメニュー名
    'menu_class'      => 'clearfix', //ul の クラス名 デフォルト：menu
    'menu_id'         => 'menu',//ulのID。初期値： '{メニューのスラッグ}-{連番}'
    'container'       => false,//ulのラップ・親ボックス　なしにする場合は false。初期値は'div'
    'container_class' => '',//初期値　'menu-{メニューのスラッグ}-container'
    'container_id'    => '',//初期値： なし
    'fallback_cb'     => 'wp_page_menu',//メニューが存在しない場合にコールバック関数を呼び出す
    'before'          => '',// リンクテキストの前のテキスト
    'after'           => '',//リンクテキストの後のテキスト
    'link_before'     => '',//リンクの前のテキスト
    'link_after'      => '',//リンクの後のテキスト
    'echo'            => true,//メニューをHTML出力する(true)か、PHPの値で返す(false)か
    'depth'           => 0,//何階層まで表示するか。0 は全階層。
);
wp_nav_menu( $wpmenu );
?>

参照：https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_get_nav_menu_items

  ８．header.phpを作る

１で作ったheader.phpをテンプレートタグ（）を使ってワードプレス使用にしていきます。

サイト名　　<?php bloginfo('name'); ?>

記事名｜サイト名　サイト名　　<?php bloginfo('name'); ?>

記事名｜サイト名　<?php wp_title( '|', true, 'right' ); bloginfo('name'); ?>

サイト紹介文　<?php bloginfo('description'); ?>

トップページのURL　<?php echo home_url('/'); ?>

テーマのディレクトリのURL　<?php echo get_template_directory_uri(); ?>

テーマのスタイルシートのURLをリンク　<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

og:image" にアイキャッチがある場合はアイキャッチを使う

サイト紹介文　<?php bloginfo('description'); ?>

トップページのURL　<?php echo home_url('/'); ?>

テーマのディレクトリのURL　<?php echo get_template_directory_uri(); ?>

テーマのスタイルシートのURLをリンク　<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

og:image" にアイキャッチがある場合はアイキャッチを使う

 

<?php
if (is_singular()) {
$pid = get_the_ID();
if (has_post_thumbnail($pid)) {
$eyecatch_id = get_post_thumbnail_id($pid);
$ogimage = wp_get_attachment_image_src($eyecatch_id,array(200,200),false);
$ogimage = $ogimage[0];
} else {
$ssdir = get_stylesheet_directory_uri();
$ogimage = $ssdir."http://ismpgo.com/img/pv.jpg";
}
} else {
$ssdir = get_stylesheet_directory_uri();
$ogimage = $ssdir."/img/ogimage.png";
}
?>
<meta property="og:image" content="<?php echo $ogimage; ?>">

 

</head>の前に、必ず　<?php wp_head(); ?>　と記載する！

パンくずリスト作成

functions.phpにパンくずを表示するコードを記述し、 パンくずを表示したいところには　<?php breadcrumb(); ?>　と記述する

９.index.php を作る

ヘッダー・ループ・サイドバー・フッターに分けたので、それぞれを組み合わせれば一覧ページの完成！

投稿の下にページャーをつけて次へ、前へ、をつけます。

次のページ（古い記事）へのリンク　<?php next_posts_link(‘« PREV’); ?>

前のページ（新しい記事）へのリンク　<?php previous_posts_link(‘NEXT »’); ?>

<?php get_header(); ?>
<div class="box43 ">
<?php get_template_part( 'loop' ); ?>
<!-- pager -->
<?php if ( $wp_query -> max_num_pages > 1 ) : ?>
<!--もしページ数が 1ページより多かったら-->
<div class="navigation">
<div class="alignleft"><?php next_posts_link('« PREV'); ?></div>
<div class="alignright"><?php previous_posts_link('NEXT »'); ?></div>
</div> <?php endif; ?>
<!-- /pager -->
</div> <div class="box4">
<?php get_sidebar(); ?>
</div>
<?php get_footer(); ?>

10．footer.php を作る

7のようにテンプレートタグに書き換えるところは書き換え、

</footer>の前には、必ず　<?php wp_footer(); ?>　と記載する！

11.single.php を作る

投稿の記事のシングルページです。

index.php　を少しだけアレンジ。

ページのタイトルにリンクが必要ないので削除。

ページャーは次の記事のタイトルを取得して記載します。

ページャーの部分は以下に変更 ループ内に書かないといけないようなのでループ内に記載

<!-- post navigation -->
<div class="navigation">
<?php if( get_previous_post() ): ?>
<div class="left"><?php previous_post_link('%link', '« %title'); ?></div>
<?php endif; if( get_next_post() ): ?>
<div class="right"><?php next_post_link('%link', '%title »'); ?></div>
<?php endif; ?>
</div>
<!-- /post navigation -->

コメント欄を表示するための関数を入れる

<?php comments_template(); ?>

12.style.css を作る

冒頭に、以下のようなコメントを入れる

/* Theme Name: テーマの名前
Description:テーマの説明
Theme URI: テーマの URL
Author: 作った人の名前
Author URI: 作った人の URL
Version: バージョン License:
ライセンス License URI:
ライセンスの URL */

http://jplan.me/%E3%83%AF%E3%83%BC%E3%83%89%E3%83%97%E3%83%AC%E3%82%B9%E3%81%A7%E6%A4%9C%E7%B4%A2%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%E3%82%92%E4%BD%9C%E3%82%8B%E6%96%B9%E6%B3%95/

※URLが変更になった場合は301設定を忘れずに！

301.htaccessなどで保存して、アップロードは名前を変更して。

.htaccess　のファイル名で転送したい（古い）URLのディレクトリ内にアップロードする。

以下はwwwなしにURLを統一。

RewriteEngine on RewriteCond %{HTTP_HOST} ^(www.jplan.me)(:80)? [NC] RewriteRule ^(.*) http://jplan.me/$1 [R=301,L]

以下はindex.htmlをなしに統一

RewriteEngine on RewriteCond %{THE_REQUEST} ^.*/index.html RewriteRule ^(.*)index.html$ http://jplan.me/$1 [R=301,L]

以下はぺーじURLを変更した際に記載

RewriteEngine on RewriteRule ^old.html$ http://jplan.me/new.html [R=301,L]

※ショートコードをテーマ内で使う場合

<?php echo do_shortcode(‘ショートコードをここに記載’); ?>

※条件によって呼び出すファイルを変更する

<?php if ( 条件() )   { ?> 条件にマッチしたときに表示するコンテンツ <?php } ?>

例１
<?php if (is_single('26')) { ?>
　　ID26の記事はこの中身が表示される 
<?php } elseif(is_single()){ ?>
　　ID26以外の記事ページの時はこの中身が表示される
<?php } else { ?> それ以外はこっちが表示される 
<?php } ?> 


例2　記事ページの時だけslider.phpというファイルをこの場所に読み込む
<?php if ( is_single() ) { include ('slider.php'); } ?>


例３
<?php if (get_post_meta($post->ID, "example", true)) : ?>
	名前がexampleのカスタムフィールドを使っている投稿の場合は表示
<?php else : ?>
	使ってない場合はこっち
<?php endif; ?>

例４　複数指定

<?php if (is_page() || is_single()) { ?>
記事ページと固定ページの時だけ表示する
<?php } ?>

条件の書き方

is_home() // メインブログページが表示されている場合

is_single() // 個別記事が表示されている場合

is_single(‘1’)//ID1の個別記事が表示されている場合

is_single(array(1,2,3))//ID１．２．３の個別記事が表示されている場合

in_category(5)//カテゴリ１の個別記事が表示されている場合

in_category( array( 1,2,3 ) ) //カテゴリ１，２，３の個別記事が表示されている場合

(参照：http://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/in_category）

is_singular() /is_single()、is_page() 、is_attachment()のどれかがtrueの場合

is_page() / 固定ページが表示されている場合

is_page(’25’) / 固定ページでIDが25の投稿が表示されている場合

is_page_template() / ページテンプレートで作った固定ページが表示されている場合

is_category(‘6′) / カテゴリIDが6の記事が表示されている場合

in_category( array( 1,2,3 ) )/ カテゴリIDが1.2.3の記事が表示されている場合

(参照：http://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/is_category)

is_archive() / アーカイブページが表示されている場合

is_search() / 検索結果ページが表示されている場合

is_paged() / 表示中のページが複数のページにわたる場合

is_attachment() / 記事またはページの添付ファイルが表示されている場合

has_excerpt() / 投稿に手動で書かれた抜粋がある場合

has_post_thumbnail / アイキャッチが表示されている場合

カスタムフィールドに記載がない場合の条件分岐

<?php $ctm = get_post_meta($post->ID, 'カスタムフィールド名', true);?>
<?php if(empty($ctm)):?> <p class="topp">カスタムフィールドに記載がない場合の表示</p>
<?php else:?>
<h1 class="topp"><?php echo post_custom('カスタムフィールド名);?></h1>
<?php endif;?>

 

 カスタムフィールドの値を別ページで表示

$fields = get_post_custom(固定ページID);
$val = $fields['カスタムフィールド名'][0];
echo $val;

カスタムフィールドをループ外で使う

<?php
global $wp_query;
$postid = $wp_query -> post -> ID;
echo get_post_meta($postid, 'custom-field-name', true);
wp_reset_query();
?>

固定ページで投稿一覧を表示するテンプレートを作る

（テンプレートネーム：News　の場合） テンプレートの一番上に以下のコードを追加することで固定ページからテンプレートが選べるようになる。

<?php /* Template Name: News */ ?>

ループの前に以下を記載することで投稿の一覧が表示される。

<?php query_posts(‘post_type=post&paged=’.$paged); ?>

他は　index.phpと同じ書き方

※検索エンジンに余計なファイルをインデックスさせないようにする

robots.txt　の名前で以下を記述してアップロード

User-Agent: *
Disallow: /wp-login.php
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /wp-content/
Allow: /
Sitemap: http://example.com/sitemap.xml

※カスタム投稿タイプを利用する

functions.phpに以下のコードを記述

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

参照元

http://kachibito.net/wordpress/theme-development-flow.html

ワードプレスのコードをワードプレス外で使用する方法

<?php require(‘./wpのあるディレクトリ/wp-load.php’);?>

を頭につけてれば同じドメイン内の別ディレクトリの、.phpファイルであればワードプレスのコードが使える。

./wpのあるディレクトリ/wp-load.phpの部分は使用するファイルからみて書き換えてください。

カテゴリスラッグをクラス名などに使う

<ul>
<?php
$args=array(
  'orderby' => 'name',
  'order' => 'ASC'
  );
$categories=get_categories($args);
foreach($categories as $category) { 
  echo '<li class="cat-'. $category-> slug .'">';
  echo '<a href="' . get_category_link( $category->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $category->name ) . '" ' . '>' . $category->name.'</a>';
  echo '</li>';
} 
?>
</ul>

参考記事：http://webdesignrecipes.com/wordpress-customize-with-functions-php/