http://my-website.com/2018/11/14/sapiente-ad-facilis-quo-repellat-quos/のような単一のポストURLにアクセスした場合 - 次のようなものが表示されます。
次に行うことは、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>
ログイン後にコピー
ダイナミックなトップメニューを備えたフロントページがログインしても見栄えが良くなることを確認する必要があります。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サイトにアップロードします。子供のテーマを使用している場合は、変更を失うことなく親のテーマを更新できます。子供のテーマを使用していない場合は、更新が変更を上書きするため、テーマを更新する前にテーマのバックアップを作成する必要があります。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
