WordPressのカスタムテーマチュートリアル（ステップバイステップガイド）

1月 15, 2022

WordPressのカスタムテーマチュートリアル

カスタムWordPressのテーマを作成することを学ぶことは、あなそれはあなた自身、あなたの顧客のためにカスタムデザインを構築し、さらにはオープンソースコミュニティに戻って貢献することができます。

このガイドでは、ゼロから完全に機能するテーマを作成することにします。WordPress.org テーマディレクトリ。

従うには、HTML、CSS、PHP、およびWordPressの仕組みについての基本的な理解が必要です。

このガイドで使用されているすべてのコードは、このGithubリポジトリで参照できるようになります。

カスタムテーマに不可欠なファイルの作成
関数の作成。php
テンプレートパーツを追加
単数を追加します。php、アーカイブ。php、検索。php、および404。php
補助ファイル
ページテンプレートを作成
テーマをRTLと互換性があるようにします。css
常にベストプラクティスに従ってください
WordPressテーマを配布する
コードのテストと改善

ステップ1：カスタムテーマに不可欠なファイルを作成する

機能するWordPressテーマは、スタイルの2つのファイルで構成できます。cssとインデックス。php。これは、WordPressのテンプレート階層のために可能です。

WordPressがウェブページを出力するとき、利用可能な最も具体的なテンプレートを検索し、テンプレートが存在しない場合は、存在するテンプレートが見つかるまで階層を下に移動します。ここに実用的な例があります:

ユーザーはページであるhttps://example.com/practical-exampleにいます。 WordPressはこの順序でテンプレートを見つけようとします:

1. - ページ-{スラッグ}。php-ページスラッグは/practical-exampleで、WordPressはあなたのテーマ/page-practical-exampleを使用するように見えます。php
  - ページ-{id}。php-ページIDは42で、WordPressはyour-theme/page-42を使用します。php。
  - php-WordPressは汎用のyour-theme/pageを試します。phpテンプレート。
  - php-単数形のテンプレートは投稿やページをレンダリングできるので、より具体的なページの後に試してみました。php
  - インデックス。php–最後にあなたのテーマ/インデックス。phpは、他のテンプレートが見つからない場合に使用されます。

のは、ちょうど重要なファイルでテーマを構築することから始めましょうし、我々は彼らがどのように動作するかを探るように、我々はより多くの機

/wp-content/themes/で、my-custom-themeという名前のフォルダを作成し、次の2つのファイルを作成します。

スタイル。css

WordPressがテーマを認識してAppearance→Themesリストに正しく出力するには、スタイルの上部にWordPress固有のコードを配置する必要があります。css、それはこのようになります:技術的にはフィールドのどれも必須ではありませんが、wp-adminでテーマを見栄えよくしたい場合は、それらを強くお勧めします。また、WordPressでテーマを配布する場合にも必要です。

1. - テーマ名-常にテーマ名を指定する必要があります。そうしないと、この例ではフォルダ名my-custom-themeが使用されます。
  - テーマURI–使用する場合、テーマURIは、訪問者がテーマについての詳細を学ぶことができるページへのリンクを提供する必要があります。
  - 著者–あなたの名前はここに行きます。
  - 著者URI–あなたの個人的なまたはビジネスのウェブサイトへのリンクをここに配置することができます。
  - 説明–説明はwp-adminテーマモーダルとWordPressテーマリストに表示されます。
  - Version–バージョン番号は、開発者が変更を追跡し、最新バージョンを使用しているかどうかをユーザーに知らせるのに役立ちます。私たちは、更新の変更の重大度を示すためにSemVer番号システムに従っています。
  - License–テーマをどのようにライセンスするかはあなた次第ですが、GPLと互換性のないライセンスを選択した場合、WordPressでテーマを配布することはできません。
  - ライセンスURI–これは単に上記のライセンスへのリンクです。
  - テキストドメイン–テキストドメインは、テーマを他の言語に翻訳するときに使用されます。私たちは後でこれを詳細に探求する心配しないでください。今のところ、テーマフォルダとtext-domainがスペースではなくハイフンで区切られたテーマ名であることが良い習慣であることを知っていれば十分です。
  - タグ-タグは、テーマを次の場所にアップロードする場合にのみ使用されます。WordPress.org テーマディレクトリ。それらは”特徴フィルター”メカニズムの基礎である。

上記をコピーしてスタイルに貼り付けます。cssとあなたはこのようなものを持っています： wp-adminテーマ情報

注：私たちはまだスクリーンショットを持っていないので、現時点では少し空白に見えます。それは後で追加します。

php

インデックス。phpは、他の唯一の厳密に必要なファイルです。その仕事は、私たちのテーマのすべてのフロントエンド出力をレンダリングすることです。

phpは私たちのすべてのページ（ホーム、投稿、カテゴリ、アーカイブ）をレンダリングするつもりです。開始するには、HTMLの基本をカバーするヘッドセクションが必要です。

