WordPressオリジナルテーマを作ってみよう シンプルなブログサイト
スポンサーリンク
1.記事を読み込む（ループ）
1-1.記事の個別ページを作る
まずは、シンプルに記事のタイトル、公開日やカテゴリー、記事の本文を表示するページを作ってみましょう。
index.phpに以下のコードを記載しましょう。
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title><?php bloginfo( 'name' ); ?><?php wp_title(); ?></title> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <!-- コンテンツ(記事、記事一覧) --> <!-- ■■■■■■ 記事ループ スタート ■■■■■■■ --> <?php if(have_posts()): while(have_posts()): the_post(); ?> <article <?php post_class(); ?>> <!-- 記事タイトル --> <h1><?php the_title(); ?></h1> <!-- 記事情報（日付、カテゴリ、コメント） --> <time datetime="<?php echo get_the_date( 'Y-m-d' ) ?>"> <?php echo get_the_date(); ?> </time> <?php the_category( ', ' ); ?> <!-- 記事本文 --> <?php the_content(); ?> </article> <?php endwhile; endif; ?> <!-- ■■■■■■ 記事ループ エンド ■■■■■■■ --> </body> </html> |
【コード解説】
■5行目：
titleタグは、bloginfo( ‘name’ )とwp_title()というWordPressテンプレートタグを使って、「サイトのタイトル」と「現在のページのタイトル」を取得しています。
■5行目：
titleタグは、bloginfo( ‘name’ )とwp_title()というWordPressテンプレートタグを使って、「サイトのタイトル」と「現在のページのタイトル」を取得しています。
■6行目：
スタイルシートは、get_stylesheet_uri()を使って、style.cssを読み込んでいます。
■14行目〜29行目：
ループ処理を使って、WordPressで投稿した記事を読み込みます。
■17行目：
ループ処理の中で、the_title()を使って、記事タイトルを表示させます。
■21行目、23行目：
ループ処理の中で、get_the_date()、the_category( ‘, ‘ );を使って日付とカテゴリーを表示させます。
■26行目：
ループ処理の中で、the_content()を使って、記事の本文を表示させます。
1-2.トップページを作る
次は、記事のアイキャッチ画像や概要文を表示するトップページを作成しましょう。
以下コードの黄色でハイライトされている部分をindex.phpに追加しましょう。
index.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title><?php bloginfo( 'name' ); ?><?php wp_title(); ?></title> <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <!-- コンテンツ(記事、記事一覧) --> <!-- ■■■■■■ 記事ループ スタート ■■■■■■■ --> <?php if(have_posts()): while(have_posts()): the_post(); ?> <article <?php post_class(); ?>> <!-- 記事タイトル --> <?php if( is_single() ): ?> <h1><?php the_title(); ?></h1> <?php else: ?> <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> <?php endif; ?> <!-- 記事情報（日付、カテゴリ、コメント） --> <time datetime="<?php echo get_the_date( 'Y-m-d' ) ?>"> <?php echo get_the_date(); ?> </time> <?php the_category( ', ' ); ?> <!-- 記事本文 --> <?php if (is_single() ): ?> <?php the_content(); ?> <!-- 記事概略 --> <?php else: ?> <?php if( has_post_thumbnail() ): ?> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'large' ); ?></a> <?php endif; ?> <?php the_excerpt(); ?> <p class="more"><a href="<?php the_permalink(); ?>">続きを読む <i class="fa fa-chevron-right"></i></a></p> <?php endif; ?> <!-- ページナビ --> <?php if( is_single() ): ?> <?php previous_post_link( '%link', '%title' ); ?> <?php next_post_link( '%link', '%title' ); ?> <?php endif; ?> </article> <?php endwhile; endif; ?> <!-- ■■■■■■ 記事ループ エンド ■■■■■■■ --> <!-- 記事一覧ページリンク --> <?php if ( $wp_query->max_num_pages > 1): ?> <?php next_posts_link('古い記事 '); ?> <?php previous_posts_link('新しい記事 '); ?> <?php endif; ?> </body> </html> |
【コード解説】
■17行目、19行目、30行目、34行目、43行目：
is_single()を使って、記事の個別ページとトップページを切り分けています。else側のルートがトップページ用の処理になります。
■17行目、19行目、30行目、34行目、43行目：
is_single()を使って、記事の個別ページとトップページを切り分けています。else側のルートがトップページ用の処理になります。
■20行目、36行目、39行目：
aタグでthe_permalink()を指定し、クリックすると記事の個別ページへジャンプするようになります。
■36行目：
has_post_thumbnail()を使って、記事にアイキャッチ画像があるかどうかをチェックしています。アイキャッチ画像が設定されている場合は、the_post_thumbnail( ‘large’ )を使ってアイキャッチ画像を表示させています。
■43〜54行目：
記事の個別ページの場合は、previous_post_linkを使って前後の記事のリンクボタンを表示させています。
■60〜64行目：
ページ数が２ページ以上の場合は、前後のページのリンクボタンを表示させています。
次にfunctions.phpに以下コードを記載しましょう。
functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php // 概要（抜粋）の文字数 function my_length($length){ return 70; } add_filter('excerpt_mblength','my_length'); // 概要（抜粋）の省略記号 function my_more($more) { return '・・・'; } add_filter('excerpt_more','my_more'); // アイキャッチ画像 add_theme_support( 'post-thumbnails' ); |
【コード解説】
■17行目：
add_theme_support( ‘post-thumbnails’ );をfunctions.php内に記載することで、WordPressの記事投稿画面でアイキャッチ画像を設定できるようになります。
■17行目：
add_theme_support( ‘post-thumbnails’ );をfunctions.php内に記載することで、WordPressの記事投稿画面でアイキャッチ画像を設定できるようになります。
2.ヘッダーとフッターを作る
次にサイトにヘッダー部とフッター部を追加しましょう。
以下コードの黄色でハイライトされている部分をindex.phpに追加しましょう。
index.php ※ヘッダー部分
|
1 2 3 4 5 6 7 8 9 |
<body <?php body_class(); ?>> <!-- ヘッダー --> <header> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <p><?php bloginfo( 'description' ); ?></p> </header> <!-- コンテンツ(記事、記事一覧) --> <!-- ■■■■■■ 記事ループ スタート ■■■■■■■ --> <?php if(have_posts()): while(have_posts()): the_post(); ?> |
index.php ※フッターー部分
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- 記事一覧ページリンク --> <?php if ( $wp_query->max_num_pages > 1): ?> <?php next_posts_link('古い記事 '); ?> <?php previous_posts_link('新しい記事 '); ?> <?php endif; ?> <footer> <?php bloginfo( 'name' ); ?> <small>© 2017 original theme</small> </footer> <?php wp_footer(); ?> </body> </html> |
【コード解説】
■4行目、８行目：
bloginfo( ‘name’ )を使って、WordPress管理画面の「設定」→「一般」で設定された「サイトのタイトル」を表示させています。
■4行目、８行目：
bloginfo( ‘name’ )を使って、WordPress管理画面の「設定」→「一般」で設定された「サイトのタイトル」を表示させています。
■5行目：
bloginfo( ‘description’ )を使って、WordPress管理画面の「設定」→「一般」で設定された「キャッチフレーズ」を表示させています。
3.メニューを追加する
次に、WordPressから設定できるメニューやウィジェットを追加してみましょう。
以下コードの黄色でハイライトされている部分をindex.phpに追加しましょう。
index.php
|
1 2 3 4 5 6 7 8 |
<body <?php body_class(); ?>> <!-- ヘッダー --> <header> <h1><a href="<?php echo home_url(); ?>"><?php bloginfo( 'name' ); ?></a></h1> <p><?php bloginfo( 'description' ); ?></p> <nav><?php wp_nav_menu( 'theme_location=navigation' ); ?></nav> </header> <!-- コンテンツ(記事、記事一覧) --> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!-- 記事一覧ページリンク --> <?php if ( $wp_query->max_num_pages > 1): ?> <?php next_posts_link('古い記事 '); ?> <?php previous_posts_link('新しい記事 '); ?> <?php endif; ?> <!-- ウィジェット --> <?php dynamic_sidebar(); ?> <footer> <?php wp_nav_menu( 'theme_location=navigation' ); ?> <?php bloginfo( 'name' ); ?> <small>© 2017 original theme</small> </footer> <?php wp_footer(); ?> |
【コード解説】
■6行目、11行目：
wp_nav_menu( ‘theme_location=navigation’ )を使って、WordPress管理画面の「外観」→「メニュー」で設定したメニューを表示させています。
■6行目、11行目：
wp_nav_menu( ‘theme_location=navigation’ )を使って、WordPress管理画面の「外観」→「メニュー」で設定したメニューを表示させています。
■8行目：
php dynamic_sidebar()を使って、WordPress管理画面の「外観」→「ウィジェット」で設定したサイドバーを表示させています。
以下コードの黄色でハイライトされている部分をfunctions.phpに追加しましょう。
functions.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php // ウィジェット register_sidebar(); // カスタムメニュー register_nav_menu( 'navigation', 'ナビゲーション' ); // 概要（抜粋）の文字数 function my_length($length){ return 70; } add_filter('excerpt_mblength','my_length'); // 概要（抜粋）の省略記号 function my_more($more) { return '・・・'; } add_filter('excerpt_more','my_more'); // アイキャッチ画像 add_theme_support( 'post-thumbnails' ); |
【コード解説】
■4行目：
WordPress管理画面で「外観」→「ウィジェット」を表示させるための処理です。
■4行目：
WordPress管理画面で「外観」→「ウィジェット」を表示させるための処理です。
■7行目：
WordPress管理画面で「外観」→「メニュー」を表示させるための処理です。
ここまで出来たらブログサイトの基本構造（骨組み）は完成です。
あとは、CSSでデザインを整えます。
次ページで僕が設定したCSSを紹介します。
スポンサーリンク
関連記事(一部広告含む)
コメント
こちらのソースをまるっとコピーしたのですが、なぜかウィジェットが表示されません。。。
コメントありがとうございました。
こちらで再度ソースコードを確認したところ、WordPress4.9.6でウィジットは表示されました。
確認ですが、WordPress管理画面のメニューから「外観」→「ウィジェット」に入り、サイドバー１と表示されているエリアにウィジットを登録していますでしょうか？
WordPress管理画面からのウィジット登録方法については、ブログ内であまり説明していなかったので、もしかしたら登録されていない可能性があると思いました。
申し訳ありませんが、宜しくおねがいします。