IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / Wordpress / WordPress:テーマをゼロから作ってみる(1)

WordPress:テーマをゼロから作ってみる(1)

2022/05/26 Wordpress

WordPress のテーマを自作するのは簡単です。多分(笑)。まったくのゼロ、最低限必要なものはなにかからやってみようと思います。

  • 自作テーマをインストールする
    • style.css
    • index.php, screenshot.png (jpg…)
  • ヘッダを書き加える
  • ヘッダ要素から削除するもの
  • テーマ機能を追加する
  • とりあえず投稿タイトルを表示してみる

自作テーマをインストールする

WordPress にテーマを認識させるために最低限必要なファイルは2つだけです。

  • style.css
  • index.php

WordPress インストールディレクトリ下の wp-content > themes ディレクトリに好きな名前で自作テーマディレクトリをつくり、そこに上の2つのファイルを作ります。

ディレクトリ名を imuzajune としています。twentynineteen は、テーマをすべて削除することは出来ませんので残してあります。

style.css

style.css に次のようにテーマ名を入れて保存します。Theme URI 以下はなくても認識しますが、後々書き加えるために入れてあります。index.php は空白のままです。

@charset "UTF-8";
/*
Theme Name: Imuza June
Theme URI: 
Description: 
Author: 
Author URI: 
Version: 1.0.0
Text Domain:
*/

管理画面 > 外観 > テーマ にアクセスしますと Imuza June と認識しています。この状態で有効化出来ます。ただ、サイトにアクセスしても真っ白です。

index.php, screenshot.png (jpg…)

index.php に html を書いてみます。

<html>
    <body>
        WordPress テーマ<br>
        Imuza June
    </body>
</html>

また、テーマディレクトリに screenshot.png を入れてみます。

スクリーンショットは

スクリーンショットはテーマのデザインを正しく反映し、PNG形式で保存する。推奨する画像サイズは 880×660。実際には 387×290 のサイズで表示

とのことです。ただ、まだスクリーンショットがありませんのでとりあえずテーマ名の画像です。

  • テーマの作成 – WordPress Codex 日本語版

管理画面はこうなります。

サイトにアクセスするとこうなります。確かに自作テーマが有効になっています。

ヘッダを書き加える

「WordPress Codex 日本語版」にあるヘッダ部分のサンプルコードを index.php に書き加えてみます。

  • テーマの作成 – WordPress Codex 日本語版

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
    <head>
        <meta charset="<?php bloginfo( 'charset' ); ?>" />
        <title><?php wp_title(); ?></title>
        <meta name="description" content="<?php bloginfo( 'description' ); ?>">
        <link rel="profile" href="http://gmpg.org/xfn/11" />
        <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />
        <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
        <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>
        <?php wp_head(); ?>
    </head>
    <body>
        WordPress テーマ<br>
        Imuza June
    </body>
</html>

ページのソースを見ています。

wp_head() によっていろいろ書き加えられましたが、<title></title> が空白になっています。

これは、WordPress のテンプレートタグ wp_title() がページタイトルを出力するタグで、管理ページの一般設定で入力したサイトのタイトルを出力しないからです。サイトタイトルは bloginfo('name') で出力されます。

ただ、サイトタイトルを設定してしまいますとすべてのページで同じになってしまいますので SEO としてよくありません。そのためにサイトのホームではサイトのタイトルを表示し、各ページではページタイトルを表示する add_theme_support( 'title-tag' ) という機能が別に用意されています。これはヘッダの不必要なものを削除する作業と同時に行います。

ヘッダ要素から削除するもの

まず、上の構文で wp_head() が吐き出すもの以外の直書きしたものから削除していきます。

  • <title><?php wp_title(); ?></title>
  • <meta name="description" content="<?php bloginfo( 'description' ); ?>">
  • <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" media="screen" />

これらは必要なものですが、functions.php でコントロールしますのでここでは削除しておきます。

  • <link rel="profile" href="http://gmpg.org/xfn/11" />
  • <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
  • <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>

これらは私の場合は必要ありませんので削除しておきます。

ということで、ほぼ全てでした(笑)。

続いて、wp_head() が吐き出すものを削除する場合は、テーマディレクトリに functions.php を作りそこに書きます。