<!DOCTYPE html><html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php wp_head(); ?> </head>

これは標準HTMLですが、例外は(<https://developer.wordpress.org/reference/hooks/wp_head/>)です。 wp_headは、WordPressやサードパーティのプラグインがテンプレートファイルを変更せずにヘッダーにコードを挿入できるようにするコア機能です。これはアクションフックと呼ばれます。HTMLに精通している場合は、ページタイトルを出力するための<title>タグがないことに気付くかもしれません。これは、WordPressがwp_headフックを使用してタイトルを動的に挿入できるためです。

wp_headの別の使用法は、スタイルをエンキューすることです(.css）とスクリプト（.js）。これをハードコーディングするのではなく、これを行うための非常に良い理由があります。

次に、ページの本文があります:

<body <?php body_class(); ?>>

body_class()はWordPressが提供するヘルパー関数で、次のように表示されているページを記述する便利なCSSクラスのリストを出力します:

class="page page-id-2 page-parent page-template-default logged-in"

body_class();また、パラメータを受け入れるので、独自のクラスを追加することができます。:

<body <?php body_class( 'wide-template blue-bg' ); ?>>

次に、テンプレートヘッダーを作成します。

<header class="site-header"><p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p><p class="site-description"><?php bloginfo( 'description' ); ?></p></header><! – .site-header – >

ここでは、WordPressの組み込みテンプレート関数を使用して、サイトのタイトルと説明を出力しています。また、ヘルパー関数home_url()を使用して、サイトのタイトルをホームページにリンクしました。

次は、ページの本文:

<div class="site-content"><?phpif ( have_posts() ) :while ( have_posts() ) :the_post();?><article <?php post_class(); ?>><header class="entry-header"><?php the_title( '<h1 class="entry-title">', '</h1>' ); ?></header><! – .entry-header – ><div class="entry-content"><?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?></div><! – .entry-content – ></article><! – #post-## – ><?php// If comments are open or we have at least one comment, load up the comment template.if ( comments_open() || get_comments_number() ) :comments_template();endif;endwhile;else :?><article class="no-results"><header class="entry-header"><h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1></header><! – .entry-header – ><div class="entry-content"><p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p></div><! – .entry-content – ></article><! – .no-results – ><?phpendif;?></div><! – .site-content – >

これは興味深い（そしてもう少し複雑になる）ところです。ここでは、WordPressの最も重要な機能であるループを使用しています。このループは、ユーザーがどのページにいるのか、何を表示する必要があるのかを把握するのに苦労します。次に、テンプレート関数を使用してループしてデータを出力できる1つ以上の「投稿」のリストを返します。

ループが結果を返さない場合、たとえば404ページや削除された投稿では、else演算子を使用して定義済みのメッセージを表示します。

周囲のコードがない場合、単純化されたループは次のようになります:

if ( have_posts() ) : // check if the loop has returned any posts.while ( have_posts() ) : // loop through each returned post.the_post(); // set up the content so we can use template tags like the_title().the_title(); // output the post title.the_content(); // output the post content.endwhile;else : echo 'No Page Found'; // output an error message if there are no posts.endif;?>

注：WordPressはブログの起源を持っているので、多くの関数は、任意のタイプのコンテンツ（投稿、ページ、カスタム投稿タイプ）を返して出力することができますが、「ポスト」の用語を使用しています。

最後に、フッターがありますが、ここで行う必要があるのは、先に開いたHTMLタグを閉じることだけです。別のアクションフックwp_footer()があり、WordPressやプラグインでページのレンダリングに必要なフッターにスクリプトを含めるために積極的に使用されています。

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

これまでフォローしてきた場合は、次のような完全に機能するWordPressテーマがあります:

スターターテーマプレビュー

私たちのテーマは、任意のデザイン賞を獲得するつもりはない（それはCSSを持っていない）、それはユーザーが不可欠と考える機能（サイドバー、ナ）しかし、それは素晴らしいスタートです！

続けて、どのように改善できるか見てみましょう。ステップ＃2：関数を作成します。php

関数。phpは厳密には必要なファイルではありませんが、テーマの99.99％がそれを持っているように多くの利点を提供します。関数で。phpあなたはWordPressの組み込みのテーマ機能を利用し、独自のカスタムPHPコードを追加することができます。

関数を作成します。あなたのテーマフォルダ内のphpは今、我々は次のセクションでそれにコードを追加されますように。

ナビゲーションメニューの追加

ほとんどのウェブサイトがナビゲーションメニューを利用しているわけではありませんが、今までのテーマはナビゲーションメニ私たちのテーマは、ナビゲーションメニューを備えてWordPressを伝えるために、我々は機能に登録する必要があります。このようなphp:

register_nav_menus( array( 'menu-1' => __( 'Primary Menu', 'my-custom-theme' ),);

注:register_nav_menus()は配列を受け入れるため、必要に応じて複数のメニューを登録できます。

WordPressはメニューについて知っていますが、テーマに出力する必要があります。これを行うには、indexのサイトの説明の下に次のコードを追加します。php:

wp_nav_menu( array( 'theme_location' => 'menu-1',) );

今、私たちは（スタイルのない）ナビゲーションメニューを持っています:

サイドバーの追加

私たちのテーマは、サイドバー（ウィジェット領域）を持っていませんどちらか、今それを修正してみましょう。

まず、関数にサイドバーを登録する必要があります。php:

function my_custom_theme_sidebar() { register_sidebar( array( 'name' => __( 'Primary Sidebar', 'my-custom-theme' ), 'id' => 'sidebar-1', ) );}add_action( 'widgets_init', 'my_custom_theme_sidebar' );

今すぐサイドバーを作成します。あなたのテーマフォルダにphpを追加し、次のコードを追加します:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) { ?> <ul class="sidebar"> <?php dynamic_sidebar('sidebar-1' ); ?> </ul><?php } ?>

ここでは、コードを出力する前にサイドバーが”アクティブ”であるかどうかをチェックするためにif文を使用しています。アクティブなサイドバーとは、ユーザーが少なくとも一つのウィジェットを追加したサイドバーのことです。

最後のステップは、インデックスにサイドバーを含めることです。php、wp_footer()の上にget_sidebar()呼び出しを追加します。

注目の画像の追加

サイドバーやナビゲーションメニューのように、私たちはちょうど私たちのテーマに注目の画像を出力し、それらが動作するように期待関数で。phpアド:

add_theme_support( 'post-thumbnails' );

今、私たちは追加することができますthe_post_thumbnail(); 私たちのループ内とサムネイルが動作します。唯一の問題は、WordPressの最大サイズである1920px x2560pxで出力されることですが、これはほとんどの用途には大きすぎます。幸いなことに、WordPressには別のヘルパー関数があります。add_image_size();

ユーザーが画像をアップロードすると、画像サイズが定義されている場合、WordPressはアップロードされた画像のバージョンをそのサイズで生成します（元のものを維持しながら）。ユーザーの画像が設定した寸法よりも小さい場合、WordPressは元の画像よりも大きくすることができないため、何もしません。

オリジナルではなく最適化されたフィーチャイメージを使用するには、関数に次のコードを配置します。php:

add_image_size( 'my-custom-image-size', 640, 999 );

最初のパラメータはハンドル、2番目のパラメータは画像の幅、3番目のパラメータは高さです。 1つの寸法のみを制限する場合は、高さと幅の両方がオプションです。インデックスに

。php:

the_post_thumbnail( 'my-custom-image-size' );

スタイルとスクリプトのエンキュー

以前、スタイルとスクリプトをテンプレートファイルに直接ハードコードするのではなく、エンキューする方が良いと述べました。これは、キューイングがより多くの柔軟性を可能にするためです。

正しく行われると、エンキューはどのリソースがロードされているかWordPressにも伝えます。 WordPressが必要なリソースを知っている場合、同じリソースが複数回ロードされていないことを確認できます。これは、複数のテーマやプラグインが利用されるjQueryやFontAwesomeのような非常に人気のあるライブラリがある場合に特に重要です。

エンキューのもう一つの利点は、エンキューされたリソースをプラグインによってデキューすることができ、テンプレートファイルを変更する必要がな

私たちのテーマはスタイルを持っていますが。cssファイルそれはまだそれを使用していない、のは今それをエンキューしてみましょう:

function my_custom_theme_enqueue() { wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

get_stylesheet_uri() 現在のテーマのスタイルシートのURIを取得するヘルパー関数です。他のファイルをキューに入れている場合は、代わりにこれを行う必要があります:

wp_enqueue_style( 'my-stylesheet', get_template_directory_uri() . '/css/style.css' );

私たちのテーマは、任意のスクリプトを持っていない、それがした場合、我々はこのようにそれらをエンキュー:

function my_custom_theme_enqueue() {wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/scripts.js' );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

上記の例外は、WordPressによって事前に登録されたスクリプトであり、そのような場合は最初のパラメータ（handle handle）を指定するだけです。:

wp_enqueue_script( 'jquery' );

CSSでスタイルを追加する

私たちのテーマは強力な基盤を持っていますが、スタイルにいくつかの基本的なCSSを追加し、任意のデザインを欠いていcssは大きな違いを生むでしょう。デモとしてサンプルテーマに約100行のCSSを追加しましたが、結果は次のようになります:

cssを使用したスターターテーマ

タイトルタグ

すべてのテーマは、WordPressの組み込み機能を使用してタイトルタグを生成する必要があります。phpファイル: add_theme_support( 'title-tag' );それだけで、WordPressはページ<タイトル>の出力を処理し、必要に応じてプラグインはフィルタを使用して出力を変更できます。 SEOのプラグインは、多くの場合、さらにタイトルを最適化するための努力でこれを

ステップ3:テンプレートパーツを追加

今、テンプレートコードの80%がインデックスになっています。php。

これは動作しますが、singularなどの他のテンプレートファイルがある場合、多くのコードが繰り返されます。php、検索。php、およびアーカイブ。php。テンプレートパーツは、テンプレート間でコードを再利用できるようにすることで、テーマの開発を容易にします。私たちのヘッダーとフッターは、すべてのページで同じになりますように、彼らはテンプレートパーツを使用するための完璧な候補です。まず、ヘッダーを作成します。phpとindexから次のコードを移動します。php:

<!DOCTYPE html><html <?php language_attributes(); ?>><head><meta charset="<?php bloginfo( 'charset' ); ?>"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="profile" href="<https://gmpg.org/xfn/11>"><?php wp_head(); ?></head> <header class="site-header"> <p class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php bloginfo( 'name' ); ?> </a> </p> <p class="site-description"><?php bloginfo( 'description' ); ?></p><?phpwp_nav_menu( array( 'theme_location' => 'menu-1',) );?> </header><! – .site-header – >

インデックスで。phpは上記のコードを次のように置き換えます:

<?php get_template_part( 'header' ); ?>

注：テンプレート部分を取得するときは、省略する必要があります。テンプレート部分のハンドルからphp。

次に、このコードをfooterに移動して、フッターテンプレートパーツを作成します。phpと上記のプロセスを繰り返す:

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

最後に、複数のテンプレートで使用される可能性が高いため、’no-results’コードもテンプレート部分に移動します。コンテンツを作成-なし。phpを実行し、このコードを新しいファイルに移動します。

<article class="no-results"> <header class="entry-header"> <h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1> </header><! – .entry-header – > <div class="entry-content"> <p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p> </div><! – .entry-content – ></article><! – .no-results – >

インデックスは次のようになります:

<?php get_template_part( 'header' ); ?> <div class="site-content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <?php the_post_thumbnail(); ?> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><! – .entry-header – > <div class="entry-content"> <?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?> </div><! – .entry-content – > </article><! – #post-## – > <?php // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; else : get_template_part( 'content-none' ); endif;?></div><! – .site-content – ><?phpget_sidebar();get_template_part( 'footer' );

上記は完璧に動作しますが、私たちが行うことができますわずかな改善があります。 WordPressには、ヘッダー、フッター、サイドバーのテンプレートパーツを含めるためのヘルパー機能があります。可能であればコア機能を使用するのがベストプラクティスなので、代わりにそれらを使用する必要があります。

get_template_part( 'header' );をget_header();に置き換え、get_template_part( 'footer' );をget_footer();

に置き換えますステップ＃4：単数を追加します。php、アーカイブ。php、検索。php、および404。php

テンプレートパーツで完成した基礎は、テーマに新しいテンプレートファイルを追加するときに配当を支払うことになります。以下では、最も一般的なものを列挙しました。コード例であなたを圧倒しないようにするために、代わりにGithubのソースコードにリンクしました。

php

投稿とページは、独自のUrlで表示される場合、ほとんどの場合、レイアウトはこれらのページタイプの両方で同じになるため、”特異”とみなされます。しかし、それがそうでない場合は、より具体的なページを使用することができます。phpとシングル。代わりにphp（post）。

コード例–単数形。php

アーカイブ。php

アーカイブテンプレートは、通常、単一のテンプレートとは二つの点で異なります。

テンプレート階層を参照すると、アーカイブテンプレートがすべてのタイプのアーカイブ（作成者、カテゴリ、タグ、分類、日付）をカバーしていることがわかります。:

1. - 作者。php
  - カテゴリ.php
  - タグ。php
  - タクソノミ。php
  - 日付。php

コード例-アーカイブ。php

を検索します。php

WordPressのウェブサイトを使用して検索することができますか？s=URLパラメータ、たとえばyourwebsite.com?s=test。検索。phpテンプレートは、これらの検索の結果を出力します。

コード例–検索。php

404.php

indexに追加したelseステートメント。phpは”page not found”エラーをキャッチしますが、出力をより詳細に制御するために、その機能を独自のテンプレートファイルに分離することができます。これが404のユースケースです。phpテンプレートファイル。

コード例–404。php

ステップ#5:補助ファイル

テーマを公開する場合は、次のファイルが不可欠です。これらがなければ、テーマはテーマリポジトリとマーケットプレイスから拒否されます。

png

スクリーンショットは、ユーザーが新しいテーマを選択しているときにwp-adminテーマリストに表示されます。以下に従うべきベストプラクティスをいくつか示します:

1. - スクリーンショットは1200px x900px
  - スクリーンショットはinにする必要があります。pngまたは.jpg形式
  - スクリーンショットは、テーマの正確な表現である必要があります
  - スクリーンショットは、最適化する必要があります（使用tinypng.com または類似した)

readme.txt

WordPressはreadmeからの情報を使用しません。txt、それはそれがスタイルから必要なすべてを引き出します。css。一方、WordPressのテーマディレクトリは、readmeファイルから重要な情報を取得し、それを必要なファイルとみなします。

ほとんどの開発者はreadmeを使用しています。彼らのテーマに関するすべての情報を格納するための中央の場所としてtxt。簡単なreadme。txtは次のようになります:

=== Theme Name ===Requires at least: 5.0Tested up to: 5.2Requires PHP: 5.6License: GPLv2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Short description. No more than 150 chars.== Description ==Theme desc.== Changelog === 1.0 =* Added new option== Resources ==* normalize.css <https://necolas.github.io/normalize.css/>, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, (<https://opensource.org/licenses/MIT>)

1. - 少なくとも必要です–これはあなたのテーマと互換性があるワードプレスの最小バージョンです。
  - Tested up to–このフィールドは、あなたのテーマがテストされたWordPressの最新バージョンを示します。
  - Requires PHP–このフィールドは、テーマが機能するPHPの最小バージョンを示します。
  - 説明–この説明フィールドは現在どこにも表示されていません。
  - Changelog–changelogはどこでも使用されませんが、開発者や一部のユーザーはこのファイルを参照して、どのような変更が行われたかを確認します。
  - リソース–ほとんどのサードパーティのリソースは、何らかの帰属を必要とします。リソースセクションは、それらを置くために広く受け入れられている場所です。明示的に帰属を必要としないリソースであっても、ユーザーが使用しているリソースのライセンスを認識できるように、ここにリストすることをお勧めし

ステップ#6: ページテンプレートの作成

ページテンプレートを使用すると、開発者は個々の投稿やページに使用できるカスタムテンプレートを作成できます。たとえば、ほとんどのテーマには2列（content-sidebar）のレイアウトがありますが、一部のページでは、サイドバーを表示せずにコンテンツに集中したい場合があります。それはページ-テンプレートが助けることができるところである。

“ページテンプレート”はどのように作成されますか？

私たちのテーマフォルダに、’page-templates’という名前の新しいフォルダを作成し、そのフォルダ内にsingle-columnというファイルを作成します。php。物事を高速化するには、すべてのコードをsingularからコピーします。phpをページテンプレート/単一列にします。このテンプレートはそれを必要としないので、phpとget_sidebar()への呼び出しを削除します。

今、私たちは、これはページテンプレートであるWordPressに伝える特別なヘッダーを追加する必要があり、それは次のようになります:

/*Template Name: Single Column TemplateTemplate Post Type: post, page*/

コードは自明であり、私たちは単にWordPressにテンプレートの名前とそれが使用できるポストタイプを伝えています。

それだけで、新しいページテンプレートがエディタの”ページ属性”の下で利用できるようになりました。

ページテンプレートドロップダウン

ステップ#7:テーマをRTLと互換性があるようにします。css

すべての言語が左から右に読むわけではありません。たとえば、アラビア語とヘブライ語は、右から左（RTL）に読み込まれます。テーマをRTL言語と互換性のあるものにする簡単な方法があります。

テーマフォルダにrtlという名前の新しいファイルを作成します。css、次のコードをコピーして貼り付けます:

body {direction: rtl;unicode-bidi: embed;}

RTL言語がWordPressのウェブサイト上でアクティブな言語である場合、WordPressはこのCSSファイルを自動的にロードすることを知っています。

これは、あなたが始めるためのRTL機能の非常に基本的な実装です。あなたがより多くのことを学ぶことに興味があるなら、ここに二つの素晴ら:

右から左の言語サポートドキュメント

Twenty Twenty RTLコード

ステップ#8:常にベストプラクティスに従う

ベストプラクティスは、WordPressテーマの構築と保守を容易にこれらの原則に従うことはあなたを助けるだけでなく、他の開発者があなたのコードで作業する必要があるときにもそれを容易にします。

1)Starter Themesを使用する

Starter themesは、テーマを構築するための強固な基盤を提供します。通常、それらは軽量で、スタイリングや構成オプションはほとんど含まれていません。時間が経つにつれて、あなたは上のすべてのプロジェクトをベースにすることができ、独自のスターターテーマを構築するかもしれませんが、今のところ、ここではいくつかの一般的なオプションがあります。:

1. - アンダースコア

2) WordPressのコーディング標準を知る

コーディング標準は、コードベース全体で一貫した方法でコードをフォーマットする方法です。 WordPressには、HTML、CSS、Javascript、およびPHPのコーディング標準があります。コーディング標準を使用してもエンドユーザーエクスペリエンスには影響しませんが、コードをより読みやすくします。 WordPressのコーディング標準を使用していない場合でも、常に標準を使用することをお勧めします。

1. - WordPress.org コーディング標準
  - WPCS
  - PHPコーディング標準

3) ローカリゼーションを使用

