【Wordpressテーマ作成】テーマを作る
2021-7-23
meko公式のテーマ作成ドキュメント
Wordpressのフォルダ構成
publc
|--index.php
|--...
|--wp-admin/
|--wp-content/
|--index.php
|--my-plugin
|--plugins
|--themes <----このフォルダ
|--upgrades
|--uploads
|--wp-includes/
themesフォルダの中に
my-themeなど作るプラグインの名前のフォルダを作成し、
フォルダ内に
- index.php
- style.css
があればthemeとしてwordpressで使用できます。
index.php
トップページと投稿ページでスタイルを変える時はfront-page.phpを作成します。
また、固定ページのスタイルを変える場合にはpage.phpを作成します。
<?php get_header(); ?>
<main>
<?php if (have_posts()): ?>
<?php while( have_posts() ): the_post(); ?>
<div><?php the_date(); ?></div>
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
<?php endwhile; ?>
<?php else: ?>
<div>No Content</div>
<?php endif; ?>
</main>
<?php get_footer(); ?>
| 関数 | 詳細 | 書き方例 |
|---|---|---|
| get_header() | ヘッダーを呼び込む | |
| have_hposts() | 記事が存在するか返す | |
| the_post() | 記事を読ぶ | the_title('<span class="title">','</span>',true) |
| the_date() | 記事の日付を返す | the_date("Y年m月d日",'<span class="date">','</span>', true) |
| the_title() | 記事のタイトルを返す | |
| get_footer() | フッターを呼び込む |
一覧(front-page)
<?php get_header(); ?>
<main>
<?php if (have_posts()): ?>
<ul>
<?php while( have_posts() ): the_post(); ?>
<li>
<span><?php the_date(); ?></span>
<span><?php the_title(); ?></span>
</li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<div>No Content</div>
<?php endif; ?>
</main>
<?php get_footer(); ?>
style.css
/*
Theme Name: MyTheme
Author: Meko
Version: 1.0.0
*/
おまけ
screenshot.pngをフォルダに入れるとテーマ選択の際に画像が表示されます。
適切なサイズは1200x900pxです。
HeaderとFooterを作成する
Headerの<?php wp_head(); ?>と
Footerの<?php wp_footer(); ?>があればWordpress編集中に出るHeadのナビゲーションが出ます。
Headerを作る
Headerを編集するにはmy-themeフォルダにheader.phpファイルを作成する必要があります。
<?php
?>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height">
<meta charset="<?php bloginfo('charset'); ?>">
<link rel="icon" sizes="32x32" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />
<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<title><?php bloginfo( "name" ); ?></title>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php bloginfo( "name" ); ?>
Footerを作る
<footer>
Copyright © 2021 meko All Right Reserved
</footer>
<?php wp_footer(); ?>
<body>
</html>
カスタムメニューを追加する
functions.phpをmy-themeフォルダに作成します。
<?php
register_nav_menu('custom-menu', 'ヘッダーメニュー');
?>
header.phpに下記を書き込むと、設定したメニューが表示されます。
<nav>
<?php wp_nav_menu( array(
'theme_location'=>'mainmenu',
'container' =>'',
'menu_class' =>'',
'items_wrap' =>'<ul id="main-nav">%3$s</ul>'));
?>
</nav>
複数メニューを同時に登録する
register_nav_menus( array(
'header-menu' => 'ヘッダーメニュー',
'footer-menu' => 'フッターメニュー',
) );
