ホームページ >CMS チュートリアル >＆＃＆プレス >WordPressテーマをゼロから構築する方法：最終的なステップ

WordPressテーマをゼロから構築する方法：最終的なステップ

Christopher Nolanオリジナル: 2025-02-09 09:42:13889ブラウズ

この記事では、テンプレートの洗練、メタ情報の追加、サムネイル後のポスト、サイドバー、ユーザーフレンドリーなコントロールなどに焦点を当てて、WordPressテーマをゼロから構築するための進出を完了します。

これは、WordPressテーマの構築に関するWordPressシリーズの3番目と最後の部分です。パート1は、WordPressテーマを導入し、パート2で基本的なテーマを作成しました。 StartBootStrapによるクリーンブログテンプレートを使用して、WordPressテーマにスタイルを追加しました。これまでに書いたコードは、githubで入手できます。キーテイクアウト

「functions.php」を使用してテーマ固有の関数を追加し、クリーナー構造のためにコードを個別のファイルに効果的に編成します。 `single.php`や` index.php`。

などのさまざまなテンプレートにわたって一貫性のあるモジュラーHTML構造のテンプレートパーツを実装「functions.php」を介して複数のサイドバーとウィジェット領域を登録して、WordPressウィジェットを介して動的なコンテンツ管理を許可します。

WordPressカスタマイザーAPIを使用してサイトの外観とレイアウトを動的にカスタマイズし、背景画像などのユーザーフレンドリーなコントロールを可能にします。

テンプレート階層原理を使用して、構造化された特定のコンテンツディスプレイに `get_template_part`を使用して、シングル投稿とページのカスタマイズを拡張します。

前の記事では、タグ（オープニングワン）をheader.phpに分離し、それに。これにより、ページ、投稿、ログインしているかどうかなどを示すセマンティッククラスがボディに追加されます。物事。
ホームページにアクセスしてブラウザコンソールを開いてこれらのクラスを検査すると、これらのクラスに現在のテンプレート情報が不足していることがわかります。
WordPressが表示するものを変更できるようにするには、どのファイルが使用されているかを知る必要があります。この場合、index.phpはデフォルトのフォールバックテンプレートとして使用されます。このインフォグラフィックは、使用されているテンプレートの階層を示しています。テーマをオーバーライドまたは作成すると非常に便利です。

前の記事では、archive.phpループの洗練を開始し、メタ情報を追加し、出力された記事にサムネイルをポストしました。そのループを別のファイルに分離し、それをarchive.phpとindex.phpに含めて、それを精製します。
まず、両方のファイルのコンテンツ
を、部分的なファイルを要求する単一の行での両方のファイルの間に置き換えます。それを完了したら、archive.phpで置き換えたコンテンツをpartials/content.phpファイルに配置します：

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>

これらの変更をサーバーにアップロードすると、投稿リストの各投稿にフロントページがメタ情報を持っていることがわかります。日付と著者のリンク：

<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>

これは、私たちの部分的な機能が機能することを意味します WordPressテーマをゼロから構築する方法：最終的なステップサムネイル

を投稿します

偽の投稿には、一般的に画像があり、特に画像が特に画像が表示されていないことがわかります。 WordPressダッシュボードにアクセスして、

注目の画像

を投稿/ページに追加しようとすると、右端のサイドバーにファイルアップロードフィールドがないことがわかります。（WordPressに不慣れな人のために、この機能の詳細についてはこちらを読むことができます。）

ポストサムネイルは、WordPressテーマではデフォルトでは有効になりません。これは、新しいテーマで特にオンにする必要がある機能です。ほとんどのテーマには有効になっています。 これを行うには、add_theme_support（ '後のサムネイル'）を含めます。 functions.php。への行 今ではサムネイルが有効になります。

wp-cliコマンドWPサイトを使用してすべてのコンテンツのWordPressインストールを空にすることができます - Allow-Root（またはWordPressダッシュボードから手動で実行できます）、FakerPressで再貯蔵します。インターネットからつかむ注目の画像で投稿とページを記入する必要があります。（前のようにトップメニューを再作成して、ページと投稿を割り当てる必要があります。）

