これは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>
</span><span><span><span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span>></span>
</span> <span><span><span><title>></title></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span> <span><span><span><link> 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></span>></span>
</span><span><span><span>></span>
</span>
<span><span><span><header>></header></span>
</span> <span><span><span><h1 id="gt">></h1></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span> <span><span><span><h3 id="gt">></h3></span><span><?php bloginfo('description'); ?></span><span><span></span>></span>
</span> <span><span><span></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></span>></span>
</span></span></span></span></span></span></span></span></span></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></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>
</span><span><span><span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span>></span>
</span> <span><span><span><title>></title></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span> <span><span><span><link> 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></span>></span>
</span><span><span><span>></span>
</span>
<span><span><span><header>></header></span>
</span> <span><span><span><h1 id="gt">></h1></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span> <span><span><span><h3 id="gt">></h3></span><span><?php bloginfo('description'); ?></span><span><span></span>></span>
</span> <span><span><span></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></span>></span>
</span></span></span></span></span></span></span></span></span></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>
</span><span><span><span> <span><span><?php language_attributes(); ?></span></span>></span>
</span><span><span><span>></span>
</span> <span><span><span><title>></title></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span> <span><span><span><link> 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></span>></span>
</span><span><span><span>></span>
</span>
<span><span><span><header>></header></span>
</span> <span><span><span><h1 id="gt">></h1></span><span><?php bloginfo('name'); ?></span><span><span></span>></span>
</span> <span><span><span><h3 id="gt">></h3></span><span><?php bloginfo('description'); ?></span><span><span></span>></span>
</span> <span><span><span></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></span>></span>
</span></span></span></span></span></span></span></span></span></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></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> id<span>="post-<span><?php the_ID(); ?></span>"</span>>
<span><span><span><h2 id="gt">></h2></span><span><?php the_title(); ?></span><span><span></span>></span>
</span> <span><span><span><div> class<span>="post-excerpt"</span>><span><?php the_excerpt(); ?></span><span><span></span></span>
</div></span>></span>
</span> <span><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></span></span>
これで、トップメニューリンクは、ブートストラップテーマのCSSで既に定義されているスタイルを利用できます。
dynamic header
ダイナミックヘッダー、つまり、フロントページ、他の選択したページ、またはアーカイブ用の別のヘッダーを使用できるようにするには、functions.phpファイルでdynamic_header（）関数を定義します。 'llは、訪問者がロードするページに応じてヘッダーマークアップを出力します。
したがって、header.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>get_header(); ?></span>
</span>
<span><span><?php </span></span><span> <span>if ( have_posts() ) : while ( have_posts() ): the_post(); ?></span>
</span>
<span><span><span><div> id<span>="post-<span><?php the_ID(); ?></span>"</span>>
<span><span><span><h2 id="gt">></h2></span><span><?php the_title(); ?></span><span><span></span>></span>
</span> <span><span><span><div> class<span>="post-excerpt"</span>><span><?php the_excerpt(); ?></span><span><span></span></span>
</div></span>></span>
</span> <span><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>
<span><span><?php get_footer(); ?></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>
</span><span><span><span>></span>
</span><span><span><span>></span>
</span><span><span><span><meta> charset<span>="<span><?php bloginfo( 'charset' ); ?></span>"</span>></span>
</span><span><span><span><meta> 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></span>></span>
</span>
<span><span><span> <span><span><?php body_class(); ?></span></span>></span>
</span>
<span><span><span><nav> class<span>="navbar navbar-default navbar-custom navbar-fixed-top"</span>></nav></span>
</span> <span><span><span><div> class<span>="container-fluid"</span>>
<span><span><span><div> class<span>="navbar-header page-scroll"</span>>
<span><span><span><a> href<span>="<span><?php echo esc_url( home_url( '/' ) ); ?></span>"</span> rel<span>="home"</span> class<span>="navbar-brand"</span>></a></span><span><?php bloginfo( 'name' ); ?></span><span><span></span>></span>
</span> <span><span><span></span></span></span></span>
</div></span>></span>
</span>
<span><span><span><div> class<span>="collapse navbar-collapse"</span> id<span>="bs-example-navbar-collapse-1"</span>>
<span><span><span><ul> class<span>="nav navbar-nav navbar-right"</span>></ul></span>
</span> <span><span><?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '%3$s' ) ); ?></span>
</span> <span><span><span></span>></span>
</span> <span><span><span></span></span></span></span>
</div></span>></span>
</span> <span><span><span></span></span></span>
</div></span>></span>
</span> <span><span><span></span>></span>
</span>
<span><span><span><div> class<span>="container"</span>>
<span><span><span><div> class<span>="row"</span>>
を表示します。フロントページ。それには位置があるので、固定されているので、私たちのウェブサイトのトップゾーンをオーバーレイして、そこにあるものは何でもカバーするので、トップメニューのオフセットを指定する必要があります。
<p>これをstyle.css：</p>に追加します
<p>
<em>これにより、#MainNav（メニューコンテナ）が上部から十分なオフセットがあることを確認するため、ユーザーがログインしてもカバーされません。WordPressは、これらの場合にログインと管理バークラスをボディに追加するので、簡単にターゲットにすることができます。</em>
</p>CSSで2つのケースに対処することがわかります。1つはデフォルト、もう1つは小さな画面用です。これは、WordPressがモバイルデバイス上のより広い管理バーを出力するため、46pxのオフセットを提供する必要があるためです。
<p>モバイルでは、レスポンシブなJavaScriptを搭載したドロップダウンメニューが必要です。
</p> <pre class="brush:php;toolbar:false"><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></span></span></span></span>
WordPressにコメントボックスを追加する方法Apr 20, 2025 pm 12:15 PM
WordPressからサブサイトをコピーする方法Apr 20, 2025 pm 12:12 PM
WordPressのヘッダーの書き方Apr 20, 2025 pm 12:09 PM
WordPressコメントを表示する方法Apr 20, 2025 pm 12:06 PM
WordPressのソースコードをアップロードする方法Apr 20, 2025 pm 12:03 PM
WordPressコードをコピーする方法Apr 20, 2025 pm 12:00 PM
WordPressにエラーがある場合はどうすればよいですかApr 20, 2025 am 11:57 AM
WordPressでコメントを閉じる方法Apr 20, 2025 am 11:54 AM