ボランティアの努力のおかげで、WordPressは何百もの言語で利用できます。あなたのテーマが公にリリースされようとしている場合、それはあまりにも翻訳することを可能にする方法で構築する必要があります。

心配しないで、超簡単に行うことができます。私たちがする必要があるのは、すべての文字列が直接出力されるのではなく、’ローカライズ関数’を介して渡されることを確認することです。

<?php echo 'Previous Post'; ?>

私たちは代わりにこれを行います:

<?php echo __( 'Previous Post', 'my-custom-theme' ); ?>

__() 文字列とテキストドメインを受け入れるローカライズ関数です。この関数は、指定された文字列の翻訳を返し、翻訳が利用できない場合は元の文字列を返します。

4)プラグイン機能の回避

ユーザーがテーマを変更すると、プレゼンテーション層のみが変更されます。コンテンツと機能はほとんど同じままにする必要があります。これが意味することは、WordPressの役割があなたのテーマではなくプラグインにどのように含まれるべきかに影響を与える関数であるということです。プラグインの機能の例としては、次のものがあります:

1. - カスタム投稿タイプ
  - ページビルダー
  - ソーシャルメディア共有
  - 検索エンジン最適化（SEO)

テーマにSEOコントロールを含めることは便利な（そしておそらくセールスポイント）ように見えるかもしれませんが、実際には長期的にはユーザーを傷つけます。将来的には、テーマを変更する必要がありますが、すべてのSEO構成が現在のテーマに密接に結合されているため、変更できません。これとは対照的に、設定がプラグインに保存されていれば、心配することなくテーマを変更することができます。