1つのヒント：販売用のテーマを構築している場合、または一般的により多くの視聴者にリリースされるテーマを構築する場合、Automatticが提供するテーマ単位テストデータを使用したい場合があります。より広い範囲のケースとテーマの詳細をテストするためのコンテンツ。

FakerPressに画像サイズを指定できますが、おそらく厄介な外観になります。

テーマを作成するとき、洗練された標準化された外観を実現するために使用されるテクニックの1つは、

サムネイルサイズを指定することです。これらは標準サイズですWordPressは、アップロードされたすべての画像を適合するようにサイズ変更します。 wordpress

add_image_size（）

関数を使用して、テーマが使用する画像サイズをいくつか追加します。

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>

content.php：で the_post_thumbnail（）

を使用して、フォーマットされた画像を出力します。

<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>

アーカイブまたはブログリストで適切にフォーマットされた抜粋を実現するには、フォントサイズを増やしますが、これを行うには、the_excerpt（）によって出力される単語の数を減らします。 ：

<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>

画像を浮かぶことができるように（先ほど述べたサムネイル）と抜粋するには、CSSの親要素セレクターに以下を追加します。

<span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>the_post_thumbnail( 'small-list-thumb-1');
</span></span><span>    <span>?></span>
</span><span><span><span></a</span>></span>
</span>

（ここでは、テーマ自体にとって重要ではない小さなスタイリング調整をカバーしません。）

今、私たちはフォントのサイズを増やし、画像を浮かんで（親要素とともに）、画像の周りに抜粋を浮かせることができます：

WordPressテーマをゼロから構築する方法：最終的なステップ

後でPost_thumbnailsも使用します。単一の投稿/ページで

テーマのサイドバー

テーマのサイドバーは、テーマのウィジェット領域です。これらの領域に異なるウィジェットを配置できるように、WordPressシステムに登録する必要があります。それを行うと、これらのウィジェットをテンプレートファイルに印刷します。

テーマには、テーマのGitHubリポジトリに表示される多数のサイドバーをテーマに登録します。これを行い、次のコードをfunctions.phpに追加します：

ここでは、2つのサイドバーを登録する方法を示します。 Register_sideBar（）関数の詳細については、wordpress.org。

11のサイドバーを登録しますが、すべてのページテンプレートまたはWebサイトの場所にこれらすべてを出力する必要はありません。現在カスタマイズされているページに出力されている場合、ウィジェットの下の

<span># functions.php
</span><span>function custom_excerpt_length( $length ) {
</span>    <span>return 40;
</span><span>}
</span><span>add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
</span>

customizer

にアクセスできます：

フッター内のサイドバーまたはウィジェット領域の実際の出力の例を示します。これは、グローバルに表示できることを意味します。

WordPressテーマをゼロから構築する方法：最終的なステップここでは、上記のbottom_center_sidebarのregister_sidebar関数で使用したサイドバーIDを使用します。また、アクティブウィジェットを備えたサイドバーがあるかどうかに応じて、ホームページ上の中央コンテンツコンテナの幅を条件付けました（is_active_sidebar（））：

これらの条件に依存してブートストラップクラスを出力し、

<span><span>.home .post-preview.post</span> {
</span>    <span>overflow: hidden;
</span><span>}
</span>

Home

。

これらのウィジェット領域にウィジェットと画像を埋めた後、これは私たちが得るものです：

