これはindex.phpファイルです。今のところすべてのリクエストがキャッチされます：
<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>
これで、最小限のテーマをアップロードしてアクティブにします。 wp-cli：
を使用してアクティブ化します
テーマはWordPressに表示され、アクティブになりました：
スクリーンショットを提供していないため、バックエンドのディスプレイは基本的です。
ブラウザでウェブサイトにアクセスした場合、これが表示されるものです。
明らかに、やるべきことがあります。
ホームページのソースコードを表示すると、wp_head（）関数が
に多くのデフォルトのWordPressタグを出力していることがわかります。 >
bloginfo（）関数は、Webサイト情報を出力するために使用されます
ホームページは空っぽです。なぜなら、ループ内に何も出力していないからです。WordPressがすべてのテンプレートで使用してコンテンツを出力するパターンです。
ループに関するコーデックスページは、詳細に深く入ります。ループの典型的な構造 - これはphpに基づいているが、
制御構造のようになります：
コンテンツでループを埋める必要があります - またはコンテンツ出力WordPressタグで。
スタイルが適用されていないホームページに投稿のリストが表示されます。
<span><span><?php
</span></span><span><span>/**
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span><span>?></span>
</span>
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span><head</span>></span>
</span> <span><span><span><title</span>></span><span><?php bloginfo('name'); ?></span><span><span></title</span>></span>
</span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="<span><?php bloginfo('stylesheet_url'); ?></span>"</span>></span>
</span> <span><span><?php wp_head(); ?></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
<span><span><span><header</span>></span>
</span> <span><span><span><h1</span>></span><span><?php bloginfo('name'); ?></span><span><span></h1</span>></span>
</span> <span><span><span><h3</span>></span><span><?php bloginfo('description'); ?></span><span><span></h3</span>></span>
</span> <span><span><span></header</span>></span>
</span>
<span><span><?php
</span></span><span> <span>if ( have_posts() ) :
</span></span><span> <span>/* Start the Loop */
</span></span><span> <span>while ( have_posts() ) :
</span></span><span> <span>the_post();
</span></span><span> <span>endwhile;
</span></span><span> <span>endif;
</span></span><span> <span>?></span>
</span>
<span><span><span></body</span>></span>
</span>
WordPressには、デフォルトでブログページ（すべてのブログ投稿のアーカイブページ）が表示されます。
http://my-website.com/2018/11/14/sapiente-ad-facilis-quo-repellat-quos/のような単一のポストURLにアクセスした場合 - 次のようなものが表示されます。
<span><span><?php
</span></span><span><span>if ( have_posts() ) {
</span></span><span> <span>while ( have_posts() ) {
</span></span><span> <span>the_post();
</span></span><span> <span>//
</span></span><span> <span>// Post Content here
</span></span><span> <span>//
</span></span><span> <span>} // end while
</span></span><span><span>} // end if
</span></span><span><span>?></span>
</span>
私たちの
loop
、非常に粗雑ではありますが、実際には機能します。
テーマをファイルに構築し、ブートストラップマークアップを適用します
header.phpやfooter.php、さまざまな特殊なテンプレートなど、すべてがTwitterブートストラップマークアップを使用して、より簡単にスタイリングできるように、パーティシャルを実装するようになりました。
index.phpから始めて、ループの前後にすべてのコンテンツをget_header（）およびget_footer（）関数に置き換えます：
これは、言及した部分のすべてのコンテンツを提供する必要があることを意味します。
私たちが言ったことに沿って - Twitter Bootstrapテーマを使用すること - 私たちのheader.phpファイルは次のようになります：
footer.phpファイルは次のようになります<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>
次に行うことは、MITライセンスが付属しているStartBootStrap.comのClean BootstrapテンプレートのCSSとJavaScriptを含めることです。これにより、自由に使用できます。このように、私たちのテーマには事前定義されたスタイル、応答性が備わっています。
functions.php
functions.phpは、深刻なWordPressテーマが付属するファイルです。これは、貧しい人のプラグインアーカイブとして機能するファイルです。これにより、テーマにカスタム機能を含めることができます。
まず、このファイルを使用して、ブートストラップとブートストラップのテーマのスタイルとスクリプトを含めます。
これは、テーマにスクリプトとスタイルを含めるWordPress-Idiomaticの方法です。これにより、スクリプトの位置がエンキュー（ヘッダーvsフッター）とEnqueuingの優先順位を指定することができます。各特定のリソースの依存関係を他のリソースに指定することもできます。これにより、リソースが適切な順序でロードされるようになります。
ここでは、wp_enqueue_scriptsアクションフックを使用しています。 Codexで詳細を確認できます。 （前の記事でアクションフックを取り上げました。）
カスタムbsimple_scripts（）関数の内部 - これはwp_enqueue_scriptsアクションフックにフックします - 2つのWordPress関数を使用して、スクリプトとスタイル（wp_enqueue_script（）とwp_enqueue_style（）をロードします。リンクされた参照ページで指定されているこれらの機能の引数により、言及した柔軟性を完全に活用できます。
インターネット（Googleフォント）とテーマフォルダーからスタイルをロードしていることがわかります。したがって、テーマフォルダーにCSS、JS、およびWebFontsディレクトリを作成し、BootstrapテーマのCSS、JavaScriptファイル、Fontawesome Icon-Fontファイルをコピーします。
また、index.phpファイルをarchive.php、page.php、single.phpファイルにコピーします。これを変更します。
<span><span><?php
</span></span><span><span>/**
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span><span>?></span>
</span>
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span><head</span>></span>
</span> <span><span><span><title</span>></span><span><?php bloginfo('name'); ?></span><span><span></title</span>></span>
</span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="<span><?php bloginfo('stylesheet_url'); ?></span>"</span>></span>
</span> <span><span><?php wp_head(); ?></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
<span><span><span><header</span>></span>
</span> <span><span><span><h1</span>></span><span><?php bloginfo('name'); ?></span><span><span></h1</span>></span>
</span> <span><span><span><h3</span>></span><span><?php bloginfo('description'); ?></span><span><span></h3</span>></span>
</span> <span><span><span></header</span>></span>
</span>
<span><span><?php
</span></span><span> <span>if ( have_posts() ) :
</span></span><span> <span>/* Start the Loop */
</span></span><span> <span>while ( have_posts() ) :
</span></span><span> <span>the_post();
</span></span><span> <span>endwhile;
</span></span><span> <span>endif;
</span></span><span> <span>?></span>
</span>
<span><span><span></body</span>></span>
</span>今、私たちのテーマファイル構造は次のようになります：
マークアップの調整
ホームページにアクセスすると、上部にメニューが表示されますが、ページはまだ混乱していますが、ヘッダーの次の行がまだdivにラップされているメニューとそれ自体のULに出力されているためタグ、そのため、ブートストラップスタイルの影響を受けません：
これを解決するには、まずWP-Adminダッシュボードにアクセスして、カスタマイザーに新しいメニューを作成する必要があります。名前を付けます
トップメニュー。
https://uploads.sitepoint.com/wp-content/uploads/2018/11/1542595661customizer.mp4
これを行った後、header.phpファイルに移動します。これらの行を削除します。<span>/*
</span><span>Theme Name: Botega Simple Theme
</span><span>Theme URI: https://botega.co.uk
</span><span>Author: Tonino Jankov
</span><span>Author URI: https://botega.co.uk
</span><span>Description: Basic WordPress theme for Sitepoint theme building tutorial
</span><span>Text Domain: bsimple
</span><span>Version: 1.0.0
</span><span>License: GNU General Public License v2 or later
</span><span>*/
</span>
その代わりに、これらの行を置きます：
<span><span><?php
</span></span><span><span>/**
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> */
</span></span><span><span>?></span>
</span>
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span><head</span>></span>
</span> <span><span><span><title</span>></span><span><?php bloginfo('name'); ?></span><span><span></title</span>></span>
</span> <span><span><span><link</span> rel<span>="stylesheet"</span> href<span>="<span><?php bloginfo('stylesheet_url'); ?></span>"</span>></span>
</span> <span><span><?php wp_head(); ?></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>
<span><span><span><header</span>></span>
</span> <span><span><span><h1</span>></span><span><?php bloginfo('name'); ?></span><span><span></h1</span>></span>
</span> <span><span><span><h3</span>></span><span><?php bloginfo('description'); ?></span><span><span></h3</span>></span>
</span> <span><span><span></header</span>></span>
</span>
<span><span><?php
</span></span><span> <span>if ( have_posts() ) :
</span></span><span> <span>/* Start the Loop */
</span></span><span> <span>while ( have_posts() ) :
</span></span><span> <span>the_post();
</span></span><span> <span>endwhile;
</span></span><span> <span>endif;
</span></span><span> <span>?></span>
</span>
<span><span><span></body</span>></span>
</span>
これにより、DivタグとULタグの複製が削除されますが、Nav-ItemとNav-Linkをメニュー項目に適用する必要があります（それぞれLIとタグに）。これについてどのように進みますか？ WP_NAV_MENUはこれについての議論を提供しません。 nav_menu_link_attributesとnav_menu_css_classフィルターフックを使用します。これをfunctions.phpファイルに入れます：
<span><span><?php
</span></span><span><span>if ( have_posts() ) {
</span></span><span> <span>while ( have_posts() ) {
</span></span><span> <span>the_post();
</span></span><span> <span>//
</span></span><span> <span>// Post Content here
</span></span><span> <span>//
</span></span><span> <span>} // end while
</span></span><span><span>} // end if
</span></span><span><span>?></span>
</span>
ここで、header.php：
のwp_nav_menuで新しい属性を指定できます。
<span><span><?php
</span></span><span> <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
<span><span><span><div</span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span> <span><span><span><h2</span>></span><span><?php the_title(); ?></span><span><span></h2</span>></span>
</span> <span><span><span><div</span> class<span>="post-excerpt"</span>></span><span><?php the_excerpt(); ?></span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span>
</span>
<span><span><?php endwhile;
</span></span><span> <span>endif;
</span></span><span> <span>?></span>
</span>
これで、トップメニューリンクは、ブートストラップテーマのCSSで既に定義されているスタイルを利用できます。
dynamic header
ダイナミックヘッダー、つまり、フロントページ、他の選択したページ、またはアーカイブ用の別のヘッダーを使用できるようにするには、functions.phpファイルでdynamic_header（）関数を定義します。 'llは、訪問者がロードするページに応じてヘッダーマークアップを出力します。
したがって、header.phpファイルは次のように終了します
また、このような関数を定義します：
/**
*
* @package Botega_Scratch_Theme
*/
get_header(); ?>
<span><span><?php
</span></span><span> <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
<span><span><span><div</span> id<span>="post-<span><?php the_ID(); ?></span>"</span>></span>
</span> <span><span><span><h2</span>></span><span><?php the_title(); ?></span><span><span></h2</span>></span>
</span> <span><span><span><div</span> class<span>="post-excerpt"</span>></span><span><?php the_excerpt(); ?></span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span>
</span>
<span><span><?php endwhile;
</span></span><span> <span>endif;
</span></span><span> <span>?></span>
</span>
ループのように現在のすべてのURLまたはPOSTデータを使用できるようにするには、$ POST POST変数グローバルを宣言します。次に、フィラーヘッダーHTMLで異なるページまたはリクエストケースを埋めるだけで、後で終了します。これにより、真にダイナミックヘッダーの基礎が設定されます
ダイナミックなトップメニューを備えたフロントページがログインしても見栄えが良くなることを確認する必要があります。WordPressは、訪問者がログインしたときに
管理者バー<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * The header for our theme.
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> *
</span></span><span><span> */
</span></span><span><span>?></span>
</span><span><span><!DOCTYPE html></span>
</span><span><span><span><html</span>></span>
</span><span><span><span><head</span>></span>
</span><span><span><span><meta</span> charset<span>="<span><?php bloginfo( 'charset' ); ?></span>"</span>></span>
</span><span><span><span><meta</span> name<span>="viewport"</span> content<span>="width=device-width, initial-scale=1"</span>></span>
</span>
<span><span><?php wp_head(); ?></span>
</span><span><span><span></head</span>></span>
</span>
<span><span><span><body</span> <span><span><?php body_class(); ?></span></span>></span>
</span>
<span><span><span><nav</span> class<span>="navbar navbar-default navbar-custom navbar-fixed-top"</span>></span>
</span> <span><span><span><div</span> class<span>="container-fluid"</span>></span>
</span> <span><span><span><div</span> class<span>="navbar-header page-scroll"</span>></span>
</span> <span><span><span><a</span> href<span>="<span><?php echo esc_url( home_url( '/' ) ); ?></span>"</span> rel<span>="home"</span> class<span>="navbar-brand"</span>></span><span><?php bloginfo( 'name' ); ?></span><span><span></a</span>></span>
</span> <span><span><span></div</span>></span>
</span>
<span><span><span><div</span> class<span>="collapse navbar-collapse"</span> id<span>="bs-example-navbar-collapse-1"</span>></span>
</span> <span><span><span><ul</span> class<span>="nav navbar-nav navbar-right"</span>></span>
</span> <span><span><?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '%3$s' ) ); ?></span>
</span> <span><span><span></ul</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span></nav</span>></span>
</span>
<span><span><span><div</span> class<span>="container"</span>></span>
</span> <span><span><span><div</span> class<span>="row"</span>></span>
</span>を表示します。フロントページ。それには位置があるので、固定されているので、私たちのウェブサイトのトップゾーンをオーバーレイして、そこにあるものは何でもカバーするので、トップメニューのオフセットを指定する必要があります。
これをstyle.css：
に追加します
これにより、#MainNav（メニューコンテナ）が上部から十分なオフセットがあることを確認するため、ユーザーがログインしてもカバーされません。WordPressは、これらの場合にログインと管理バークラスをボディに追加するので、簡単にターゲットにすることができます。
CSSで2つのケースに対処することがわかります。1つはデフォルト、もう1つは小さな画面用です。これは、WordPressがモバイルデバイス上のより広い管理バーを出力するため、46pxのオフセットを提供する必要があるためです。
モバイルでは、レスポンシブなJavaScriptを搭載したドロップダウンメニューが必要です。
<span><span><?php
</span></span><span><span>/**
</span></span><span><span> * Footer template partial
</span></span><span><span> *
</span></span><span><span> * <span>@package Botega_Scratch_Theme
</span></span></span><span><span> *
</span></span><span><span> */
</span></span><span><span>?></span>
</span> <span><span><span></div</span>></span>
</span> <span><!-- /.row -->
</span> <span><span><span></div</span>></span>
</span> <span><!-- /.container -->
</span>
<span><!-- Footer -->
</span> <span><span><span><footer</span>></span>
</span> <span><span><span><div</span> class<span>="container"</span>></span>
</span> <span><span><span><div</span> class<span>="row"</span>></span>
</span> <span><span><span><div</span> class<span>="col-lg-8 col-md-10 mx-auto"</span>></span>
</span> <span><span><span></div</span>></span>
</span> <span><span><span></div</span>></span><!-- /.row -->
</span> <span><span><span></div</span>></span><!-- /.container -->
</span> <span><span><span></footer</span>></span><!-- /footer -->
</span>
<span><span><?php wp_footer(); ?></span>
</span>
<span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
結論
WordPressテーマをゼロから作成するこの2番目の部分では、非常に基本的なWordPressテーマを作成し、ブートストラップスタイルとスクリプトを含めました。事前定義されたスタイルに合うようにメニューの出力を調整しました。また、ヘッダーとフッターの出力をそれぞれの部分に分離しました。functions.phpファイル - テーマ開発の重要なファイル - は、紹介してレバレッジした別のトピックです。ヘッダー出力は独自の関数に分離されており、ページ訪問の詳細とサイト所有者が定義した変数を使用して、最終出力を決定します。
ガイドの第3部では、特定のテンプレートの構築を完了し、テーマ機能と部分的な構造をより良い構造にし、ウェブサイトのスタイリングを完了します。
このシリーズには、WordPressテーマの構築に関する3つの記事がゼロからあります。
テーマの構造を理解してください
テーマの基本
- テーマの改良
-
WordPressテーマをゼロから構築することについてのよくある質問（FAQ） WordPressテーマをゼロから構築するための前提条件は何ですか？
WordPressテーマの構築をゼロから始める前に、HTML、CSS、PHP、およびJavaScriptを基本的に理解する必要があります。これらは、WordPressテーマ開発で使用されるコアテクノロジーです。さらに、ファイル構造やテンプレート階層など、WordPressプラットフォーム自体に精通している必要があります。また、MAMPやXAMPPなどのコンピューターにローカル開発環境をセットアップすることも役立ちます。ここで、テーマを構築するときにテーマをテストできます。 🎜>WordPressテーマをゼロから作成する最初のステップは、WordPressテーマフォルダーに新しいディレクトリを作成することです。これは、すべてのテーマファイルのホームになります。次に、style.cssファイルとindex.phpファイルを作成する必要があります。 style.cssファイルは、すべてのCSSコードを記述する場所であり、テーマの詳細を定義する場所でもあります。 index.phpファイルは、テーマのメインテンプレートファイルです。 Webサイトのレイアウトを生成するPHPおよびHTMLコードを作成する場所です。テーマディレクトリにfunctions.phpファイルを作成します。このファイルはプラグインのように機能し、テーマにカスタム機能と機能を追加できます。ナビゲーションメニューの登録、サイドバー、エンキュースタイルとスクリプトなどを登録するために使用できます。 'LLは、CSSコードでメディアクエリを使用する必要があります。メディアクエリを使用すると、ユーザーの画面のサイズに応じてさまざまなスタイルを適用できます。これは、デスクトップ、タブレット、モバイルデバイスの別のレイアウトを作成できることを意味します。また、画像が応答性が高いことを確認する必要があります。これは、幅を100％に設定することで行うことができます。WordPressテーマのヘッダーとフッターをカスタマイズするにはどうすればよいですか？
テーマディレクトリにheader.phpファイルとfooter.phpファイルを作成して、WordPressテーマのヘッダーとフッターをカスタマイズできます。 。 header.phpファイルは、ヘッダーのHTMLおよびPHPコードを記述し、footer.phpファイルはフッター用のコードを記述する場所です。次に、これらのファイルを他のテンプレートファイルにget_header（）およびget_footer（）関数を使用して含めることができます。 functions.phpファイルでregister_post_type（）関数を使用して、WordPressテーマのカスタム投稿タイプ。この関数を使用すると、独自のラベル、機能、機能を備えた新しい投稿タイプを定義できます。次に、シングル{postType} .phpファイルとarchive- {posttype} .phpファイルを作成して、カスタム投稿タイプの表示を制御できます。
テーマディレクトリにSideBar.phpファイルを作成し、functions.phpファイルでregister_sidebar（）関数を使用して、WordPressテーマにサイドバーを追加できます。その後、get_sidebar（）関数を使用して他のテンプレートファイルにサイドバーを表示できます。 functions.phpファイルでregister_nav_menus（）関数を使用して、wordpressテーマ。この関数を使用すると、テーマに1つ以上のナビゲーションメニューを登録できます。次に、wp_nav_menu（）関数を使用して他のテンプレートファイルにメニューを表示できます。 index.phpファイルまたはその他のテンプレートファイルのループコードを変更します。ループは、WordPressが投稿するために使用するPHPコードです。カスタマイズして、投稿の表示方法、表示される投稿の数などを変更することができます。テーマファイルに、その後、WordPressサイトにアップロードします。子供のテーマを使用している場合は、変更を失うことなく親のテーマを更新できます。子供のテーマを使用していない場合は、更新が変更を上書きするため、テーマを更新する前にテーマのバックアップを作成する必要があります。
