WordPressテーマ開発をマスターする：ゼロからワンまでの完全ガイドと実践的なテクニック

推薦図書 完璧なウェブサイトを作る：ゼロからプロフェッショナルなWordPressテーマを開発する。

コアテンプレートファイルとテンプレートの階層構造

WordPressは、「テンプレート階層（Template Hierarchy）」と呼ばれるインテリジェントなシステムを採用しており、異なる種類のコンテンツをどのように表示するかを決定しています。ユーザーがページにアクセスすると、WordPressは特定の優先順位に従って対応するテンプレートファイルを探します。この階層構造を理解することは、テーマ開発の核心です。

hosting.com 共有ホスティング

AMD EPYC CPU、NVMe SSDストレージ、LiteSpeedによる高いパフォーマンス、24時間365日の専門家による社内サポート、SSL、ブルートフォース、マルウェア、DDoS保護などの高度なセキュリティ対策、最大73%のコスト削減

アクセスページ

テンプレートの階層構造による動作原理

例えば、ブログ記事にアクセスしたとき、WordPressは以下の順番で検索を行います：single-post-{post-type}-{slug}.php -> single-post-{post-type}.php -> single.php -> singular.php -> 最終的に元の状態に戻すindex.php開発者は、より具体的なテンプレートファイルを作成することで、さまざまなコンテンツの表示方法をカスタマイズすることができます。アーカイブページ、検索ページ、404ページなどにはそれぞれ対応する階層ルールがあります。

基本テンプレートファイルを作成します。

最も基本的なところから始めましょう。header.php、footer.phpとindex.php構築を開始します。header.php中、必ず使用してください。wp_head()この機能により、WordPressのコア、プラグイン、テーマがここに必要なコード（例えばスタイルシートのリンクなど）を挿入することができます。同様に、footer.phpここに使用すべき内容を記入してください。wp_footer()関数です。メインテンプレート内にあります。index.phpはい、通過しました。get_header()、get_footer()、get_sidebar()等模板标签引入这些部件。

非常シンプルなものです。index.php構造の例は以下の通りです：

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 显示文章内容
        endwhile;
    else :
        // 显示未找到内容
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

テーマ機能とWordPress APIの統合

functions.phpファイルはテーマの「脳」のようなもので、テーマの機能を拡張するために使用されますが、コアファイル自体を変更することはありません。ここでは、アクションフックやフィルターフックを利用してWordPressの実行プロセスに介入することができます。

推薦図書 プロフェッショナルなWordPressテーマの作成方法：ゼロからオンライン公開までの完全ガイド。

登録されたトピックでサポートされている機能：

とおすadd_theme_support()関数を使って、サイトがサポートするさまざまな機能を宣言することができます。例えば、記事のサムネイル（特集画像）の表示の有効化、カスタムロゴの設定、記事のフォーマットの変更などです。

function mytheme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'mytheme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

上記のコードは、以下の方法で動作します：after_setup_themeフックはテーマの初期化時に実行され、テーマ機能の登録が行われます。

スクリプトやスタイルを安全に導入する方法

永远不要直接在模板文件中硬链接CSS和JS文件。应该使用wp_enqueue_scriptsアクションフックとそれに対応する関数を使用して、ロードを順番に処理します。

インターサーバー共有ホスティング

共有ホスティング月$2.50米ドル, 最初の月$0.1米ドルプロモーションコードtryinterserver, 461クラウドアプリケーションスクリプト, 1クリックインストール.

アクセスページ