<span>// Register custom sidebars
</span><span>function sidebar_register() {
</span>
    <span>$args = array(
</span>        <span>'name'          => __( 'home_header', 'bsimple' ),
</span>        <span>'description'   => __( 'home_header', 'bsimple' ),
</span>        <span>'id'            => 'h_h',
</span>        <span>'class'         => 'home_header',
</span>        <span>'before_widget' => ' <div >',
</span>        <span>'after_widget'  => '</div>',
</span>        <span>'before_title'  => '<h2 >',
</span>        <span>'after_title'   => '</h2>',
</span>    <span>);
</span>    <span>register_sidebar($args);
</span>
    <span>$args = array(
</span>        <span>'name'          => __( 'archive_sidebar_1', 'bsimple' ),
</span>        <span>'description'   => __( 'Archive Sidebar no 1', 'bsimple' ),
</span>        <span>'id'            => 'a_s_1',
</span>        <span>'class'         => 'archive_sidebar_1',
</span>        <span>'before_widget' => ' <div >',
</span>        <span>'after_widget'  => '</div>',
</span>        <span>'before_title'  => '<h2 >',
</span>        <span>'after_title'   => '</h2>',
</span>    <span>);
</span>    <span>register_sidebar($args);
</span>
    <span>$args = array(
</span>        <span>'name'          => __( 'bottom_center_sidebar', 'bsimple' ),
</span>        <span>'description'   => __( 'Bottom Center Sidebar', 'bsimple' ),
</span>        <span>'id'            => 'b_c_s',
</span>        <span>'class'         => 'bottom_center_sidebar',
</span>        <span>'before_widget' => '<div >',
</span>        <span>'after_widget'  => '</div>',
</span>        <span>'before_title'  => '<h2 >',
</span>        <span>'after_title'   => '</h2>',
</span>    <span>);
</span>    <span>register_sidebar($args);
</span>
<span>}
</span><span>add_action( 'widgets_init', 'sidebar_register' );
</span>

テーマはうまく形作られています。もちろん、読者はスタイリングを自分の好みに合わせて適応させます。 CustomizerAPI

スタイリングについて話すときは、カスタマイザーAPIに言及し、それを使用してヘッダーの背景画像のユーザーフレンドリーな制御を提供する方法を示します。新しい

パネル、セクション、コントロールのテーマ（functions.php）：

ここでの主なことは、customize_registerフックと$ wp_customizeメソッド（add_panel、add_section、add_setting、add_control。注文問題の順序です。WordPressCodexにはカスタマイザーAPIの詳細なリファレンスがあります。

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>

functions.phpに設定とコントロールを追加したら、スクリプトとスタイルを排除するために作成したbsimple_scripts（）関数の下部に次のコードを追加します。

ヘッダーコンテナにPhome、PFront、Pglobalのクラスを追加しました。これで、

wp_add_inline_style（）

と、最初にベーステーマスタイルを囲むために使用したbsimpleスタイルのハンドルを使用して、作成したカスタマイザー設定を出力します。 get_theme_mod（）を使用して、登録した各設定を取得しますこの方法では、ガイドのパート2

<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>

でdynamic_header（）関数に分離したヘッダーの画像を設定できます。

シングルページと投稿

WordPressテンプレート階層は、訪問時にロードされる正確なURLと投稿をターゲットにするのに役立ち、これらのそれぞれのHTML出力をアトミックに設計できるようにします。多くの場合、すべてのテンプレートを作成する必要はありません。すべての投稿またはページに一般的な背景画像を追加することは、あまり意味がありません。そのため、カスタマイザー戦略は、アーカイブ、投稿のブログリスト、フロントページ、さらには用語でも機能します。ただし、特定のページや投稿については、おそらく画像を個別に設定する必要があります。

これをどのように行うのですか？ dynamic_header（）関数では、

ページのヘッダーを特定しました。したがって、インラインスタイルとget_the_thumbnail_url（）関数を使用してページを設定して '

<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>

機能画像ヘッダーの背景として：

これで、ユーザーはすべてのページにヘッダー画像を設定できます。 IS_Single（）ケースでも同じことができます。これは、カスタム投稿タイプを含むすべての投稿に同じソリューションを適用します。

カスタムフィールドセクションが表示されない場合は、編集画面の右隅にある画面オプションを介して有効にすることができます。

<span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>the_post_thumbnail( 'small-list-thumb-1');
</span></span><span>    <span>?></span>
</span><span><span><span></a</span>></span>
</span>

これが完了した後、subtitle_メタフィールドがシングルページのページタイトルの下に表示されます。

これらすべてのもの、およびスタイルは、

<span># functions.php
</span><span>function custom_excerpt_length( $length ) {
</span>    <span>return 40;
</span><span>}
</span><span>add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );
</span>

