LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@WebDesignGaju(WebDesign GajuGaju)

Wordpress参考まとめ（リンクなど）

Last updated at Posted at 2025-02-01

初心者の方にwordpressを教える必要があり、1ページでわかるように内容をまとめました

WordPress初心者 - テキスト

📚 学習の流れ

  1. テンプレートファイルの理解
  2. よく使うテンプレートタグ
  3. functions.phpの基本
  4. テーマサポート機能の詳細
  5. 実践演習
  6. 注意点とコツ

📁 WordPressテンプレートファイル

基本ファイル構成

theme-folder/
├── style.css       （必須：テーマ情報とスタイル）
├── index.php       （必須：メインテンプレート）
├── functions.php   （テーマ機能拡張）
├── header.php      （ヘッダー部分）
├── footer.php      （フッター部分）
├── single.php      （個別投稿ページ）
├── page.php        （固定ページ）
├── home.php        （ブログホームページ）
├── front-page.php  （フロントページ）
├── archive.php     （アーカイブページ）
├── search.php      （検索結果ページ）
└── 404.php         （404エラーページ）

テンプレート階層

WordPressは「テンプレート階層」に従って、適切なファイルを自動選択します。

表示内容 優先順位（左が高い）
トップページ front-page.php → home.php → index.php
個別投稿 single-{post-type}.php → single.php → index.php
固定ページ page-{slug}.php → page-{id}.php → page.php → index.php
カテゴリ category-{slug}.php → category-{id}.php → category.php → archive.php → index.php

基本テンプレートファイルの作成

style.css（テーマ情報必須）

/*
Theme Name: My First Theme
Description: 初めてのWordPressテーマ
Version: 1.0
Author: Your Name
*/