5)接頭辞(競合を防ぐ)

競合を防ぐには、テーマで作成されたすべての関数、クラス、グローバル変数の接頭辞を付ける必要があります。これは、ユーザーのwebサイトで他のコードが実行されているかどうかを知ることは不可能であるため、重要です。接頭辞を付けると、名前の衝突や致命的なエラーを防ぎます。

ダッシュやアンダースコアで区切られたテーマの名前は、ほとんどの場合接頭辞として機能します。テーマ名が非常に長い場合は、イニシャルが代わりに動作することができます。

Theme Name: Scaffoldclass Scaffold_Class {}function scaffold_function() {}global $scaffold_globalTheme Name: My Long Theme Nameclass MLTN_Class {}function mltn_function() {}global $mltn_global

6) コア機能を使用する

それが存在する場合は、ホイールを再発明するのではなく、常にコア機能を使用する必要があります。これには、サイドバー、ナビゲーションメニュー、投稿サムネイル、カスタムヘッダー、カスタム背景が含まれますが、これらに限定されません。これらの機能は、何百万人ものユーザーによってテストされ、積極的に維持され、改善されています。

コア関数の機能や出力を変更する必要がある場合は、WordPressが提供する多くのフックとフィルタのいずれかを使用することが可能です。たとえば、wp_nav_menu()には’walker’パラメータがあるため、出力を完全に制御できます。