投稿にも適用できます。ここでは、MX-Autoクラスを中心とした10/12幅の単一列レイアウトを使用しています。 Partial ContentSingle.phpを使用して、実際のコンテンツを出力します。この部分では、the_content（）およびwp_link_pages（）：

<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span>
</span><span><span>get_header(); ?></span>
</span>
    <span><span><?php
</span></span><span>    <span>if ( have_posts() ) : while ( have_posts() ): the_post();
</span></span><span>
</span><span>                <span>get_template_part( 'partials/content', get_post_type() );
</span></span><span>
</span><span>        <span>endwhile;
</span></span><span>    <span>endif;
</span></span><span>    <span>?></span>
</span>
<span><span><?php get_footer(); ?></span>
</span>

を使用します

これで、シングルページと投稿の基本的な最小値がありますが、WordPress関数を使用してさらに追加できます。単一の投稿、単一ページ、特定のカテゴリなどに属するページにWordPressに出力する詳細を自動的に指定できます。

グローバルウィジェットとフッター

<span><span><span><div</span> <span><span><?php post_class( 'post-preview' ); ?></span></span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span>
<span><span><span><header</span> class<span>="entry-header"</span>></span>
</span>    <span><span><?php
</span></span><span>    <span>if ( is_singular() ) :
</span></span><span>        <span>the_title( '<h1 >', '</h1>' );
</span></span><span>    <span>else :
</span></span><span>        <span>the_title( '<h2 ><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
</span></span><span>    <span>endif;
</span></span><span>
</span><span>    <span>if ( 'post' === get_post_type() ) :
</span></span><span>        <span>?></span>
</span>        <span><span><span><div</span> class<span>="entry-meta"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>bsimple_posted_on();
</span></span><span>            <span>bsimple_posted_by();
</span></span><span>            <span>?></span>
</span>        <span><span><span></div</span>></span><!-- .entry-meta -->
</span>    <span><span><?php endif; ?></span>
</span><span><span><span></header</span>></span><!-- .entry-header -->
</span>
        <span><span><span><a</span> class<span>="post-thumbnail"</span> href<span>="<span><?php the_permalink(); ?></span>"</span> aria-hidden<span>="true"</span> tabindex<span>="-1"</span>></span>
</span>            <span><span><?php
</span></span><span>            <span>the_post_thumbnail( 'post-thumbnail', array(
</span></span><span>
</span><span>            <span>) );
</span></span><span>            <span>?></span>
</span>        <span><span><span></a</span>></span>
</span>
        <span><span><?php the_excerpt(); ?></span>
</span>
<span><span><span></div</span>></span>
</span>

フッター用の3つのウィジェット（サイドバー）領域を作成し、footer.phpに出力を追加しました。また、フッタータグのすぐ上にセクション（またはウィジェット領域）を追加しました。これらのウィジェットは、ホームページ、ページ、またはアーカイブに固有のものではありませんが、かなりグローバルです。ウィジェットを割り当てたら、サイト全体でサイト全体で表示されます

私たちが得るのは、ウィジェットを入力できるシンプルな底部とフッター領域です：

<span>add_image_size( 'list-thumb-1', 730, 400, true);
</span><span>add_image_size( 'small-list-thumb-1', 400, 200, true);
</span><span>add_image_size( 'small-list-thumb-2', 300, 200, true);
</span><span>add_image_size( 'small-list-thumb-3', 220, 140, true);
</span>

コンテンツを表示するために使用できる最小限の機能的なテーマがあります。

このガイドはここで停止しますが、次に将来のテーマビルダーがやりたいと思うかもしれませんが、すべてのユースケースがカバーされ、テーマが100％フル機能があることを確認することです。そうするために、テーマチェックプラグインを他のツールの中にインストールして、テーマが不足しているものを調べ、すべてが基準に達していることを確認してください。

WordPressテーマをゼロから構築する方法：最終的なステップ

結論

このガイドは、WordPressテーマビルディングの徹底的な紹介を目的としています。それは、すべての基本的なWordPressテーマビルディングの概念をすべて紹介し、それらがどのように一緒になるかを示すことを願っています。

しかし、まだ学ぶべきことがあります - コメントの部分、著者のテンプレート、404ページ、その他多くの小さな詳細は、このテーマでより専門的になりたいならカバーする必要があります。このシリーズの最初のコードはこちらのGithubで入手できます。このガイドで作成したテーマの最終バージョンはこちらから入手できます。これらの基礎では、包括的なWordPress Codexの助けを借りて、さらに多くの基礎を構築できます。

このシリーズには、WordPressテーマの構築に関する3つの記事がゼロからあります。

WordPressテーマをゼロから構築する方法：最終的なステップテーマの構造を理解してください

テーマの基本

テーマの改良

WordPressテーマをゼロから構築することについてよく尋ねる質問

WordPressに

ラッパーなしで指定されたページIDのコンテンツを表示するにはどうすればよいですか？スタイリング目的のための

タグ。ただし、

ラッパーなしでコンテンツを表示する場合は、「the_content」フィルターを使用できます。このフィルターを使用すると、データベースから取得した後、画面に印刷される前に、投稿のコンテンツを変更できます。このフィルターを使用して

タグを削除する方法の簡単な例は次のとおりです。 ;
}
add_filter（ 'the_content'、 'remove_p_tags'）;
このコードは、投稿コンテンツからすべての