remove_action( 'wp_head', 'wp_resource_hints', 2); //Remove Dns-prefetch
remove_action( 'wp_head', 'rest_output_link_wp_head' ); //Remove REST API
remove_action( 'wp_head', 'rsd_link' ); //Remove RSD link
remove_action( 'wp_head', 'wlwmanifest_link' ); //Remove wlwmanifest link
remove_action( 'wp_head', 'wp_generator' ); //Remove Generator


//Disable emojis
add_action( 'init', 'disable_emojis' );
function disable_emojis() {
    remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
    remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
    remove_action( 'wp_print_styles', 'print_emoji_styles' );
    remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
    remove_action( 'admin_print_styles', 'print_emoji_styles' );
    remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
    remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
}


//Remove Gutenberg Block Library CSS
add_action( 'wp_enqueue_scripts', 'remove_wp_block_library_css', 100 );
function remove_wp_block_library_css(){
    wp_dequeue_style( 'wp-block-library' );
    wp_dequeue_style( 'wp-block-library-theme' );
}


//Remove global-styles
add_action( 'wp_enqueue_scripts', 'remove_global_styles' );
function remove_global_styles(){
    wp_dequeue_style( 'global-styles' );
}


// Disable WordPress Admin Bar
add_filter( 'show_admin_bar', '__return_false' );

Dns-prefetch、REST API、RSD link、wlwmanifest link、Generator、emoji、Block Library CSS、global-styles、Admin Bar を削除しています。なにをするものなのかはそれぞれの項目でググり判断してください。

テーマ機能を追加する

add_action( 'after_setup_theme', 'imuza_june_setup' );
function imuza_june_setup() {
    add_theme_support( 'title-tag' );
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'responsive-embeds' );
    add_theme_support( 'automatic-feed-links' );
    add_theme_support( 'html5', array( 'search-form' ) );
    global $content_width;
    if ( !isset( $content_width ) ) { 
        $content_width = 650;
    }
    register_nav_menus( array(
        'primary-nav' => 'Primary Nav',
        'secondary-nav' => 'Secondary Nav') 
    );
}

詳しくはドキュメントをご覧ください。

  • 関数リファレンス/add theme support – WordPress Codex 日本語版

上から順番に

  • title-tag
    タイトルタグが自動的に作成される(ホームではサイトタイトル、投稿ページでは記事タイトル)
  • post-thumbnails
    投稿ページでサムネイル画像が使える(the_post_thumbnail() get_the_post_thumbnail())
  • responsive-embeds
    Youtubeなど埋め込みコンテンツをレスポンシブ対応にする
  • automatic-feed-links
    投稿とコメントのRSSフィードを出力する
  • html5
    HTML5マークアップの使用を許可する(ドキュメントには、comment-list, comment-form, search-form, gallery, caption がリストアップされている)
  • $content_width
    画像サイズや埋め込みコンテンツの幅をこの値に最適化する
  • register_nav_menus
    管理画面でカスタムメニューを作成できるようにする

なお、automatic-feed-links を指定しますと、コメントの rss フィードも出力しますので、コメントを使用しない場合は、

// disable comments feed
add_filter( 'feed_links_show_comments_feed', '__return_false' ); 

として出力しないように抑制します。

とりあえず投稿タイトルを表示してみる

ヘッダ要素には追加すべきものはまだあるのですが、サイトが空白のままではやっている感が出ませんので、とりあえず投稿記事のタイトル一覧を表示してみます。

index.php を次のように書き加えますと投稿タイトルが10記事リスト表示されます。

<!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>
<p>WordPress テーマ<br>
Imuza June</p>
<?php
if ( have_posts() ) :
    echo '<ul>';
    while ( have_posts() ) : the_post();
        the_title( '<li>', '</li>');
    endwhile;
    echo '</ul>';
endif;
?>
</body>
</html>

記事タイトルが表示されています。

この場合の表示数は、管理画面 > 設定 > 表示設定 の「1ページに表示する最大投稿数」の数値です。

ということで、「テーマをゼロから作ってみる」は割と簡単に行けそうな気がします(笑)。

次は、サイドバーとフッターを追加し、コンテンツ表示になります。

KATE(ケイト)リップモンスター(ミニ)03【陽炎】

KATE(ケイト)リップモンスター(ミニ)03【陽炎】

  • KATE(ケイト)

Amazon

WordPress:テーマ制作は一からの制作に行きつく
WordPress:テーマをゼロから作ってみる(2)
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/02/1

WordPress:期間指定で人気記事を表示(プラグインなし)

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

WordPress:OGPタグをプラグインなしで挿入する

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress60
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com