7)データのエスケープとサニタイズ

テーマ開発者は、潜在的な悪用からユーザーを保護するために、データのエスケープとサニタイズに精通している必要があ

エスケープ

エスケープは、データが出力される前に安全であることを確認し、サニタイズはデータベースに保存される前にデータを確認するプロセスです。

WordPressには、データをエスケープするために使用できるヘルパー関数があるので、自分で構築する必要はありません。 esc_htmlは、エスケープ関数の一例です。これは、エスケープされていない出力がどのように見えるかです:

echo get_theme_mod( 'error_page_title' );

出力をエスケープするには、次のようにします:

echo esc_html( get_theme_mod( 'error_page_title' ) );

あなたが知っておくべき他のいくつかのエスケープ関数はesc_attr（）、absint（）、esc_url（）です。

単一の関数を使用して文字列を変換してエスケープすることもできます:

echo esc_html( __( '404 Not Found', 'my-custom-theme' ) );

となる:

echo esc_html__( '404 Not Found', 'my-custom-theme' );// oresc_html_e( '404 Not Found', 'my-custom-theme' );

ヒント：あなたが持っているテーマのどこにでもecho $エスケープする必要があるかどうかを確認する必要がありますが、通常はそうです。

サニタイズ

テーマに設定を追加する場合は、データベースに入る前に、ユーザーがそれらの設定に入力したデータが安全であることを確認する必要があります。 WordPressには、入力をサニタイズするのに役立つ多くの機能があります。

