themesフォルダ内に作成したいテーマフォルダを作成
style.cssを作成(必須)
/* Theme Name: BISTRO CALME Theme URI: http://example.com Description: BISTRO CALMEのテーマです。 Version: 1.0 Author: Nakashima Author URI: https://gihyo.jp */
index.phpを作成(必須)
index.htmlがあればindex.phpに拡張子を変更
画像とCSSファイルパスを修正
テンプレートタグ:get_template_directory_uri() 使用してテーマディレクトリのURIを変更する。 ※子テーマの時はget_stylesheet_directory_uri()を使用
//CSS <link href="<?php echo get_template_directory_uri(); ?>/assets/css/styles.min.css" rel="stylesheet"> //img <img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/logo@2x.png" alt="BISTRO CALME">
WEBサイトのタイトルを表示する
<title><?php bloginfo('name'); ?></title>
WP管理画面からテーマの変更
『外観』→『テーマ』から作成したテーマを選択し、有効にする。
テンプレート階層を考える
上記をよくみてテンプレート階層を考え作成していきます。
主なテンプレートファイル
front-page.php トップページ
single.php 投稿記事ページ
page.php 固定ページ
category.php カテゴリーページ
serch.php 検索結果ページを表示
archive.php 記事一覧を表示
404.php 404エラーページを表示
テンプレートを作り込む
トップページへのリンクを貼る
テンプレートタグ:home_url()を使用してTOPページのURLを返します。
<h1><a href="<?php echo home_url(); ?>"><img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/logo@2x.png" alt="BISTRO CALME"></a></h1>
テンプレートタグ:body_class()を使用してbodyタグのclass属性を表示
<body <?php body_class(); ?>>
テンプレートを分割
headerやfooter、sidebarなどは別ファイルにして管理し、インクルードタグで読み込みします。
<?php get_header(); ?> <?php get_footer(); ?>
最初に外部から不正アクセスされ処理を実行するのを防ぐセキュリティを設置(全てのファイルに設置)
各ファイルの冒頭に下記を記述
<?php if ( ! defined( 'ABSPATH' ) ) exit; ?>
header.phpならこんな感じ
<?php if ( ! defined( 'ABSPATH' ) ) exit; ?> <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta name="format-detection" content="telephone=no"> <!-- css --> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/shared/css/reset.css"> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/shared/css/common.css"> <?php wp_head(); ?> </head>
CSSに日付を入れるようにする
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/assets/css/style.css?<?php echo date('Ymd-Hi'); ?>" type="text/css">
head内にwp_head関数を記述する
wp_head関数を記述することを推奨されています。プラグインなどの機能が使えなくなることもあるので忘れずに記述します。
<?php wp_enqueue_style( 'font-awesome', 'https://use.fontawesome.com/releases/v5.6.1/css/all.css' ); wp_enqueue_script('jquery'); wp_enqueue_script('bistro-calme-main', get_template_directory_uri() . '/assets/js/main.js'); wp_head(); ?> </head>
footer.phpにもwp_footer関数を記述する
<?php wp_footer(); ?> </body> </html>
wp_body_open関数はbodyタグの直後に何かを挿入する際に使用する。使用するかわからない時は入れておきましょう。
<body <?php body_class(); ?>> <?php wp_body_open(); ?>
JS,外部CSSの読み込み
<?php wp_enqueue_style( 'font-awesome', 'https://use.fontawesome.com/releases/v5.6.1/css/all.css' ); wp_enqueue_script('jquery'); wp_enqueue_script('bistro-calme-main', get_template_directory_uri() . '/assets/js/main.js'); wp_head(); ?> </head>
ページ別に表示を変える(条件分岐)
トップページだけ表示を変えるis_homeタグ
<?php if ( is_home() ): ?> <div class="jumbotron"> <div class="jumbotron_item" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/img/home/jumbotron-1@2x.jpg')"></div> </div> <?php endif; ?> <?php if ( is_home() ){ wp_enqueue_script('bistro-calme-home', get_template_directory_uri() . '/assets/js/home.js'); } ?>
その他のページの条件分岐タグ
- is_single('IDやスラッグ'):記事ページかを判定
- is_page('IDやスラッグ'):固定ページかを判定
- is_category('IDやスラッグ'):カテゴリーページかを判定
ページタイトルの表示を有効にする
functions.phpを作成
add_theme_support関数を記述(パラメータに機能を書く)
<?php /** * <title>タグを出力する */ add_theme_support( 'title-tag' );
headerのtitleタグを削除 → これをやらないと各ページのタイトルが表示されないので忘れずに削除する
add_fileter関数でタイトルの区切り文字を変更
/** * タイトルタグの区切り文字をエン・ダッシュから縦線に変更する */ add_filter('document_title_separator', 'my_document_title_separator'); function my_document_title_separator($separator){ $separator = '|'; return $separator; }
add_fileter関数でtopページだけタイトルに説明文が入るようにする
/** * タイトルタグのテキストを変更する */ add_filter('document_title_parts', 'my_document_title_parts'); function my_document_title_parts($title){ if (is_home()) { unset($title['tagline']); // タグラインを削除 $title['title'] = 'BISTRO CALMEは、カジュアルなワインバーよりなビストロです。'; //テキストを変更 } return $title; }
ループ作成
TOPページに新着情報を表示
<?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class('news'); ?>> <div class="news_pic"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail('medium'); ?> <?php else: ?> <img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/noimage_600x400.png" alt=""> <?php endif; ?> </a> </div> <div class="news_meta"> <?php the_category(); ?> <time class="news_time" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年m月d日'); ?></time> </div> <h2 class="news_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="news_desc"> <?php the_excerpt(); ?> <p><a href="<?php the_permalink(); ?>">[続きを読む]</a></p> </div> </article> <?php endwhile; ?> <?php endif; ?>
WP関数
- have_post():現在のWPクエリにループできる記事があるかチェック
the_post():ループ中の投稿情報をグローバル変数$postにロードする テンプレートタグ
the_title():タイトル取得
- the_ID():現在のIDを表示
- post_class('クラス名'):投稿に応じたクラス属性
- the_category():カテゴリーulとliで表示
アイキャッチ画像を使用する
アイキャッチ画像を使用可能にする
functions.phpに下記を記述
/** * アイキャッチ画像を使用可能にする */ add_theme_support( 'post-thumbnails' );
記事のアイキャッチ画像を表示する
表示させたい箇所に下記を記述
<?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail('medium'); ?> <?php else: ?> <img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/noimage_600x400.png" alt=""> <?php endif; ?>
サイズ指定
- thumbnail:サムネイル
- medium: 中サイズ
- large:大サイズ
- full:フルサイズ(アップロードした画像の元サイズ)
- array(100,150):他のサイズ指定
投稿記事ページを作成
single.phpを作成
投稿記事ページの場合、表示している記事を1回だけループするというメインクエリが用意されている
<div class="col-12 col-md-9"> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <article id="post-<?php the_ID(); ?>" <?php post_class('article'); ?>> <header class="article_header"> <h2 class="article_title"><?php the_title(); ?></h2> <div class="article_meta"> <?php the_category(); ?> <time datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年m月d日'); ?></time> </div> </header> <div class="article_body"> <div class="content"> <?php the_content(); ?> </div> </div> <div class="postLinks"> <div class="postLink postLink-prev"><?php previous_post_link('<i class="fas fa-chevron-left"></i>%link'); ?></div> <div class="postLink postLink-next"><?php next_post_link('%link<i class="fas fa-chevron-right"></i>'); ?></div> </div> </article> <?php endwhile; ?> <?php endif; ?> </div>
カテゴリー一覧とアーカイブ一覧を作成
1.サイドバーにカテゴリー一覧とアーカイブ一覧へリンクを作成
<div class="col-12 col-md-3"> <?php get_sidebar('categories'); ?> <?php get_sidebar('archives'); ?> </div>
- get_sidebar('categories');でsidebar-categories.phpを読み込む
- get_sidebar('archives');でsidebar-archives.phpを読みこむ
2.カテゴリーと月間アーカイブへリンクするテンプレートを作成(sidebar-categories.php、sidebar-archives.php)
- テンプレートタグ wp_list_categories( $args ):カテゴリーページへのリンク一覧を表示する
- テンプレートタグ wp_get_archives( $args );:アーカイブページへのリンク一覧を表示する
//カテゴリー一覧へのリスト表示 <aside class="archive"> <h2 class="archive_title">カテゴリ 一覧</h2> <ul class="archive_list"> <?php $args = array( 'title_li' => '', //見出しを削除 ); wp_list_categories( $args ); ?> </ul> </aside>
<aside class="archive"> <h2 class="archive_title">月別アーカイブ</h2> <ul class="archive_list"> <?php $args = array( 'type' => 'monthly', //月別を指定 ); wp_get_archives( $args ); ?> </ul> </aside>
記事の一覧ページを作成
category.phpやarchive.phpを使っても良いですが、カテゴリー一覧と月間アーカイブを同じにしたい場合はindex.phpで作成しても良いでしょう。
日付別表示のテンプレート階層(優先順位) 1.date.php 2.archive.php 3.index.php
カテゴリー表示のテンプレート階層(優先順位) 1.category-{slug}.php 2.category-{id}.php 3.category.php 4.archive.php 5..index.php
WPテンプレートパーツを作成
template-partsフォルダ内にloop-news.phpを作成
<article id="post-<?php the_ID(); ?>" <?php post_class('news'); ?>> <div class="news_pic"> <a href="<?php the_permalink(); ?>"> <?php if ( has_post_thumbnail() ): ?> <?php the_post_thumbnail('medium'); ?> <?php else: ?> <img src="<?php echo get_template_directory_uri(); ?>/assets/img/common/noimage_600x400.png" alt=""> <?php endif; ?> </a> </div> <div class="news_meta"> <?php the_category(); ?> <time class="news_time" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y年m月d日'); ?></time> </div> <h2 class="news_title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="news_desc"> <?php the_excerpt(); ?> <p><a href="<?php the_permalink(); ?>">[続きを読む]</a></p> </div> </article>
パーツを読み込み
get_template_part('template-parts/loop', 'news');
<div class="col-12 col-md-9"> <?php if ( is_month() ): ?> <h2 class="main_title"><?php the_time('Y年m月'); ?></h2> <?php else: ?> <h2 class="main_title"><?php wp_title(''); ?></h2> <?php endif; ?> <div class="row"> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <div class="col-md-4"> <?php get_template_part('template-parts/loop', 'news'); ?> </div> <?php endwhile; ?> <?php endif; ?> </div> </div>
固定ページ作成page.php
<?php if ( ! defined( 'ABSPATH' ) ) exit; ?> <?php get_header(); ?> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <h2 class="pageTitle"><?php the_title(); ?><span><?php echo strtoupper($post->post_name); ?></h2> <div class="content"> <?php the_content(); ?> </div> <?php endwhile; ?> <?php endif; ?> <?php get_footer(); ?>
naviを作成
WP メガメニューMax Mega Menu - acots’s blog
functions.php
/** * カスタムメニュー機能を使用可能にする */ add_theme_support( 'menus' );
<nav class="gnav"> <?php $args = array( 'menu' => 'global-navigation', // 管理画面で作成したメニューの名前 'menu_class' => '', // メニューを構成するulタグのクラス名 'container' => false, // <ul>タグを囲んでいる<div>タグを削除 ); wp_nav_menu($args); ?> </nav>
リンク
get_permalink(記事ID)を使用する方法
<a href="<?php echo get_permalink(50); ?>">ABOUT</a>
home_url()を使用する方法
<a href="<?php echo home_url('/contact/'); ?>">メールフォーム</a>
get_term_by(スラッグ,スラッグ名,タクソノミー名)でターム情報を取得、 get_term_link(タームIDかオブジェクト,タクソノミー名)でタームページリンクを取得する方法
<?php $news = get_term_by('slug', 'news', 'category'); $news_link = get_term_link($news, 'category'); ?> <a href="<?php echo $news_link; ?>">最新情報の一覧</a>
サイト内検索
serchform.phpを作成
<form action="<?php echo home_url('/'); ?>" method="get" class="header_search"> <input type="text" name="s" value="<?php the_search_query(); ?>" placeholder="キーワードを入力"> <i class="fas fa-search"></i> </form>
読み込む
<?php get_search_form(); ?>
search.phpを作成(結果表示ページ)
<?php get_header(); ?> <h2 class="pageTitle">サイト内検索<span>SEARCH</span></h2> <main class="main"> <div class="container"> <h2 class="main_title">「<?php the_search_query(); ?>」の検索結果</h2> <div class="row"> <?php if ( have_posts() ) : ?> <?php while ( have_posts() ) : the_post(); ?> <div class="col-md-4"> <?php get_template_part('template-parts/loop', 'news'); ?> </div> <?php endwhile; ?> <?php else: ?> <div class="col-12 text-center"> <p>検索結果はありませんでした</p> </div> <?php endif; ?> </div> </div> </main> <?php get_footer(); ?>
404.phpを作成
<?php get_header(); ?> <h2 class="pageTitle">404 NOT FOUND<span>ERROR</span></h2> <div class="main"> <div class="container"> <p>お探しのページが見つかりませんでした。</p> <p>申し訳ございませんが、<a href="<?php echo home_url('/'); ?>">こちらのリンク</a>からトップページにお戻りください。</p> </div> </div> <?php get_footer(); ?>
WP Multibyte Patchで日本語環境を正しく動作させる
プラグインでインストールします。
パンクズリストを作成①
1.Yoast SEO プラグインをインストール 2.設定 → 高度な設定 →パンクズ 3.挿入したい箇所に下記のコード
<?php if(function_exists( 'yoast_breadcrumb' )){ yoast_breadcrumb( '<p id="breadcrumbs">', '</p>'); } ?>
パンくずリストを作成②
- Breadcrumb NavXT プラグインをインストール
- Breadcrumb NavXT を設定(WPダッシュボード -> 設定 )
- パンくずリストを表示 ・テンプレートファイルを作成(例:template-parts/breadcrumb.php) bcn_display関数:パンくずリストを表示 function_exists( 'bcn_display' ):指定した関数が定義されているかチェック
template-parts/breadcrumb.php
<div class="breadcrumb"> <div class="breadcrumb_inner"> <?php if ( function_exists( 'bcn_display' ) ) { bcn_display(); } ?> </div> </div>
メールフォームを作成
1.MW WP Formをインストール 2.フォームをテキストエディタで作成&MW WP Formに上記を貼り付け&各項目のフォームタグを置き換え
------MW WP Form 入力欄------ <div class="form"> <div class="form_row"> <label class="form_label" for="fullname">お名前<span>必須</span></label> <div class="form_content"> [mwform_text name="fullname" id="fullname"] </div> </div> <div class="form_row"> <label class="form_label" for="email">メールアドレス<span>必須</span></label> <div class="form_content"> [mwform_email name="email" id="email"] </div> </div> <div class="form_row"> <label class="form_label" for="message">メッセージ</label> <div class="form_content"> [mwform_textarea name="message" id="message"] </div> </div> <div class="form_row form_row-center"> [mwform_submitButton name="send" class="btn btn-send" confirm_value="確認画面へ" submit_value="送信する"] </div> <div class="form_row form_row-center"> [mwform_backButton class="btn btn-back" value="戻る"] </div> </div>
3.バリデーションルールを追加 4.完了画面を作成 5.自動返信メールを作成
------自動返信メール設定------ -件名- お問い合わせありがとうございました。 -送信者- BISTRO CALME -Reply-to(メールアドレス)- info@example.com ※任意に変更してください。 -本文- お問い合わせありがとうございました。次の内容で承りました。 後日、ご連絡させていただきます。 ■送信内容 お名前 : {fullname} メールアドレス : {email} メッセージ : {message} -自動返信メール- email
6.管理者宛メール設定
------管理者宛メール設定------ -送信先(E-mailアドレス)- info@example.com ※任意に変更してください。 -件名- お問い合わせがありました。 -送信者- BISTRO CALME -Reply-to(メールアドレス)- info@example.com -本文- お問い合わせが、次の内容でありました。 ■送信内容 お名前 : {fullname} メールアドレス : {email} メッセージ : {message}
7.ショートコードを固定ページのお問合せページとお問合せ完了ページに貼り付け
8.自動整形機能を停止する WPは自動整形の機能が働いていますが、フォームようなHTMLタグのみで構成したページでは不要なpタグなどが入ることがあります。
自動整形を止めるにはremove_filter()関数を使います。
remove_filter():フィルターフックに付加されている関数を除去する
if(is_page('contact')){ remove_filter('the_content', 'wpautop'); }
カスタム投稿はこちら acots.hatenablog.com
現在のテンプレート確認するプラグイン
Show Current Template – WordPress プラグイン | WordPress.org 日本語
ページTOPへ戻るボタン
セキュリティを向上させる SiteGuard WP
ログインページのURLが変更されるので、変更したくない場合はログインページ変更をOFFにする
XMLサイトマップを自動生成する Yoast SEO
データベースをバックアップする WP-DBManager
画像を自動圧縮 EWWW Image Optimizer
###リンク切れチェック Broken Link Checker