タグを削除します。これはすべての投稿に影響を与えることに注意してください。

フロントページがWordPressにロードされないのはなぜですか？。いくつかの一般的な問題とその解決策は次のとおりです。間違った設定：WordPressの設定を設定>読み取りの下で確認し、正しいページがフロントページとして設定されていることを確認してください。テーマの問題：問題はあなたのテーマにある可能性があります。デフォルトのWordPressテーマに切り替えてみて、問題が持続しているかどうかを確認してください。プラグインの競合：プラグインが互いに競合したり、テーマと競合したりして、フロントページがロードされない場合があります。すべてのプラグインを非アクティブにしてから、問題のあるプラグインを特定するためにそれらを1つずつ再アクティブ化してみてください。破損した.htaccessファイル：破損した.htaccessファイルもこの問題を引き起こす可能性があります。 .htaccessファイルを.htaccess_oldのようなものに名前を変更してみて、それが問題を解決するかどうかを確認してください。

これらのソリューションが機能しない場合は、ホスティングプロバイダーまたはWordPressの専門家にさらなる支援に連絡することをお勧めします。。

WordPressのポップアップにコンテンツを表示するには、投稿IDを取得するにはどうすればよいですか？

ポップアップに投稿のコンテンツを表示することは、WordPress関数とJavaScriptの組み合わせを使用して実現できます。これを行う方法の基本的な例は次のとおりです。

最初に、投稿IDを取得する必要があります。 WordPressでget_the_id（）関数を使用してこれを行うことができます。この関数は、ループの現在の投稿のIDを返します。 get_post_field（）関数を使用してこれを行うことができます。この関数は、特定のフィールドの値を投稿から取得します。この場合、「post_content」フィールドを取得したい。ポップアップ。 Alert（）関数を使用した簡単な例は次のとおりです。すべての状況で完全に機能します。より堅牢なソリューションについては、ポップアップを作成するためにプラグインまたはより高度なJavaScriptライブラリを使用することを検討することをお勧めします。

以上がWordPressテーマをゼロから構築する方法：最終的なステップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Yootheme ProでWordPress Webサイトをスピードアップします次の記事：Yootheme ProでWordPress Webサイトをスピードアップします

続きを見る

WordPressテーマをゼロから構築する方法：最終的なステップ

テンプレート階層原理を使用して、構造化された特定のコンテンツディスプレイに `get_template_part`を使用して、シングル投稿とページのカスタマイズを拡張します。

を投稿/ページに追加しようとすると、右端のサイドバーにファイルアップロードフィールドがないことがわかります。 （WordPressに不慣れな人のために、この機能の詳細についてはこちらを読むことができます。）

テーマの基本

関連記事

を投稿/ページに追加しようとすると、右端のサイドバーにファイルアップロードフィールドがないことがわかります。（WordPressに不慣れな人のために、この機能の詳細についてはこちらを読むことができます。）