カスタマイザAPIを使用してテーマに設定を追加すると、サニタイズ関数の名前を受け入れる’sanitize_callback’というパラメータがあります。設定が取るすべての入力は、データベースに入る前に’sanitize_callback’に提供する関数によってチェックされます。

それはあなたの設定の一つでもsanitize_callbackが欠落している場合、それはWordPressのテーマディレクトリに受け入れられないことをsanitizationの重要性を強調しています。

$wp_customize->add_setting( 'my_custom_theme_setting', array( 'sanitize_callback' => 'sanitize_text_field' // A core sanitization function. ));

サニタイズとエスケープ機能の公式リストはここで見ることができます：データサニタイズ/エスケープ

ステップ＃9：WordPressテーマを配布する

テーマは、達成したい結果に応じて異なるチャネルを介して配布することができます。あなたの結果が単にオープンソースコミュニティに貢献することであれば、WordPressのディレクトリにテーマをアップロードするよりも、それを行うには良い方代わりに、あなたのテーマを販売し、直接お金を稼ぐために探している場合は、あまりにもそれを行う方法があります。

テーマ配信の主要サイトは次のとおりです。

1)WordPress.org （ダウンロードとユーザーを取得するのに最適な場所）

WordPressでテーマをホストする主な利点は、wordpressだけでなく、テーマが見られることから可視性が向上することです。orgのウェブサイトだけでなく、wp-adminダッシュボードにもあります。

WordPressでテーマをホストするもう一つの利点は、組み込みの更新システムです。テーマを更新すると、すべてのユーザーにwp-adminダッシュボード内で通知され、最新バージョンに更新するための簡単なパスが与えられます。

WordPress.org 唯一の無料のテーマを受け入れますが、それはあなたがお金を稼ぐことができないという意味ではありません。無料のテーマは、あなたのプレミアムテーマ、プラグインやサービスを促進するための素晴ら

2)WordPress.com