body {
    font-family: "Hiragino Sans", sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

index.php（基本テンプレート）

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<div class="container">
    <header>
        <h1><a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
    </header>

    <main>
        <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>
                <article>
                    <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="meta">
                        投稿日: <?php the_date(); ?> | 投稿者: <?php the_author(); ?>
                    </div>
                    <div class="content">
                        <?php the_excerpt(); ?>
                    </div>
                </article>
            <?php endwhile; ?>
        <?php else : ?>
            <p>投稿が見つかりませんでした。</p>
        <?php endif; ?>
    </main>

    <footer>
        <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
    </footer>
</div>

<?php wp_footer(); ?>
</body>
</html>

header.php（ヘッダー部分）

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<div class="container">
    <header class="site-header">
        <h1 class="site-title">
            <a href="<?php echo home_url(); ?>"><?php bloginfo('name'); ?></a>
        </h1>
        <p class="site-description"><?php bloginfo('description'); ?></p>
        
        <!-- メニューがある場合 -->
        <nav class="main-navigation">
            <?php
            wp_nav_menu(array(
                'theme_location' => 'header-menu',
                'menu_class' => 'main-menu'
            ));
            ?>
        </nav>
    </header>

footer.php（フッター部分）

    <footer class="site-footer">
        <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>. All rights reserved.</p>
    </footer>
</div><!-- .container -->

<?php wp_footer(); ?>
</body>
</html>

🏷️ よく使うテンプレートタグ

基本的な出力タグ

<?php the_title(); ?>           // 記事タイトルを表示
<?php the_content(); ?>         // 記事本文を表示
<?php the_excerpt(); ?>         // 記事抜粋を表示
<?php the_permalink(); ?>       // 記事のURLを表示
<?php the_date(); ?>           // 投稿日を表示
<?php the_time('Y年m月d日'); ?>  // 投稿時間を表示（フォーマット指定）
<?php the_author(); ?>         // 投稿者名を表示
<?php the_category(); ?>       // カテゴリを表示
<?php the_tags(); ?>           // タグを表示

取得系（echoが必要）

<?php echo get_the_title(); ?>      // タイトルを取得
<?php echo get_the_content(); ?>    // 本文を取得
<?php echo get_permalink(); ?>      // URLを取得
<?php echo get_the_author(); ?>     // 投稿者名を取得

サイト情報

<?php bloginfo('name'); ?>         // サイト名
<?php bloginfo('description'); ?>  // サイトの説明文
<?php bloginfo('url'); ?>          // サイトURL
<?php echo home_url(); ?>          // ホームURL
<?php echo get_template_directory_uri(); ?> // テーマディレクトリのURL

条件分岐タグ

<?php if (is_home()) : ?>          // ホームページかどうか
<?php if (is_single()) : ?>        // 個別投稿ページかどうか
<?php if (is_page()) : ?>          // 固定ページかどうか
<?php if (is_category()) : ?>      // カテゴリページかどうか
<?php if (is_archive()) : ?>       // アーカイブページかどうか
<?php if (is_search()) : ?>        // 検索結果ページかどうか
<?php if (is_404()) : ?>           // 404ページかどうか

WordPressループの基本形

<?php if (have_posts()) : ?>
    <?php while (have_posts()) : the_post(); ?>
        <!-- ここに記事の表示内容を記述 -->
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    <?php endwhile; ?>
<?php else : ?>
    <p>投稿が見つかりませんでした。</p>
<?php endif; ?>

⚙️ functions.phpの基本

基本構造

<?php
// 直接アクセスを防ぐ
if (!defined('ABSPATH')) {
    exit;
}

// テーマのセットアップ
function my_theme_setup() {
    // ここに機能を追加
}
add_action('after_setup_theme', 'my_theme_setup');

CSS・JSファイルの読み込み

function my_theme_scripts() {
    // CSSファイルの読み込み
    wp_enqueue_style('theme-style', get_stylesheet_uri());
    
    // 追加CSSファイルの読み込み
    wp_enqueue_style('custom-style', get_template_directory_uri() . '/css/custom.css');
    
    // JSファイルの読み込み
    wp_enqueue_script('theme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

メニューの登録

function register_my_menus() {
    register_nav_menus(array(
        'header-menu' => 'ヘッダーメニュー',
        'footer-menu' => 'フッターメニュー'
    ));
}
add_action('init', 'register_my_menus');

🎨 テーマサポート機能の詳細解説

add_theme_support()で追加できる機能

1. title-tag（重要度：★★★）

add_theme_support('title-tag');

必要性：

  • WordPressにページタイトルの生成を任せる
  • SEO対策として重要
  • 手動で<title>タグを書く必要がなくなる

効果：

  • トップページ: "サイト名 | サイトの説明"
  • 投稿ページ: "記事タイトル | サイト名"
  • カテゴリページ: "カテゴリ名 | サイト名"

2. post-thumbnails（重要度：★★★）

add_theme_support('post-thumbnails');

// サイズを指定する場合
set_post_thumbnail_size(300, 200, true); // 幅300px、高さ200px、クロップあり

必要性：

  • 記事にアイキャッチ画像を設定できる
  • 管理画面に「アイキャッチ画像」の設定欄が表示される

使用方法：

<?php if (has_post_thumbnail()) : ?>
    <?php the_post_thumbnail('medium'); ?>
<?php endif; ?>

3. menus（重要度：★★☆）

add_theme_support('menus');

必要性：

  • 管理画面でメニューを作成・編集できる
  • register_nav_menus()と組み合わせて使用

4. html5（重要度：★★☆）

add_theme_support('html5', array(
    'search-form',      // 検索フォーム
    'comment-form',     // コメントフォーム
    'comment-list',     // コメント一覧
    'gallery',          // ギャラリー
    'caption'           // キャプション
));

必要性：

  • WordPressが出力するHTMLをHTML5形式にする
  • 古いXHTML形式から現代的なHTML5に変更
  • アクセシビリティと保守性が向上

5. custom-background（重要度：★☆☆）

add_theme_support('custom-background', array(
    'default-color' => 'ffffff',
    'default-image' => get_template_directory_uri() . '/images/bg.jpg'
));

必要性：

  • 管理画面で背景色や背景画像を設定可能
  • カスタマイザーから簡単に変更できる

6. custom-header（重要度：★☆☆）

add_theme_support('custom-header', array(
    'default-image' => get_template_directory_uri() . '/images/header.jpg',
    'width'         => 1200,
    'height'        => 300,
    'flex-height'   => true,
    'flex-width'    => true
));

必要性：

  • ヘッダー画像を管理画面から設定可能
  • ユーザーが簡単にサイトをカスタマイズできる

7. custom-logo（重要度：★★☆）

add_theme_support('custom-logo', array(
    'height'      => 100,
    'width'       => 300,
    'flex-height' => true,
    'flex-width'  => true
));

必要性：

  • サイトロゴを管理画面から設定可能
  • カスタマイザーで簡単にロゴを変更

使用方法：

<?php if (has_custom_logo()) : ?>
    <?php the_custom_logo(); ?>
<?php else : ?>
    <h1><?php bloginfo('name'); ?></h1>
<?php endif; ?>

8. editor-styles（重要度：★☆☆）

add_theme_support('editor-styles');
add_editor_style('editor-style.css'); // エディタ用CSSを指定

必要性：

  • 管理画面のエディタにテーマのスタイルを適用
  • 実際の表示と編集画面の見た目を統一

推奨するテーマサポート設定

function my_theme_setup() {
    // 必須レベル
    add_theme_support('title-tag');           // SEO対策で重要
    add_theme_support('post-thumbnails');     // アイキャッチ画像
    
    // 推奨レベル
    add_theme_support('html5', array(
        'search-form',
        'comment-form',
        'comment-list',
        'gallery',
        'caption'
    ));
    
    add_theme_support('custom-logo', array(
        'height'      => 100,
        'width'       => 300,
        'flex-height' => true,
        'flex-width'  => true
    ));
    
    // 必要に応じて
    add_theme_support('menus');
    add_theme_support('custom-background');
    add_theme_support('custom-header');
}
add_action('after_setup_theme', 'my_theme_setup');

💻 実践演習

ステップ1: 基本テーマの作成

  1. テーマフォルダを作成

    • /wp-content/themes/my-first-theme/

  2. 必須ファイルを作成

    • style.css（テーマ情報を記述）
    • index.php（基本テンプレート）

ステップ2: 機能を追加

  1. functions.phpを作成

    • テーマサポート機能を追加
    • CSS/JSファイルの読み込み設定

  2. 部品ファイルを作成

    • header.php
    • footer.php
    • index.phpを分割してinclude

ステップ3: 専用ページを作成

  1. 個別投稿ページ

    • single.phpを作成

  2. 固定ページ

    • page.phpを作成

実習課題

課題1: 基本的なブログテーマを作成してください。

課題2: ヘッダーとフッターを分離し、メニュー機能を追加してください。

課題3: アイキャッチ画像を表示する機能を追加してください。

💡 注意点・よくあるミス・コツ

🚫 よくあるミス

1. functions.phpでの構文エラー

// ❌ 悪い例：PHPタグの閉じ忘れ、構文エラー
<?php
function my_function() {
    echo "Hello"  // セミコロンがない！
}

// ✅ 良い例：正しい構文
<?php
function my_function() {
    echo "Hello";
}
// 終了タグは書かない

2. セキュリティ対策の不備

// ❌ 悪い例：エスケープしていない
<h1><?php echo get_the_title(); ?></h1>

// ✅ 良い例：エスケープ処理
<h1><?php echo esc_html(get_the_title()); ?></h1>

3. wp_head()とwp_footer()の忘れ

// ❌ 悪い例：必須タグがない
</head>
<body>

// ✅ 良い例：必須タグを追加
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<!-- フッター前に -->
<?php wp_footer(); ?>
</body>

✅ 開発のコツ

1. デバッグモードを有効化

// wp-config.phpに追加
define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);
define('WP_DEBUG_DISPLAY', false);

2. 子テーマを作成する

/*
Template: parent-theme-folder
Theme Name: My Child Theme
*/

@import url("../parent-theme/style.css");

/* カスタムスタイルをここに追加 */

3. 条件分岐を活用

<?php if (is_home()) : ?>
    <h1>ブログホーム</h1>
<?php elseif (is_single()) : ?>
    <h1>個別投稿</h1>
<?php else : ?>
    <h1>その他のページ</h1>
<?php endif; ?>
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?