たくさんの方に見ていただき、ありがとうございます!。
少しづつ、ブラッシュアップして、使いやすく・見やすくしますので、
今後とも、よろしくお願いいいたします!
とはいいつつも、どのような順番で、どのような内容で書いていけばよいか迷走中です。
常に最新が変化するため、完成はしないと思います。
現状の方向性としましては、この記事一つで、オリジナルテーマが完成するところまでを目指しております!
<目次>
今すぐに使える、テンプレートファイル集(フリーダウンロード)
ベースとなるテンプレートファイル一式が入っております。
必要最低限のコードを書いたファイルもダウンロードできるように進めております。
お楽しみにしてください。
条件分岐タグ
is_home() is_front_page() is_single() is_page() is_category()
style.css
@charset "utf-8";
/* @charset "UTF-8"; ← 大文字でも可 */
/*
Theme Name: 〇〇(必須)
*/
functions.php
<?php // 閉じタグは書かないこと!!
/**************************************************
CSS/JSファイルの読み込み
**************************************************/
function theme_name_scripts() {
/* CSSファイルの読み込み */
wp_enqueue_style('style', get_stylesheet_uri(), array(), '1.0.0');
/* JSファイルの読み込み */
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js', array(), '3.6.0', true);
wp_enqueue_script('script', get_theme_file_uri('js/script.js'), array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'theme_name_scripts');
/**************************************************
投稿サムネイル有効化
**************************************************/
function custom_theme_setup() {
add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'custom_theme_setup');
/**************************************************
固定ページで「抜粋」を有効化
**************************************************/
function my_custom_init() {
add_post_type_support('page', 'excerpt');
}
add_action('init', 'my_custom_init');
/**************************************************
editor-style.css
**************************************************/
function add_gutenberg_editor_style() {
wp_enqueue_style('block-editor-style', get_theme_file_uri('editor-style.css'), array(), '1.0.0');
}
add_action('enqueue_block_editor_assets', 'add_gutenberg_editor_style');
/**************************************************
Classic Editor
**************************************************/
add_filter('use_block_editor_for_post', '__return_false');
/**************************************************
Classic Widgets
**************************************************/
add_filter('use_widgets_block_editor', '__return_false');
/**************************************************
管理画面 メディアの位置を変更
**************************************************/
function custom_menus() {
global $menu;
$menu[19] = $menu[10];
unset($menu[10]);
}
add_action('admin_menu', 'custom_menus');
/**************************************************
ナビゲーションメニュー(カスタムメニュー)
**************************************************/
function register_my_menus() {
register_nav_menus(
array(
'global_nav' => 'グローバルナビ(ヘッダー領域下に表示)',
'footer_nav' => 'フッターナビ(フッター領域に表示)',
)
);
}
add_action('after_setup_theme', 'register_my_menus');
/**************************************************
ナビゲーションメニュー(カスタムメニュー)の<li>タグに、クラスを付与
**************************************************/
function add_additional_class_on_li($classes, $item, $args) {
if(isset($args->add_li_class)) {
$classes[] = $args->add_li_class;
}
return $classes;
}
add_filter('nav_menu_css_class', 'add_additional_class_on_li', 1, 3);
/**************************************************
カスタム投稿タイプ/カスタムタクソノミー
**************************************************/
function custom_post_type() {
register_post_type( 'news',
array(
'label' => '新着情報',
'labels' => array(
'name' => '新着情報',
'singular_name' => '新着情報',
'menu_name' => '新着情報',
'name_admin_bar' => '新着情報',
'all_items' => '新着情報一覧',
'add_new' => '新規追加',
'add_new_item' => '新規新着情報を追加',
'edit_item' => '新着情報を編集',
// 'new_item' => '',
'view_item' => '新着情報を表示',
'search_items' => '新着情報を検索',
'not_found' => '新着情報が見つかりませんでした',
'not_found_in_trash' => 'ゴミ箱内に新着情報が見つかりませんでした',
'parent_item_colon' => ''
),
// 'description' => '投稿タイプの簡潔な説明',
'public' => true,
// 'exclude_from_search' => true,
'menu_position' => 5,
'show_in_rest' => true,
'menu_icon' => null,
'supports' => array(
'title',
'editor',
'author',
'thumbnail',
'excerpt',
'trackbacks',
'custom-fields',
'comments',
'revisions',
'page-attributes',
'post-formats'
),
'taxonomies' => array(
'cat_news',
// 'category',
// 'post_tag'
),
'has_archive' => true
)
);
register_taxonomy( 'cat_news', 'news',
array(
// 'label' => 'カテゴリー',
// 'labels' => array(
// ),
'show_admin_column' => true,
// 'description' => 'タクソノミーの説明',
'hierarchical' => true,
'show_in_rest' => true
)
);
}
add_action('init', 'custom_post_type');
/**************************************************
カスタム投稿タイプ ターム別 絞り込み機能
**************************************************/
function add_custom_taxonomies_term_filter() {
global $post_type;
if ($post_type == 'news') {
$taxonomy = 'cat_news';
wp_dropdown_categories(
array(
'show_option_all' => 'カテゴリー一覧',
'orderby' => 'name',
// 'show_count' => 1,
'hide_empty' => 0,
'selected' => get_query_var($taxonomy),
'hierarchical' => true,
'name' => $taxonomy,
'taxonomy' => $taxonomy,
'hide_if_empty' => 1,
'value_field' => 'slug'
)
);
}
}
add_action('restrict_manage_posts', 'add_custom_taxonomies_term_filter');
/**************************************************
MW WP Form <p>タグ・<br>タグ削除
**************************************************/
function mvwpform_autop_filter() {
if (class_exists('MW_WP_Form_Admin')) {
$mw_wp_form_admin = new MW_WP_Form_Admin();
$forms = $mw_wp_form_admin->get_forms();
foreach ($forms as $form) {
add_filter('mwform_content_wpautop_mw-wp-form-' . $form->ID, '__return_false');
}
}
}
mvwpform_autop_filter();
header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<!--
LIG提供 Viewport Extra(https://liginc.co.jp/451892)
最小幅(例: 375px)以下は、縮小表示
不要の場合は、下から2行を削除
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- min-width=〇〇 で、最小幅を設定(375px = iPhone SE(第2・3世代) = 日本でディスプレイサイズのシェア率1位) -->
<meta name="viewport-extra" content="min-width=375">
<script async src="https://cdn.jsdelivr.net/npm/viewport-extra@2.0.1/dist/iife/viewport-extra.min.js"></script>
<!-- All in One SEO を導入時は、下2行を削除 -->
<title><?php echo bloginfo('name'); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>">
<!-- 電話番号やメールアドレスをブラウザ側が勝手にリンクに設定してしまうことを防止 -->
<meta name="format-detection" content="telephone=no, address=no, email=no">
<!-- アップルタッチアイコン -->
<link rel="apple-touch-icon" href="<?php echo esc_url(get_theme_file_uri('img/apple-touch-icon.png')); ?>">
<!-- ファビコン -->
<link rel="shortcut icon" href="<?php echo esc_url(get_theme_file_uri('img/favicon.ico')); ?>">
<!-- 管理画面 ツールバー 画面下部に移動 -->
<?php if(is_user_logged_in()): ?>
<style type="text/css">
html {
margin: 0 0 32px!important;
}
#wpadminbar {
top: auto;
bottom: 0;
}
@media screen and (max-width: 782px) {
html {
margin: 0 0 46px!important;
}
}
@media screen and (max-width: 600px) {
#wpadminbar {
position: fixed;
}
}
</style>
<?php endif; ?>
<?php wp_head(); ?>
</head>
<!-- 表示されているページの種類によって【 class 】を付与 = ページごとのデザイン変更に便利 -->
<body <?php body_class(''); ?>>
<header class="header">
<div class="inner">
<!-- <h1>タグを動的に変更(三項演算子ver) -->
<!-- トップページの場合は、<h1>タグ、それ以外は<div>タグに変更 -->
<?php $tag = (is_home() || is_front_page()) ? 'h1' : 'div'; ?>
<<?php echo $tag; ?> class="header-logo">
<a href="<?php echo esc_url(home_url()); ?>">
<img src="<?php echo esc_url(get_theme_file_uri('images/logo.svg')); ?>" alt="">
</a>
</<?php echo $tag; ?>>
<nav class="nav">
<ul class="nav__list">
<li class="nav__item">
<a href="<?php echo esc_url(home_url()); ?>">ホーム</a>
</li>
</ul>
</nav>
</header>
メインループ
<!-- メインループ -->
<?php if(have_posts()): ?>
<?php while(have_posts()): the_post(); ?>
<!-- 繰り返し処理する内容 -->
<?php endwhile; ?>
<?php else: ?>
<!-- 投稿データがない場合に表示される部分 -->
<?php endif; ?>
<!-- メインループ -->
<?php if(have_posts()): ?>
<div class="cards">
<?php while(have_posts()): the_post(); ?>
<!-- 繰り返し処理する内容 -->
<article class="card">
<a class="card__link" href="<?php the_permalink(); ?>">
<div class="card__img">
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail('full'); ?>
<?php else: ?>
<img src="<?php echo esc_url(get_theme_file_uri('img/no-image.png')); ?>" alt="">
<?php endif; ?>
</div>
<time class="card__time" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
<h2 class="card__title"><?php the_title(); ?></h2>
<div class="card__content"><?php the_content(); ?></div>
</a>
</article>
<?php endwhile; ?>
</div>
<?php else: ?>
<!-- 投稿データがない場合に表示される部分 -->
<p>投稿が見つかりませんでした。</p>
<?php endif; ?>
サブループ
<!-- サブループ -->
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => -1,
);
$the_query = new WP_Query($args);
?>
<?php if($the_query->have_posts()): ?>
<?php while($the_query->have_posts()): $the_query->the_post(); ?>
<!-- 繰り返し処理する内容 -->
<?php endwhile; ?>
<?php else: ?>
<!-- 投稿データがない場合に表示される部分 -->
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<!-- サブループ -->
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => -1,
// 'order' => 'ASC',
// 'orderby' => 'meta_value',
// 'meta_key' => 'furigana'
);
$the_query = new WP_Query($args);
?>
<?php if($the_query->have_posts()): ?>
<div class="cards">
<?php while($the_query->have_posts()): $the_query->the_post(); ?>
<!-- 繰り返し処理する内容 -->
<article class="card">
<a class="card__link" href="<?php the_permalink(); ?>">
<div class="card__img">
<?php if(has_post_thumbnail()): ?>
<?php the_post_thumbnail('full'); ?>
<?php else: ?>
<img src="<?php echo esc_url(get_theme_file_uri('img/no-image.png')); ?>" alt="">
<?php endif; ?>
</div>
<time class="card__time" datetime="<?php the_time('Y-m-d'); ?>"><?php the_time('Y.m.d'); ?></time>
<h2 class="card__title"><?php the_title(); ?></h2>
<div class="card__content"><?php the_content(); ?></div>
</a>
</article>
<?php endwhile; ?>
</div>
<?php else: ?>
<!-- 投稿データがない場合に表示される部分 -->
<p>投稿が見つかりませんでした。</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
追加(*とりあえず、別の箇所にまとめていたコードを貼り付けています。)
<?php
$cat = get_the_category(); //現在のカテゴリーを取得
$catname = $cat[0]->cat_name; //カテゴリー名を取得
$catslug = $cat[0]->cat_slug; //カテゴリースラッグを取得
?>
<!-- カテゴリー名を出力 -->
<?php echo $catname; ?>
<!-- カテゴリースタッグを出力-- >
<?php echo $catslug; ?>
<!-- カテゴリー別(ターム別)に記事一覧を表示 -->
<?php
$terms = get_terms(''); //タクソノミースラッグ(category / news-category)
foreach ($terms as $term):
$args = array(
'term' => $term->slug,
'post_type' => '', //投稿タイプ(post / news)
'taxonomy' => '', //タクソノミースラッグ(category / news-category)
'order' => '', //ASC(昇順) / DESC(降順 デフォルト)
'posts_per_page' => -1
);
$the_query = new WP_Query( $args );
?>
<?php echo esc_html( $term->name ); ?>
<?php if($the_query->have_posts()): ?>
<?php while($the_query->have_posts()): $the_query->the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php endforeach; ?>
<!-- 画面幅で切り替え(jQuery) -->
if (window.matchMedia("(max-width: 767px)").matches) {
}
/**************************************************
archive.phpにパンくずリストを追加
**************************************************/
<?php
function my_static_breadcrumb_adder( $breadcrumb_trail ) {
if ( get_post_type() === 'post' ) {
if ( is_post_type_archive( 'post' )) {
$item = new bcn_breadcrumb( '〇〇', null, array('post'));
} else {
$item = new bcn_breadcrumb( '〇〇', null, array('post'), home_url('information/'), null, true);
}
$stuck = array_pop( $breadcrumb_trail->breadcrumbs ); // HOME 一時退避
$breadcrumb_trail->breadcrumbs[] = $item; //〇〇 追加
$breadcrumb_trail->breadcrumbs[] = $stuck; //HOME 戻す
}
}
add_action('bcn_after_fill', 'my_static_breadcrumb_adder');
<! --投稿の前後のリンクを表示-- >
<ul class="post-link">
<li><?php previous_post_link('%link', '< 前の記事へ'); ?></li>
<li><?php next_post_link('%link', '次の記事へ >'); ?></li>
</ul>
<!-- Breadcrumb NavXT パンくずリスト -->
<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
<?php if(function_exists('bcn_display'))
{
bcn_display();
}?>
</div>
<!-- scf -->
<!-- テキストを出力 -->
<?php $myfield = scf::get('名前'); echo $myfield; ?>
<?php $text = scf::get('名前'); echo $text; ?>
<!-- テキストエリアを改行有りで出力 -->
<?php $myfield = scf::get('名前'); echo nl2br( $myfield ); ?>
<?php $textarea = scf::get('名前'); echo nl2br( $textarea ); ?>
<!– ショートコード呼び出し –>
<?php echo do_shortcode(”); ?>
<!– 画像 –>
<img src=”<?php echo esc_url(get_theme_file_uri(‘img/’)); ?>” alt=””>
<?php if(has_post_thumbnail()): ?><!– アイキャッチがある時 –>
<?php the_post_thumbnail('full'); ?>
<?php else: ?><!– アイキャッチがない時 –>
<img src=”<?php echo esc_url(get_theme_file_uri(‘img/’)); ?>” alt=””>
<?php endif; ?>
<!– bodyにclass名 追加 –>
<body <?php body_class(”); ?>>
<!– H1タグを動的に変更 三項演算子 –>
<?php $tag = (is_home() || is_front_page()) ? ‘h1’ : ‘div’; ?>
<<?php echo $tag; ?> class=””>
<a class=”” href=”<?php echo esc_url(home_url()); ?>”>
<img src=”<?php echo esc_url(get_theme_file_uri(‘img/’)); ?>” alt=””>
</a>
</<?php echo $tag; ?>>
<!– Advanced Custom Fields 出力 条件分岐 –> <?php if( get_field(”) ):?> <?php the_field(”); ?> <?php endif; ?>
<!– 301リダイレクト 404.php –>
<?php
wp_safe_redirect(home_url(), 301);
exit;
?>
//カスタムフィールド Advanced Custom Fields
//データ移行 All-in-One WP Migration
//SEO対策 All in One SEO
//バックアップ BackWPup
//パンくずリスト Breadcrumb NavXT
//お問い合わせ MW WP Form / Contact Form 7
//カスタム投稿タイプ Custom Post Type UI
//記事複製 Yoast Duplicate Post
<IfModule mod_rewrite.c>
RewriteEngine On
# indexなしに統一
RewriteCond %{THE_REQUEST} ^.*/index.(html|htm|php)
RewriteRule ^(.*)index.(html|htm|php)$ https://%{HTTP_HOST}/$1
[R=301,L]
# wwwありに統一
RewriteCond %{HTTP_HOST} !^www\.(.*) [NC]
RewriteRule ^ https://www.%{HTTP_HOST}/$1 [R=301,L]
# httpsに統一
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
<IfModule mod_rewrite.c>
RewriteEngine On
# indexなしに統一
RewriteCond %{THE_REQUEST} ^.*/index.(html|htm|php)
RewriteRule ^(.*)index.(html|htm|php)$ https://%{HTTP_HOST}/$1 [R=301,L]
# wwwなしに統一
RewriteCond %{HTTP_HOST} ^www\.(.*) [NC]
RewriteRule ^ https://%1%{REQUEST_URI} [R=301,L]
# httpsに統一
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
</IfModule>
<!-- table内での空タグ -->
<td> </td>
-webkit-transition: .4s;
transition: .4s;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: -webkit-gradient(linear, left top, right top, from(#e4f2d8), to(#fefdfb));
background: linear-gradient(to right, #e4f2d8 0%, #fefdfb 100%);
body {
animation: fadeIn .8s ease-in 0s 1 normal;
}
/* ふんわり ページ遷移 */
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
// table 右側だけはみ出させる方法
width: calc(100% + (右側のpadding)px);
/* slick画像 ロード時 崩れ防止 */
.〇〇 {
display: none;
}
.〇〇.slick-initialized {
display: block;
}
.〇〇 {
opacity: 0;
}
.〇〇.slick-initialized {
opacity: 1;
}
/* slickの下にできる謎の余白 */
.〇〇 {
font-size: 0;
}
.〇〇 {
line-height: 0;
}
<?php
/*
Template Name: 固定ページの名前
*/
?>
<!-- CPT UI ラベル名表示 -->
<?php echo esc_html(get_post_type_object(get_post_type())->label); ?>
<!-- CPT UI スラッグ表示 -->
<?php echo esc_html(get_post_type_object(get_post_type())->name); ?>
<!--ループ内で使用-->
<?php the_title(); ?>
<?php the_content(); ?>
<?php the_permalink(); ?>
<?php echo wp_trim_words(get_the_content(), 55, '…'); ?>
<?php the_time('Y/m/d'); ?> //2018.05.14
<?php the_time('Y年n月j日(l)'); ?> //2018年5月14日(月曜日)
<?php the_time('Y.n.j'); ?> //2018.5.14
<?php the_time('y.n.j'); ?> //18.5.14
<!-- SNS シェアボタン -->
<ul>
<!-- Twitter -->
<li>
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-lang="ja" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</li>
<!-- Facebook -->
<li>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=150&layout=button&action=like&size=small&share=true&height=65&appId" width="150" height="65" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
</li>
</ul>
<!-- カテゴリーを一覧表示 -->
<!-- パラメーターの説明 -->
<!-- title_li= = 「カテゴリー」のタイトルを変更 -->
<!-- show_count= = 各カテゴリ名の後ろに投稿数を表示 -->
<!-- depth= = カテゴリ階層のどのレベル(深さ)までをカテゴリ一覧に出力するかを指定 -->
<?php wp_list_categories('title_li=&show_count=1&depth=1'); ?>
<!-- カテゴリーを取得 -->
<?php
$cat = get_the_category(); // カテゴリーを取得
$cat_name = $cat[0]->cat_name; // カテゴリー名
$cat_slug = $cat[0]->category_nicename; // カテゴリーのスラッグ
?>
<!-- カテゴリーをリンク有りで出力 -->
<?php the_category( ); ?>
<!-- 出力結果 -->
<ul class="post-categories">
<li>
<a href="https://〇〇.com/category/カテゴリー名/" rel="category tag">カテゴリー</a>
</li>
<li>
<a href="https://〇〇.com/category/カテゴリー名/" rel="category tag">...</a>
</li>
</ul>
<!-- カテゴリーをリンクなしで出力 -->
<?php $cat = get_the_category(); ?>
<?php $cat = $cat[0]; ?>
<?php echo $cat->cat_name; ?>
<!-- カテゴリーをリンクなしで出力 (短縮ver) -->
<?php $cat = get_the_category(); $cat = $cat[0]; { echo $cat->cat_name; } ?>
<!-- カテゴリをリンクなしで複数出力(li形式) -->
<ul class="post-categories"> <!-- 任意のクラス名 -->
<?php
$categoty = get_the_category();
$i = 0;
foreach ($categoty as $cat) {
$i++;
echo '<li>'.$cat -> cat_name.'</li>';
}
?>
</ul>
<!-- 現在のカテゴリーを取得 -->
<?php
$cat = get_queried_object();
$cat_name = $cat->name; // カテゴリーの名前
$cat_nicename = $cat->nicename; // カテゴリーのスラッグ
$cat_ID = $cat->ID; // カテゴリーのID
?>
<!--カテゴリー名を出力-->
<?php echo $cat_name; ?>
<!--カテゴリーのスラッグを出力-->
<?php echo $cat_nicename ?>
<!--カテゴリーのIDを出力-->
<?php echo $cat_ID ?>
<!-- 月別アーカイブ一覧 -->
<!-- パラメーターの説明 -->
<!-- show_post_count= = 投稿数を表示 -->
<ul>
<?php wp_get_archives('show_post_count=1'); ?>
</ul>
<!-- 出力結果 -->
<ul>
<li>
<a href="https://〇〇.com/2022/01/">2021年1月</a>
</li>
</ul>
<?php
/**************************************************
管理画面のメニューを非表示
(特定ユーザー以外の、管理画面のメニューを非表示)
管理者 : administrator
編集者 : editor
投稿者 : author
寄稿者 : contributor
購読者 : subscriber
**************************************************/
function remove_menus() {
if (current_user_can('author')) {
remove_menu_page('index.php'); // ダッシュボード
remove_menu_page('edit.php'); // 投稿メニュー
remove_menu_page('upload.php'); // メディア
remove_menu_page('edit.php?post_type=page'); // 固定ページ
remove_menu_page('edit.php?post_type=acf'); // Advanced Custom Field(プラグイン)
remove_menu_page('edit-comments.php'); // コメントメニュー
remove_menu_page('themes.php'); // 外観メニュー
remove_menu_page('plugins.php'); // プラグインメニュー
remove_menu_page('users.php'); // ユーザーメニュー
remove_menu_page('tools.php'); // ツールメニュー
remove_menu_page('options-general.php'); // 設定メニュー
}
}
add_action('admin_menu', 'remove_menus');
/* 2行目以降を1文字下げる */
.〇〇 {
/* 左側に1文字分の余白を作る */
padding-left: 1em;
/* 最初の行だけその余白分のスペースに文字を移動させる */
text-indent: -1em;
}