Show Current Template
プラグインを有効化
テーマ構成ファイル、フォルダを作成
index.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<?php wp_head(); ?>
</head>
<body>
<?php wp_footer(); ?>
</body>
</html>
→管理ツールバーが表示されます。
style.css
/*
* Theme Name: xx
*/functions.php
各ファイルの読み込み
- リセットCSS
- slick用CSS
- style.css
- css/style.css
- jQuery
- slick用JS
- js/script.js
<?php
/**************************************************
CSSファイルの読み込み
**************************************************/
function my_enqueue_styles() {
// リセットCSS
wp_enqueue_style('ress', '//cdn.jsdelivr.net/npm/destyle.css@4.0.0/destyle.min.css', array(), false, 'all');
// slick
wp_enqueue_style('slick-theme', '//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css', array('ress'), false, 'all');
wp_enqueue_style('slick', '//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css', array('ress'), false, 'all');
// style.css
wp_enqueue_style('style', get_stylesheet_uri(), array('ress'), false, 'all');
wp_enqueue_style('main-style', get_theme_file_uri('css/style.css'), array('ress'), false, 'all');
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');
/**************************************************
JSファイルの読み込み
**************************************************/
function st_enqueue_scripts() {
// デフォルトjQuery削除
wp_deregister_script('jquery');
// CDNからjQuery読み込み
wp_enqueue_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', array(), '3.5.1', false);
// slick
wp_enqueue_script('slick', '//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js', array(), '3.5.1', false);
wp_enqueue_script('main', get_theme_file_uri('js/script.js'), array('jquery'), false, true);
}
add_action('wp_enqueue_scripts', 'st_enqueue_scripts');single.php、page.php
- single.php ：投稿ページのテンプレート
- page.php ：固定ページのテンプレート
single.phpはカテゴリーを追加したりする場合もあります。
<?php get_header(); ?>
<div class="thumbnail-wrapper" style="background-image: url(<?php echo the_post_thumbnail_url( 'full' ); ?>);">
</div>
<div class="container">
<h1 class="page-title"><?php the_title(); ?></h1>
<section class="section">
<?php while (have_posts()) : the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
</section>
</div>
<?php get_footer(); ?>その他
- imagesフォルダ
index.htmlをindex.phpに（テンプレートタグ）
タイトル、ディスクリプション
headタグ内
<title><?php echo bloginfo('name'); ?></title>
<meta name="description" content="<?php bloginfo('description'); ?>">img要素のhref属性
<img src="images/300_200-sky-5.png" alt="">↓
<img src="<?php echo esc_url(get_theme_file_uri('images/300_200-sky-5.png')); ?>" alt="">backgroundプロパティの値
<div class="mv" style="background-image: url();">
</div>
<!-- /.mv -->ナビゲーションメニュー
/**************************************************
ナビゲーションメニューの利用
**************************************************/
function register_my_menus() {
register_nav_menus( array( //複数のナビゲーションメニューを登録する関数
//'「メニューの位置」の識別子' => 'メニューの説明の文字列',
'main-menu' => 'Main Menu',
'footer-menu' => 'Footer Menu',
) );
}
add_action( 'after_setup_theme', 'register_my_menus' );参考サイト：
https://www.webdesignleaves.com/pr/wp/wp_nav_menus.html
ナビゲーションメニュー以外のページリンク
<?php echo home_url('/profile/'); ?>
header.php、footer.phpを作成
index.phpからそれぞれ切り取りheader.php、footer.phpを読み込む
<?php get_header(); ?>
〜 省略 〜
<?php get_footer(); ?>アイキャッチ画像の有効化
/**************************************************
アイキャッチ画像を有効化する
**************************************************/
function twpp_setup_theme() {
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'twpp_setup_theme' );投稿ページコンテンツ出力
<?php get_header(); ?>
<h1 class="page-title"><?php the_title(); ?></h1>
<?php while (have_posts()) : the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_content(); ?>
<?php endwhile; ?>
<?php get_footer(); ?>検索フォーム
<form role="search" method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url('/') ); ?>">
<div>
<label class="screen-reader-text" for="s">検索:</label>
<input type="text" value="" name="s" id="s">
<input type="submit" id="searchsubmit" value="検索">
</div>
</form>search.php
<?php get_header(); ?>
<div class="thumbnail-wrapper" style="background-image: url(<?php echo the_post_thumbnail_url( 'full' ); ?>);">
</div>
<div class="container">
<section class="section section-search">
<?php if (have_posts()): ?>
<?php if (!$_GET['s']) { ?>
<h1 class="page-title">検索キーワードが未入力です<h1>
<?php } else { ?>
<h1 class="page-title">
「<?php echo esc_html($_GET['s']); ?>」の検索結果：<?php echo $wp_query->found_posts; ?>件
</h1>
<?php while(have_posts()):the_post(); ?>
<?php
$cat = get_the_category();
$catname = $cat[0]->cat_name;
?>
<a href="<?php the_permalink(); ?>" class="article">
<?php if (has_post_thumbnail()) : /* もしアイキャッチが登録されていたら */ ?>
<?php the_post_thumbnail( array(200,120), 'class=article-img' ); ?>
<?php else: /* 登録されていなかったら */ ?>
<img src="<?php echo get_template_directory_uri(); ?>/images/mainvisual-pc@2x.png" class="article-img">
<?php endif; ?>
<!-- /.article-img -->
<div class="article-desc">
<h2 class="heading2">
<span><?php the_title(); ?></span><span></span>
</h2>
<ul class="meta">
<li><?php the_time('Y/m/d'); ?></li>
<li><?php echo $catname; ?></li>
</ul>
<div class="text">
<?php
if (mb_strlen(strip_tags(get_the_content()), 'UTF-8') > 80) {
$content = mb_substr(strip_tags(get_the_content()), 0, 140, 'UTF-8');
echo $content . '…';
} else {
echo strip_tags(get_the_content());
}
?>
</div>
</div>
<!-- /.article-desc -->
</a>
<?php endwhile; ?>
<?php } ?>
<?php else: ?>
<h1 class="page-title">検索されたキーワードに一致する記事はありませんでした</h1>
<?php endif; ?>
</section>
</div>
<?php get_footer(); ?>パンくずリスト
プラグインを使う方がいいかも？