WordPress.com 無料とプレミアムの両方のテーマをホストします。しかし、彼らは数年前から新しい著者の提出に開放されていませんでした。

3)ThemeForest

themeforestはプレミアムテーマの主要な市場です。トップセラーテーマ（Avada）はsales5,000,000を超える売上高を持っています。

一般的に、テーマフォレストのバイヤーは、フル機能の”多目的”テーマを期待しています。トップテーマのすべては、ページビルダーの機能を持っており、開発者のチームによってサポートされています。新しい著者のために侵入するのは非常に難しい市場です。

4)Creative MarketとMojo Marketplace

Creative MarketとMojo Marketplaceはプレミアムテーマ市場の小さなプレーヤーであるため、それらをグループ化しました。彼らは両方とも効果的にThemeForestと同じサービスを提供しますが、小規模です。

5)Github

Githubは無料のテーマを公開する最も簡単な方法です。レビュープロセスはなく、従うべきガイドラインはありません。しかし、あなたはの可視性の恩恵を受けることはありませんwordpress.org また、ユーザーが最新バージョンを入手するための独自の更新メカニズムを構築する必要があります。

ステップ#10: コードのテストと改善

1)テーマのテスト

テーマ単体テスト

テーマ単体テストは、幅広いコンテンツタイプとエッジケースを含む標準のWordPressコンテン開発環境にアップロードするのは簡単で、見落とされている可能性のある多くのシナリオが強調表示されます。

WP_DEBUG

テーマ開発者として、WP_DEBUGを有効にしてテーマをテストすることは、最低限行う必要があります。 WP_DEBUGがtrueに設定されている場合、テーマはエラーや警告を返さないはずです。

テーマがサポートしているさまざまなPHPバージョンでテストを繰り返すことも重要です。 PHPの主要なリリースごとに、新しい変更、警告、および減価償却があります。 PHP5.6ではテーマにエラーがないことは珍しくありませんが、PHP7ではエラーが表示されます。

WP_DEBUGを有効にするには、wp-configに次のコードを追加します。php:

DEFINE( 'WP_DEBUG', true );

Monster Widget

Monster Widgetは、サイドバーに13個のコアウィジェットを一度に追加できる便利なプラグインです。コアウィジェットは、あなたのテーマをテストするためにそれらを完璧になり、HTML要素の様々なを使用しています。

テーマスニファ

テーマスニファは、テーマレビューチーム（TRT）によって作成されたプラグインです。これは、（すべてではないが）多くのエスケープとローカリゼーションエラーをキャッチします。また、WordPressのコーディング基準に対してテーマをチェックします。

2)あなたのテーマをに提出するWordPress.org

このガイドの冒頭で、あなたが最後に到達するまでに、あなたが提出できるテーマがあるだろうと述べましたwordpress.orgそのプロセスを見てみましょう。

アップロードプロセス

アップロードプロセスは簡単です。 WordPressアカウントを作成またはログインし、このページに移動します– https://wordpress.org/themes/upload/

あなたはあなたのテーマを圧縮し、今それをアップロードすることができますが、ここでは最初に知りたいかもしれないいくつかのものがあります。

要件

テーマレビューチーム(TRT)には厳しい要件があります。それはすべての要件を満たすまで、あなたのテーマは、ディレクトリに受け入れられません。

レビュープロセス

テーマをアップロードするとき、ディレクトリに受け入れる前に渡す必要がある二段階のレビュープロセスがあります。

まず、アップロードを押すとすぐに自動チェックが行われます。舞台裏では、自動化されたチェッカーは、テーマスニファプラグインと非常によく似た方法で動作します。エラーが見つかった場合は、テーマを拒否し、アップロードプロセスはそこで終了します。

あなたのテーマが自動チェックに合格した場合、それは人間のレビューを待っているテーマのキューに参加します。人間のレビューは、TRTからのボランティアによって完了します。キュー内のテーマの数はレビュアーの数をはるかに超えているため、テーマがキューの前に到達するまでに2-3ヶ月かかることがよくあります。