function mytheme_scripts() {
    // 引入主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义JS文件，并依赖jQuery
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

この方法により、依存関係の管理が確実に行われ、データの重複読み込みが防がれます。また、WordPressのベストプラクティスにも準拠しています。

テーマカスタマイズと高度な機能

現代のWordPressテーマ開発においては、カスタム機能が不可欠です。これには、テーマカスタマイザーを通じてリアルタイムでプレビューを行う機能や、特殊なコンテンツを管理するためのカスタム記事タイプやカテゴリの作成などが含まれます。

テーマカスタマイザAPIを使用する

WordPressのカスタマイザー（Customizer）APIを使用すると、リアルタイムでプレビュー可能な設定オプションを追加することができます。パネルやセクション、設定項目を追加し、これらの設定に対してコントローラー（例えば色選択器やファイルアップコントロールなど）を作成することも可能です。

推薦図書 究極ガイド：ゼロからプロフェッショナルなWordPressテーマを開発する方法。

function mytheme_customize_register( $wp_customize ) {
    // 添加一个节
    $wp_customize->add_section( 'mytheme_colors', array(
        'title' => __( '主题颜色', 'mytheme' ),
    ) );
    // 添加一个设置
    $wp_customize->add_setting( 'primary_color', array(
        'default' => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );
    // 为该设置添加一个颜色控制器
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label' => __( '主色', 'mytheme' ),
        'section' => 'mytheme_colors',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

テーマファイル内では、以下のように使用することができます：get_theme_mod( 'primary_color' )ユーザーが設定した値を取得するために。

カスタムの記事タイプを作成する

作品集、製品、チームなど、標準的な記事の内容ではないものを表示する必要がある場合、カスタム記事タイプ（CPT）を登録することが最善の選択です。これは通常、以下のような手順で行われます：register_post_type()関数の実装については、プラグイン内で行うことをお勧めします。これにより、テーマを切り替えてもデータが失われることがありません。ただし、デモンストレーションのためには、テーマ内で実装することも可能です。functions.phpその作業は「中」で行われます。

Bluehost共有ホスティング

AIウェブサイト作成ツール、99.99%アップタイムSLA、1年間無料ドメイン、無料CDN、...

30日間返金保証

Bluehostの共有ホスティングへのアクセス → （英語

HostArmada 共有ホスティング

全ウェブサイト無料SSL、無料ウェブサイト移行、無料ウェブサーバーキャッシング、無料cPanelコントロールパネル

45日間返金保証

HostArmada共有ホスティングへのアクセス →。

function mytheme_register_portfolio() {
    $args = array(
        'public' => true,
        'label'  => __( '作品集', 'mytheme' ),
        'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'has_archive' => true,
        'menu_icon' => 'dashicons-portfolio',
    );
    register_post_type( 'portfolio', $args );
}
add_action( 'init', 'mytheme_register_portfolio' );

登録すると、バックエンドに「作品集」メニューが表示されます。この作品集は記事を管理するのと同じように管理でき、専用のテンプレートファイルを作成することもできます。single-portfolio.php。

概要

WordPressのテーマ開発は体系的な工程です。基本的なファイル構造やテンプレートの階層を理解することから始まり、それらを熟知して使いこなすまでを経て完成します。functions.phpWordPressの各種API（カスタマイザAPIや記事タイプAPIなど）を利用して機能を拡張することができます。フックを使ってリソースを安全に読み込んだり、サブテーマを使って変更を加えたり、翻訳可能なコードを書いたりするなどのベストプラクティスに従うことが、プロフェッショナルで効率的かつメンテナンスしやすいテーマを開発するための鍵となります。このガイドの手順に従って、ゼロからカスタムテーマを構築するための基本的な方法をマスターしました。次には、実践を重ねながらより高度なAPIを探求し、スキルをさらに磨いていくことです。

FAQ よくある質問

###: WordPressのテーマには、最低でもどのようなファイルが必要ですか？
WordPressのテーマには少なくとも2つのファイルが必要です：style.css と index.php。style.cssファイルの上部にあるコメントブロックには、テーマのメタ情報（例えばテーマ名など）を含める必要があります。これはWordPressがテーマを認識するために必要なものです。index.phpこれがデフォルトのメインテンプレートファイルです。

どうやって私のテーマを多言語に対応させることができるでしょうか？

テキストの国際化に備える必要があります。トピック内でユーザーに表示されるすべての文字列は、翻訳関数で囲む必要があります。例えば：__('Hello World', 'mytheme-textdomain')または_e('Hello World', 'mytheme-textdomain')その後、Poeditのようなツールを使用して生成します。.potテンプレートファイルを作成し、対応する言語のものも作成してください。.poと.mo最後に、functions.phpここで使用されているのはload_theme_textdomain()「Function loading」の翻訳です。

テーマを開発する際に、テーマを更新した後にカスタマイズした変更内容が失われるのをどのように防ぐか？

絶対に、第三者からダウンロードした親テーマのファイルを直接変更してはいけません。正しい方法は「サブテーマ」機能を利用することです。新しいテーマディレクトリを作成し、そこに必要なファイルを保存してください。style.cssあなたは中国を通してそれを達成しました。Template:親テーマのディレクトリ名を宣言してください。サブテーマでは、変更したいファイルや新たに追加したいファイルのみを含めればよいのです。style.css、functions.phpまたは、上書きされるテンプレートファイルを使用することもできます。このようにすることで、親テーマを安全に更新しつつ、あなたのカスタマイズ内容を保持することができます。

自分のテーマにカスタムのページテンプレートをどのように追加するか？

まず、あなたのテーマのルートディレクトリ内に新しいPHPファイルを作成してください。例えば、`new_file.php`といった名前で構いません。page-fullwidth.phpこのファイルの最上部に、これがページテンプレートであることを示す特別なコメントを追加してください。例えば：<?php /* Template Name: 全宽页面 */ ?>その後、このファイルにテンプレートコードを記述してください。保存したら、WordPressの管理画面でページを新規作成または編集する際に、「ページ属性」の「テンプレート」ドロップダウンリストから「全幅ページ」というテンプレートを選択して使用できるようになります。