あなたのテーマはエラーフリーであり、人間のレビュー段階に達するまでにすべての要件に準拠していることが不可欠です。テーマは、人間のレビューの段階で拒否された場合、それは別の人間のレビューのために再び2-3ヶ月待っていることを意味し、背面にキューに再参加する必

TRTは常に新しいレビュアーを探しており、ボランティア活動は素晴らしい学習体験であり、オープンソースコミュニティに貢献する方法であることは注目に値します。

3)あなたのテーマリスト

おめでとう、あなたのテーマが承認されました！あなたは今、このように見えるあなた自身のリストを持っています。

このページで見ることができるものの概要は次のとおりです:

1. - スクリーンショット-スクリーンショットは、潜在的なユーザーが最初に見るものなので、できるだけ魅力的にします。しかし、それはまだテーマの正確な表現ではなく、photoshopのレンダリングでなければならないことを覚えておいてください。最も人気のあるテーマからインスピレーションを取る。
  - Description–スタイルから引き出された説明。cssはあなたのテーマを記述するのに理想的な場所であり、それは主要な機能です。また、ここで推奨または必要なプラグインを一覧表示するのに役立ちます。説明は、任意の書式設定（太字、斜体、ハイパーリンク）や改行さえサポートしていません。
  - タグ–これは、スタイルでリストしたタグの表現です。css。ここではこれらのタグのみが受け入れられます。
  - プレビューボタン–プレビューは次の方法で生成されますwordpress.org そして、テーマ開発者として、我々は出力を制御することはできません。残念なことに、プレビューアは基本的なコンテンツを使用し、構成を使用しないため、完全なプレビューにはなりません。
  - テーマホームページリンク–プレビューボタンのURLは、スタイルの”テーマURI”フィールドから取得されます。css。このURLは、テーマに関する情報を表示するページを表示するためにのみ使用する必要があるという厳しい要件があります。
  - アクティブインストール–これは、テーマを積極的に使用しているウェブサイトの数です。数は最も近い10、100、または1000に四捨五入されます。正確な数値を取得することはできません。
  - 一日あたりのダウンロード–これはあなたのテーマがダウンロードされた回数です。 “ダウンロード”は、新しいダウンロードまたはテーマの更新をすることができます。
  - Reviews-ユーザーがレビューを残すには、ユーザーにログインする必要がありますwordpress.org アカウント。一般的に言えば、ユーザーに明示的に提出するように依頼しない限り、レビューを取得するのは難しいです。
  - サポート–組み込みのサポートプラットフォームは、あなたのテーマの問題を管理し、解決するための素晴らしいです。サポートスレッドを作成するには、ユーザーがログインしている必要があります。
  - 翻訳–翻訳プラットフォームは素晴らしいリソースです。あなたのテーマをローカライズするには、このガイド全体のアドバイスに従っている場合は、ユーザーが他の言語に翻訳し、唯一の英語圏のユーザーを超えて、あな

4) テーマの更新

将来テーマを変更し、WordPressでホストされているバージョンを更新する必要がある場合、プロセスは簡単です。

まず、readmeの’Version:’フィールドとchangelogを更新します。txt。その後、ファイルを圧縮し、以前と同じアップロードページを使用して再アップロードします。

システムはそれを更新として認識し、別の人間のレビューを必要としないように自動的に承認します。

WordPressのカスタムテーマチュートリアル

WordPressのカスタムテーマチュートリアル

ステップ1：カスタムテーマに不可欠なファイルを作成する

スタイル。css

php

ナビゲーションメニューの追加

サイドバーの追加

注目の画像の追加

スタイルとスクリプトのエンキュー

タイトルタグ

ステップ3:テンプレートパーツを追加

に置き換えますステップ＃4：単数を追加します。php、アーカイブ。php、検索。php、および404。php

php

アーカイブ。php

を検索します。php

404.php

ステップ#5:補助ファイル

png

readme.txt

ステップ#6: ページテンプレートの作成

ステップ#7:テーマをRTLと互換性があるようにします。css

ステップ#8:常にベストプラクティスに従う

1)Starter Themesを使用する

2) WordPressのコーディング標準を知る

3) ローカリゼーションを使用

4)プラグイン機能の回避

5)接頭辞(競合を防ぐ)

6) コア機能を使用する

7)データのエスケープとサニタイズ

ステップ＃9：WordPressテーマを配布する

1)WordPress.org （ダウンロードとユーザーを取得するのに最適な場所）

2)WordPress.com

3)ThemeForest

4)Creative MarketとMojo Marketplace

5)Github

ステップ#10: コードのテストと改善

1)テーマのテスト

2)あなたのテーマをに提出するWordPress.org

3)あなたのテーマリスト

4) テーマの更新

Leave a Reply コメントをキャンセル

Leave a Reply

Leave a Reply
コメントをキャンセル