WordPressは、Web上のサイトの大部分で使用されます。さまざまな種類のサイトを作成することができますが、Webサイトの最も重要なコンポーネントの1つは常にホームページです。完璧なランディングページは、直帰率を引き下げ、トラフィックと顧客を後押しするのに役立ちます。この記事では、WordPress Webサイトのカスタムホームページ（またはランディングページ）を作成する方法について説明します。 この目標を達成するには多くの方法がありますが、これは
の1つの方法です。 この記事で説明するものの概要概要
最初に、これらの基本的な手順を完了します：
WordPressのインデックスページにスライダーを表示します
- 製品の説明を表示するための3つのパネルを表示します。
- 畫像とテキストを並べて製品の詳細を含む2つの行を表示します。 チームメンバーを見せて パネル。
- 次に、次の高度なトピックを見ていきます
- 別のページからコンテンツを取得します（たとえば、About Usページから）。 フロントページのみのサイドバーを作成します。
最も重要な側(cè)面は、「WordPress Customizer」オプションからスライダーの畫像を変更できることです。スライダーを追加したり、畫像のスライドショーを作成したりするためのプラグインは必要ありません。
- 必要なもの
- テーマのオプションを提供するためのKirki Toolkit。
- スライダーオプションを提供するためのFlexSlider。
- マリア?アントニエッタ?ペルナは、このトピックに関する良い紹介を探しているなら、前の記事でkirkiをカバーしました。
キーテイクアウト
-
WordPressカスタマイザーを使用して、追加のプラグインを必要とせずにスライダーやサイドバーなどの要素を簡単に変更して、WordPressホームページを最適化します。
- Kirki Toolkitを使用してWordPressカスタマイザーの機能を強化し、最小限のコーディングで高度なカスタマイズを可能にします。 「ライブラリ」フォルダー內(nèi)にテーマファイルを整理して、より良い管理とモジュール性を整理することにより、設(shè)計プロセスを合理化します。
- FlexSliderを使用して視覚的に魅力的な製品スライダーを作成します。テーマに直接統(tǒng)合されて、主要な製品や機能をホームページで際立たせて紹介します。 ホームページにカスタムテンプレートを使用して、メインインデックスファイルを変更せずに他のページと區(qū)別する一意のレイアウトを維持します。
- カスタイザー內(nèi)のパネル、セクション、フィールドなどのUIコンポーネントを追加および管理するために、Kirkiのパワーを活用して、ユーザーの相互作用と経験を強化します。 チームショーケース、詳細な製品の説明、インタラクティブなスライダーなどの動的な要素を含めることにより、ホームページが有益で魅力的であることを確認してください。
- note
- モジュール性のために、ライブラリという名前のフォルダーを作成し、必要なコンポーネントのみを簡単に編集できるように、すべての関數(shù)ファイルを內(nèi)部に配置しました。 Githubで私のテーマをフォークしてください。このテーマでは、functions.phpファイルからライブラリフォルダー內(nèi)のすべてのファイルを呼び出しました。このテーマにFoundation CSSフレームワークを使用しました
- このチュートリアルで最も編集するライブラリフォルダー內(nèi)にTheme-Options.phpという名前のファイルがあります。お気に入りのテキストエディターでそのファイルを開き、手を汚す準備をしてください！ kirki
- kirkiはフレームワークではありません。これは、WordPress開発者がカスタマイザーを使用し、コードを抽象化し、誰もが美しく意味のあるユーザーエクスペリエンスを簡単に作成できるようにすることで、その高度な機能と柔軟性を活用できるツールキットです。
githubからkirkiファイルをダウンロードし、テーマフォルダーの內(nèi)側(cè)に「kirki」という名前のフォルダーに入れます。
最初に、新しい構(gòu)成を作成する必要があります。構(gòu)成には一意のIDがあり、同じconfig_idを使用するすべてのフィールドはその構(gòu)成のプロパティを継承します。構(gòu)成を追加すると、パネル、セクション、フィールドを追加できます。フィールドを追加できるようにするには、カスタマイザーに少なくとも1つのセクションが必要であることに注意してください。フィールドは「孤児」になることはできません。セクションにグループ化する必要があります。
構(gòu)成
Kirkiを使用すると、プラグインまたはテーマの構(gòu)成を作成し、IDでグループ化できます。その後、そのIDにリンクされているすべてのフィールドは、構(gòu)成プロパティを継承します。
<span>Kirki<span>::</span>add_config( 'my_theme', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'my_theme', </span><span>) );</span>
- 機能：有効なWordPress機能。詳細については、WordPress Codexを參照してください
- option_type：optionまたはtheme_mod。 のいずれかにすることができます
- option_name：テーマmodの代わりにオプションを使用している場合は、これを使用してオプション名を指定できます。その後、すべてのフィールドは、WordPressデータベースのそのオプションの下にある配列として保存されます。
- パネル
セクション
セクションはフィールドのラッパーであり、複數(shù)のフィールドをグループ化する方法です。すべてのフィールドはセクションに屬している必要があり、フィールドは孤児ではありません。
<span>Kirki<span>::</span>add_panel( 'panel_id', array( </span> <span>'priority' => 10, </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span><span>) );</span>
フィールド
フィールドは、ユーザーがその內(nèi)部にカスタムテキストを入力できるように提供されるテキストボックスやチェックボックスなどのオプションです。各フィールドは、特定のセクションのみに関連付けられている必要があります。
<span>Kirki<span>::</span>add_section( 'section_id', array( </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span> <span>'panel' => '', // Not typically needed. </span> <span>'priority' => 160, </span> <span>'capability' => 'edit_theme_options', </span> <span>'theme_supports' => '', // Rarely needed. </span><span>) );</span>十分に紹介しています。次に、テーマをカスタマイズしましょう！
kirkiをテーマに統(tǒng)合します
最初にする必要があるのは、Kirkiをテーマと統(tǒng)合することです。これを行うには、ライブラリフォルダーにあるTheme-Options.phpファイルを開き、次のコードを追加します。
<span>function my_custom_text_settings( $fields ) {
</span>
<span>// Add the controls
</span> <span>$fields[] = array(
</span> <span>'label' => __( 'My custom control', 'translation_domain' ),
</span> <span>'section' => 'my_section',
</span> <span>'settings' => 'my_setting',
</span> <span>'type' => 'text',
</span> <span>'priority' => 10,
</span> <span>'option_type' => 'theme_mod',
</span> <span>'capability' => 'edit_theme_options',
</span> <span>);
</span>
<span>$fields[] = array(
</span> <span>'label' => __( 'My custom control 2', 'translation_domain' ),
</span> <span>'section' => 'my_section',
</span> <span>'settings' => 'my_setting_2',
</span> <span>'type' => 'text',
</span> <span>'priority' => 20,
</span> <span>'option_type' => 'theme_mod',
</span> <span>'capability' => 'edit_theme_options',
</span> <span>);
</span>
<span>return $fields;
</span>
<span>}
</span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>
上記のコードは、Kirkiファイルをテーマにリンクしています。前述のように、GitHubソースからダウンロードしたファイルは、テーマフォルダー內(nèi)の「Kirki」という名前のフォルダーに配置する必要があります。
構(gòu)成の作成前述のように、オプションで使用できる構(gòu)成を作成する必要があります。 Theme-Options.phpファイルに次のコードを追加します
テーマの構(gòu)成を正常に作成しました。これで、オプションでMCをOption_Nameとして使用します。
<span>// Integrating Kirki with our theme </span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>デザイン
ランディングページのデザインを見てみましょう。ホームページには、次のものがあります
製品スライダー（製品ページのスライドショーを表示するため）。
説明ボックス（あなたの會社に関する情報を表示するため）。
<span>// Adding the configuration </span><span>Kirki<span>::</span>add_config( 'mc', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'mc', </span><span>) );</span>製品の詳細（製品に関する詳細を表示するため）
チームショーケース（チームメンバーの詳細を表示するため）。
ホームページのためにこれらのポイントを1つずつ実行する方法について説明します。
note- すべてのオプションは、WordPress Customizerオプションを介してカスタマイズ可能になります。外観にアクセスする必要があります> WordPress管理パネル內(nèi)のオプションをカスタマイズして、これらのオプションをカスタマイズします。
フロントページのカスタムテンプレートを作成
フロントページのカスタムテンプレートを作成できるため、index.phpファイルを変更したくありません。このカスタムテンプレートでは、カスタマイズされたフロントページを表示するようにコードを追加します。そのため、フロントページに內(nèi)容を表示するカスタムテンプレートを作成します。
homepage.phpというテーマフォルダー內(nèi)に新しいファイルを作成し、以下を追加します。このファイルの內(nèi)部には、スライダーを表示するためにコードを追加します。
これを靜的なフロントページに設(shè)定する必要があります。しかし、最初はこのテンプレートを使用するページはありません。このテンプレートを使用する新しいページを作成する必要があります。次の手順に従ってください：<span>Kirki<span>::</span>add_config( 'my_theme', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'my_theme', </span><span>) );</span>
新しいページ（**ページ>新しい**を追加）を作成します。
ページにタイトルを追加します（例：**私のカスタムホームページ**）。- Select ** Custom HomePage **から**テンプレート**下のドロップダウン**ページ屬性**。
- **公開**ボタンをクリックします。
- 次に、WordPressカスタマイザー內(nèi)の靜的フロントページオプションを靜的ページに設(shè)定し、その下のドロップダウンからカスタムホームページを選択します（または、ページに他の名前を使用した場合は、それを選択してください）。 >
homepage.phpファイルにコードを追加していないため、カスタマイザー內(nèi)の目に見える変更にまだ気付くことはありません。 homepage.phpを開いて、コードの追加を開始します！
次のコードを追加しましょう：上記のコードには、現(xiàn)在のテーマディレクトリのheader.phpとfooter.phpファイルが含まれています。カスタマイザーを更新すると、おそらくナビゲーションとフッターメニューのみが表示されます。
製品スライダー
製品スライダーは、最も創(chuàng)造的またはベストセラー製品を示しています。これらは、訪問者があなたのウェブサイトで最初に見る製品です。製品スライダーの作成には、次の手順が含まれます<span>Kirki<span>::</span>add_panel( 'panel_id', array( </span> <span>'priority' => 10, </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span><span>) );</span>
スライダーのセットを作成します（一般的に5）。
スライダーに背景畫像を追加します。
スライダーにキャプションを追加します。
- スライダーのセットを作成 前述のように、
- テーマにスライダーを表示するためにFlexSliderを使用しています。したがって、最初に、GitHubからFlexSliderをダウンロードする必要があります。 jquery.flexslider.js、flexslider.css、bg_play_pause.png、およびfontsフォルダーを使用する必要があります。これらのリソースをテーマフォルダーにコピーします
note
私が提供したテーマと一緒に作業(yè)している場合は、jsssフォルダー內(nèi)に存在するベンダーフォルダー內(nèi)にjquery.flexslider.jsをコピーできます。CSSフォルダー內(nèi)のflexslider.cssファイル、bg_play_pause.pngファイル內(nèi)のbg_play_pause.pngファイルイメージフォルダーとフォントフォルダーの內(nèi)容（FlexSliderのgithubソースから）は、既にテーマフォルダー內(nèi)にあるフォントフォルダー內(nèi)にあります。
次に、テーマを使用してこれらのファイルを排除する必要があります。ライブラリフォルダー內(nèi)に存在するEnqueue-scripts.phpファイルに次のenqueueコードを追加します：<span>Kirki<span>::</span>add_config( 'my_theme', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'my_theme', </span><span>) );</span>
次に、次のコードを使用してライブラリフォルダー內(nèi)のenqueue-style.php內(nèi)のCSSファイルをenqueします。
おめでとうございます！テーマを使用してFlexSliderファイルを正常に編成しました。ページのソースをチェックすることで、Enqueueが成功しているかどうかを確認できます。ページを右クリックして表示ページソースをクリックして、ページのソースを確認できます。 FlexSliderを検索すると、JSとCSSのファイルが正常に除外されていることがわかります。<span>Kirki<span>::</span>add_panel( 'panel_id', array( </span> <span>'priority' => 10, </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span><span>) );</span>
note
私が提供したテーマを使用していない場合は、次の部分を編集する必要があるかもしれません：/js/vendor/jquery.flexslider.jsおよび/css/flexslider.cssおよびcssファイル。
まず、スライダーの畫像、リンク、キャプションを表示するWordPressカスタマイザー內(nèi)にパネルを作成しましょう。Theme-Options.phpをもう一度開き、次のコードを追加します。
上記のコードは、カスタマイザーに製品スライダーパネルを追加しますが、このパネルがなく、このパネルに関連するセクションが含まれていないセクションがないため、表示されません。混亂していますか？続行しましょう。それがより明確になります。
次に、ホームページに製品スライダーという名前のセクションを追加する必要があります。これは、次のコードをtheme-options.phpファイルに追加することで実行できます。
<span>Kirki<span>::</span>add_section( 'section_id', array( </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span> <span>'panel' => '', // Not typically needed. </span> <span>'priority' => 160, </span> <span>'capability' => 'edit_theme_options', </span> <span>'theme_supports' => '', // Rarely needed. </span><span>) );</span>
上記のコードは、製品スライダーパネル內(nèi)のホームページセクションの製品スライダーを追加します。次に、畫像を表示するためのフィールドを追加します。次のコードを使用して畫像フィールドを作成できます。
さあ、カスタマイザーを更新すると、製品スライダーパネルが表示されているのが表示されます。
<span>function my_custom_text_settings( $fields ) { </span> <span>// Add the controls </span> <span>$fields[] = array( </span> <span>'label' => __( 'My custom control', 'translation_domain' ), </span> <span>'section' => 'my_section', </span> <span>'settings' => 'my_setting', </span> <span>'type' => 'text', </span> <span>'priority' => 10, </span> <span>'option_type' => 'theme_mod', </span> <span>'capability' => 'edit_theme_options', </span> <span>); </span> <span>$fields[] = array( </span> <span>'label' => __( 'My custom control 2', 'translation_domain' ), </span> <span>'section' => 'my_section', </span> <span>'settings' => 'my_setting_2', </span> <span>'type' => 'text', </span> <span>'priority' => 20, </span> <span>'option_type' => 'theme_mod', </span> <span>'capability' => 'edit_theme_options', </span> <span>); </span> <span>return $fields; </span> <span>} </span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>畫像フィールドを通じて、スライダーに表示される畫像を追加できます。スライダーに少なくとも5つの畫像を使用できるように、さらに4つの類似したフィールドを作成します。次のコードでは、さらに4つの畫像フィールドが追加されますこれらのフィールドに畫像をアップロードしてから、ランディングページに表示できます。
スライダーに背景畫像を追加<span>// Integrating Kirki with our theme </span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>
次に、製品スライダーのコードを追加します。 內(nèi)部
<span>Kirki<span>::</span>add_config( 'my_theme', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'my_theme', </span><span>) );</span>
これらの行は、カスタマイザー內(nèi)で保存した各スライドの畫像を取得します。次のステップでは、これらの畫像のいずれかが存在するかどうかを確認します。それらのいずれかが存在する場合は、スライダーに電話します。
<span>Kirki<span>::</span>add_panel( 'panel_id', array( </span> <span>'priority' => 10, </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span><span>) );</span>
この行は、スライド內(nèi)の畫像が存在するかどうかを確認します。畫像が存在する場合、FlexSliderが呼び出されます。次に、以下のコードを使用して、各スライドの畫像をエコーし??ます。
次に、FlexSliderが機能するためにJavaScriptを追加する必要があります。<span>Kirki<span>::</span>add_section( 'section_id', array( </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span> <span>'panel' => '', // Not typically needed. </span> <span>'priority' => 160, </span> <span>'capability' => 'edit_theme_options', </span> <span>'theme_supports' => '', // Rarely needed. </span><span>) );</span>
スライダーにキャプションを追加
<span>function my_custom_text_settings( $fields ) { </span> <span>// Add the controls </span> <span>$fields[] = array( </span> <span>'label' => __( 'My custom control', 'translation_domain' ), </span> <span>'section' => 'my_section', </span> <span>'settings' => 'my_setting', </span> <span>'type' => 'text', </span> <span>'priority' => 10, </span> <span>'option_type' => 'theme_mod', </span> <span>'capability' => 'edit_theme_options', </span> <span>); </span> <span>$fields[] = array( </span> <span>'label' => __( 'My custom control 2', 'translation_domain' ), </span> <span>'section' => 'my_section', </span> <span>'settings' => 'my_setting_2', </span> <span>'type' => 'text', </span> <span>'priority' => 20, </span> <span>'option_type' => 'theme_mod', </span> <span>'capability' => 'edit_theme_options', </span> <span>); </span> <span>return $fields; </span> <span>} </span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>スライドにキャプションを追加することもできます。スライドごとにキャプション（テキスト）を受け入れ、エコーアウトする新しいフィールドをカスタマイザーに追加する必要があります。最初にフィールドを追加しましょう。
他の4つのスライドについても同様のことができます。
さて、フロントエンドのカスタムホームページテンプレート內(nèi)で、これらのキャプションを表示するには、コードを少し編集する必要があります。<span>// Integrating Kirki with our theme </span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>
最初に、変數(shù)にキャプションを保存する必要があります：次に、次のコードを置き換えます
次のコードを使用して：<span>// Adding the configuration </span><span>Kirki<span>::</span>add_config( 'mc', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'mc', </span><span>) );</span>
説明boxes
説明ボックスは、當社の製品に関する便利な説明を提供できます。これらのボックスは、訪問者の注意を引くようにスライダーのすぐ下に配置されています。これらのボックスは、製品の詳細を表示したい場合に役立ちます。通常、3?4個のボックス（またはパネル）がありますが、必要に応じてさらに多くのボックスを使用できます。 このチュートリアルでは、3つのボックスを作成しており、各パネルに均一な高さを提供するために、基礎(chǔ)CSSフレームワークのデータエクラライザープロパティを使用しています。<span>/** </span><span>Template Name: Custom Homepage </span><span>**/</span>
仕事に取り掛かりましょう！
パネルの作成<span>// Add the header </span><span>get_header(); </span> <span>// Add the footer </span><span>get_footer();</span>
最初は、説明ボックスを表示するための別のパネルを作成します。同じパネルの下にすべてのオプションを提供することもできます（最初に作成したパネルで）が、後で使用するために物事を分離することは良い習慣です。
テーマOptions.phpファイル內(nèi)に次のコードを追加する必要があります。
セクションの作成
製品の説明のために2つのセクションを作成します。 1つのセクションに畫像をアップロードし、別のセクションに説明を追加します。最初に、次のコードを使用して畫像のセクションを作成します。
次に、説明のセクションを作成します：フィールドの作成
次に、3つのフィールドを作成する必要があります（3つのボックスがあり、したがって3つの畫像があるため）畫像入力のために3つのフィールドがあり、その後、製品の説明のために3つのフィールドを作成します。コードは次のようになります
<span>// adding flexslider scripts file in the footer </span><span>wp_register_script( 'flexslider-js', get_template_directory_uri() . '/js/vendor/jquery.flexslider.js', array( 'jquery' ), '', true ); </span> <span>wp_enqueue_script( 'flexslider-js' );</span>
出力の表示
次のコードを使用して、カスタムテンプレートに出力を表示する必要があります。
<span>Kirki<span>::</span>add_config( 'my_theme', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'my_theme', </span><span>) );</span>
これにより、最初のボックスの出力が表示されます。同様に、他の2つのボックスについても同じことを行います。
<span>Kirki<span>::</span>add_panel( 'panel_id', array( </span> <span>'priority' => 10, </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span><span>) );</span>
カスタマイザーに移動して畫像と説明を追加すると、入力を表示しているページが表示されます！製品の詳細
この部分には、片側(cè)に畫像があり、反対側(cè)に説明がある2つの行が含まれています。このページのこの部分またはセクションは、訪問者にとって製品の最も重要な側(cè)面の視覚として使用できます。パネルの作成
最初にパネルを作成しましょう。製品の詳細と呼びます
セクションの作成
<span>Kirki<span>::</span>add_section( 'section_id', array( </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span> <span>'panel' => '', // Not typically needed. </span> <span>'priority' => 160, </span> <span>'capability' => 'edit_theme_options', </span> <span>'theme_supports' => '', // Rarely needed. </span><span>) );</span>
以下のコードを使用して、フィールドのセクションを作成します。
フィールドの作成
以前に扱われた概念と同様に、以下のコードを使用して2つの畫像フィールドと2つのテキストエリアフィールドを作成します。<span>function my_custom_text_settings( $fields ) { </span> <span>// Add the controls </span> <span>$fields[] = array( </span> <span>'label' => __( 'My custom control', 'translation_domain' ), </span> <span>'section' => 'my_section', </span> <span>'settings' => 'my_setting', </span> <span>'type' => 'text', </span> <span>'priority' => 10, </span> <span>'option_type' => 'theme_mod', </span> <span>'capability' => 'edit_theme_options', </span> <span>); </span> <span>$fields[] = array( </span> <span>'label' => __( 'My custom control 2', 'translation_domain' ), </span> <span>'section' => 'my_section', </span> <span>'settings' => 'my_setting_2', </span> <span>'type' => 'text', </span> <span>'priority' => 20, </span> <span>'option_type' => 'theme_mod', </span> <span>'capability' => 'edit_theme_options', </span> <span>); </span> <span>return $fields; </span> <span>} </span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>出力を表示
カスタムホームページテンプレートに出力を表示する必要があります。 homepage.phpファイルを開き、次のコードを追加します。<span>// Integrating Kirki with our theme </span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>
他の行でも同じことをしてください。次に、カスタマイザーに移動して更新します。チームショーケース
<span>// Adding the configuration </span><span>Kirki<span>::</span>add_config( 'mc', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'mc', </span><span>) );</span>
ページのこのセクションは、チームに関する情報を提供するために使用されます。このセクションは便利です。なぜなら、訪問者が誰と仕事をするかを知ることができるからです。通常、このセクションは多くのチームメンバーで構(gòu)成されている可能性があります。この例では、3人のメンバーにのみオプションを提供しますが、必要に応じて拡張できます。
パネルの作成
新しいパネルを作成し、チームショーケースと呼びます。
セクションの作成
次に、チームショーケースのオプションがあるセクションを作成します。
フィールドの作成
アバター用の3つの畫像フィールドと、メンバーの名前の3つのテキストフィールドで構(gòu)成される合計6つのフィールドがあります。<span>/** </span><span>Template Name: Custom Homepage </span><span>**/</span>
出力を表示カスタムホームページテンプレートにチームの3人のメンバーの畫像と名前を表示します。 homepage.phpを開き、以下を挿入します
最初に変數(shù)に畫像とテキストの値を保存しましょう。<span>// Add the header </span><span>get_header(); </span> <span>// Add the footer </span><span>get_footer();</span>
次に、以下のコードを使用して各メンバーに表示できます。<span>Kirki<span>::</span>add_config( 'my_theme', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'my_theme', </span><span>) );</span>
高度なトピック
別のページからコンテンツを取得します
別のページのコンテンツをホームページに取得することもできます。これは、會社に関する情報を表示したい場合に特に便利です。また、すでに米國のページがあります。同じコンテンツをもう一度書く必要はありません。 Kirkiを使用してそのコンテンツを取得するだけです
このオプションを提供するための別のパネルを作成できます。これを行いましょう！
パネルのコードは次のとおりです
そして、セクションのコードを次に示します：<span>Kirki<span>::</span>add_panel( 'panel_id', array( </span> <span>'priority' => 10, </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span><span>) );</span>
次に、管理者がフロントページに表示するページを選択できる場所からのドロップダウンを表示します。 Kirkiのドロップダウンページオプションを使用できます<span>Kirki<span>::</span>add_section( 'section_id', array( </span> <span>'title' => __( 'My Title', 'textdomain' ), </span> <span>'description' => __( 'My Description', 'textdomain' ), </span> <span>'panel' => '', // Not typically needed. </span> <span>'priority' => 160, </span> <span>'capability' => 'edit_theme_options', </span> <span>'theme_supports' => '', // Rarely needed. </span><span>) );</span>
以下を使用してフィールドを追加できますこれにより、WordPressカスタマイザー內(nèi)のオプションが有効になります。 Homepage.phpファイルを編集してコンテンツを表示できるようになりました。そのファイルを開き、このコンテンツを表示する場合の次のコードをコピーします。
フロントページのみのサイドバーを作成する
<span>function my_custom_text_settings( $fields ) { </span> <span>// Add the controls </span> <span>$fields[] = array( </span> <span>'label' => __( 'My custom control', 'translation_domain' ), </span> <span>'section' => 'my_section', </span> <span>'settings' => 'my_setting', </span> <span>'type' => 'text', </span> <span>'priority' => 10, </span> <span>'option_type' => 'theme_mod', </span> <span>'capability' => 'edit_theme_options', </span> <span>); </span> <span>$fields[] = array( </span> <span>'label' => __( 'My custom control 2', 'translation_domain' ), </span> <span>'section' => 'my_section', </span> <span>'settings' => 'my_setting_2', </span> <span>'type' => 'text', </span> <span>'priority' => 20, </span> <span>'option_type' => 'theme_mod', </span> <span>'capability' => 'edit_theme_options', </span> <span>); </span> <span>return $fields; </span> <span>} </span><span>add_filter( 'kirki/fields', 'my_custom_text_settings' );</span>WordPress Codexに従うと、テーマのサイドバーを作成するのは簡単です。ここで詳細を説明するのではなく、ライブラリ/Widget-areas.phpファイル內(nèi)の次のコードを使用して、このテーマにサイドバーを追加するだけです。Widget-areas.phpを開き、以下を追加します
<span>// Integrating Kirki with our theme </span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>
note
ライブラリフォルダー內(nèi)にあるウィジェットエアーズ.phpファイルには、このテーマのすべてのウィジェット領(lǐng)域が含まれているため、サイドバーコードを追加しました。次に、このページにこのウィジェット領(lǐng)域を表示するには、homepage.phpファイルを編集する必要があります。 homepage.phpを開き、次のコードを追加します
今、このサイドバーにウィジェットを追加すると、フロントページのみに表示されます。<span>// Adding the configuration </span><span>Kirki<span>::</span>add_config( 'mc', array( </span> <span>'capability' => 'edit_theme_options', </span> <span>'option_type' => 'option', </span> <span>'option_name' => 'mc', </span><span>) );</span>
それを包みますこのチュートリアルでは、Kirki Toolkitを使用してWordPress Webサイトのランディングページを作成する方法を説明しました。これをいくつかのCSSで飾り、好きなようにカスタマイズできます。このツールキットの実裝に関するクールなアイデアがあり、以下のコメントセクションでお知らせください。問題が発生したり、質(zhì)問がある場合は、お知らせください。お手伝いしていただければ幸いです。
WordPress Webサイトのカスタムホームページの設(shè)計に関するよくある質(zhì)問 WordPressで靜的フロントページを作成するにはどうすればよいですか？WordPressで靜的フロントページを作成するのは非常に簡単です。まず、WordPressダッシュボードにログインする必要があります。次に、「ページ」に移動して、「新しい追加」をクリックします。この新しいページ「ホーム」またはあなたが好むその他の名前に名前を付けます。その後、別の新しいページを作成し、「ブログ」または「投稿」に名前を付けます。これらの2つのページを作成したら、「設(shè)定」に移動してから「読み取り」に移動します。 「ホームページディスプレイ」の下で、「靜的ページ」を選択します。ドロップダウンメニューで、自宅用に作成したページに「ホームページ」を設(shè)定し、ブログや投稿用に作成したページに「投稿ページ」を設(shè)定します。 [変更の保存]をクリックして設(shè)定を完成させます。
WordPressホームページをカスタマイズするにはどうすればよいですか？ WordPress Customizerを使用できます。これにより、変更をリアルタイムでプレビューできます。アクセスするには、「外観」に移動し、「カスタマイズ」します。ここでは、サイトのアイデンティティ、色、背景畫像、メニュー、ウィジェットなどを変更できます。または、ElementorやBeaver Builderなどのページビルダープラグインを使用できます。これらのプラグインは、ホームページを正確に設(shè)計できるようにするドラッグアンドドロップインターフェイスを提供します。 WordPressホームページ、視聴者と目的を念頭に置いておくことが重要です。あなたのホームページがあなたが誰であり、あなたが何をしているのかを明確に伝えてください。高品質(zhì)の畫像と説得力のある見出しを使用して、訪問者の注意を引いてください。訪問者がサイトを簡単にナビゲートできるように、デザインを清潔で簡単に保ちます。また、Webトラフィックの大部分がモバイルデバイスから來ているため、サイトがモバイルに優(yōu)しいことを確認してください。 WordPressホームページへのカスタムヘッダー、「外観」に移動し、「カスタマイズ」します。テーマに応じて、「ヘッダー」または「ヘッダー畫像」をクリックします。ここから、新しい畫像をアップロードし、希望するサイズにトリミングし、必要なテキストやリンクを追加できます。完了したら「保存と公開」をクリックします。ヘッダ。 「外観」に移動し、「カスタマイズ」します。テーマに応じて、「フッター」または「フッター設(shè)定」をクリックします。ここでは、フッターテキストをカスタマイズし、ウィジェットを追加し、レイアウトを変更できます。完了したら、「保存と公開」をクリックしますWordPressホームページにスライダーを追加するには、スライダーレボリューションやスマートスライダーなどのスライダープラグインが必要です。選択したプラグインをアクティブにして、新しいスライダーを作成し、畫像を追加し、設(shè)定をカスタマイズできます。次に、プラグインに応じて、ショートコード、ウィジェット、またはテンプレートタグを使用してスライダーをホームページに追加できます。 WordPressホームページにブログセクションを追加して、最初に、ブログ投稿の別のページを作成したことを確認してください。次に、「外観」に移動し、「カスタマイズ」します。 「ホームページ設(shè)定」をクリックし、「ホームページディスプレイ」の下に「最新の投稿」を選択します。これにより、ホームページに最新のブログ投稿が表示されます。WordPressホームページにソーシャルメディアアイコンを追加するにはどうすればよいですか？ソーシャルメディアウィジェットやシンプルなソーシャルアイコンなどのソーシャルメディアプラグイン。選択したプラグインをインストールしてアクティブにしたら、ソーシャルメディアリンクを追加して、好みのアイコンスタイルとサイズを選択できます。次に、ウィジェットを使用してソーシャルメディアアイコンをホームページに追加できます。クリーンで応答性の高いテーマを選択します。 Yoast SEOなどのSEOプラグインを使用して、タイトルタグとメタの説明を最適化します。コンテンツに関連するキーワードを含めますが、キーワードの詰め物は避けてください。ヘッダータグを使用してコンテンツを構(gòu)成し、読みやすくします。また、ページ速度がランキングファクターであるため、サイトが迅速にロードされていることを確認してください。 、連絡(luò)先フォーム7やWPFormsなどの連絡(luò)先フォームプラグインが必要です。選択したプラグインをインストールしてアクティブにしたら、新しい連絡(luò)先フォームを作成し、必要に応じてフィールドをカスタマイズできます。次に、ショートコードを使用してホームページに連絡(luò)フォームを追加できます。
次のコードを追加しましょう：
製品の詳細
他の行でも同じことをしてください。次に、カスタマイザーに移動して更新します。
以上がWordPress Webサイトのカスタムホームページを設(shè)計しますの詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
8638
17
1783
16
1728
56
1579
28
1443
31
WordPressでGitの使用方法
Jun 26, 2025 am 12:23 AM
GITでWordPressプロジェクトを管理する場合、バージョンコントロールにテーマ、カスタムプラグイン、構(gòu)成ファイルのみを含める必要があります。 .gitignoreファイルをセットアップして、ディレクトリ、キャッシュ、および機密構(gòu)成のアップロードを無視します。 WebhooksまたはCIツールを使用して自動展開を?qū)g現(xiàn)し、データベース処理に注意を払います。共同開発のために2つのブランチポリシー（Main/Develop）を使用します。そうすることで、競合を回避し、セキュリティを確保し、コラボレーションと展開効率を改善できます。
WordPressテスト環(huán)境の使用方法
Jun 24, 2025 pm 05:13 PM
WordPressテスト環(huán)境を使用して、正式に発売される前に新機能、プラグイン、またはテーマのセキュリティと互換性を確保し、実際のWebサイトに影響を與えないようにします。テスト環(huán)境を構(gòu)築する手順には、次のものがあります。ローカルサーバーソフトウェア（LocalWP、XAMPPなど）のダウンロードとインストール、サイトの作成、データベースと管理者アカウントの設(shè)定、テスト用のテーマとプラグインのインストール。正式なWebサイトをテスト環(huán)境にコピーする方法は、プラグインを介してサイトをエクスポートし、テスト環(huán)境をインポートし、ドメイン名を置き換えることです。それを使用する場合、実際のユーザーデータを使用せず、定期的に役に立たないデータのクリーニング、テストステータスのバックアップ、時間內(nèi)に環(huán)境のリセット、および違いを減らすためにチームの構(gòu)成を統(tǒng)合することに注意を払う必要があります。
シンプルなGutenbergブロックを作成する方法
Jun 28, 2025 am 12:13 AM
Gutenbergブロックを作成するための鍵は、その基本構(gòu)造を理解し、フロントエンドリソースとバックエンドリソースを正しく接続することです。 1.開発環(huán)境の準備：ローカルWordPress、node.js、 @wordpress/scriptsをインストールします。 2。PHPを使用してブロックを登録し、JavaScriptを使用してブロックの編集ロジックを定義します。 3. npmを介してJSファイルを構(gòu)築して変更を行います。 4.問題に遭遇したときにパスとアイコンが正しいかどうかを確認するか、リアルタイムのリスニングを使用してビルドを使用して、繰り返し手動コンパイルを避けます。これらの手順に従って、シンプルなグーテンバーグブロックを段階的に実裝できます。
プログラムでルールを書き直す方法
Jun 27, 2025 am 12:21 AM
WordPressでは、カスタム記事タイプを追加したり、固定リンク構(gòu)造を変更したりするときは、書き換えルールを手動で更新する必要があります。この時點で、コードを介してflush_rewrite_rules（）関數(shù)を呼び出して実裝できます。 1.この関數(shù)は、テーマまたはプラグインのアクティベーションフックに追加して、自動的に更新できます。 2。CPTの追加、分類、リンク構(gòu)造の変更など、必要に応じて1回のみ実行します。 3.パフォーマンスに影響を避けるために、頻繁に電話をかけないでください。 4。マルチサイト環(huán)境では、必要に応じて各サイトを個別に更新します。 5.一部のホスティング環(huán)境は、ルールの保存を制限する場合があります。さらに、[保存]をクリックして「設(shè)定>ピン留めリンク」ページにアクセスすると、自動化されていないシナリオに適した更新もトリガーできます。
WordPress htaccessでリダイレクトをセットアップする方法
Jun 25, 2025 am 12:19 AM
tosetupredirectsinwordsusitheTheTheTheTheTheTheThe、LocateTethefileNyinyOursite’sRootDirectoryAnddRedireCtRulesabovethe
WordPressテーマを応答する方法
Jun 28, 2025 am 12:14 AM
応答性のあるWordPressテーマデザインを?qū)g裝するには、まず、HTML5とモバイルファーストメタタグを使用し、header.phpにビューポート設(shè)定を追加して、モバイル端子が正しく表示されるようにし、HTML5構(gòu)造タグでレイアウトを整理します。第二に、CSSメディアクエリを使用して、さまざまな畫面幅でスタイルの適応を?qū)g現(xiàn)し、モバイルファーストの原則に従ってスタイルを書き込み、一般的に使用されるブレークポイントには480px、768px、1024pxが含まれます。第三に、畫像とレイアウトを弾力的に処理し、最大幅を設(shè)定します。畫像に100％を設(shè)定し、固定幅の代わりにFlexBoxまたはグリッドレイアウトを使用します。最後に、ブラウザ開発者ツールと実際のデバイスを介して完全にテストし、パフォーマンスを最適化し、応答を確保する
SMTPを使用してWordPressから電子メールを送信する方法
Jun 27, 2025 am 12:30 AM
usingsmtpforwordpressemailsimprovesdeleverability andReliability comparedtothededefaultphpmail（）function.1.smtpauthenticateswithyouremailserver、reducespamplacement.2.somehostsdisablephpmail（）、makesmtpn devering
サードパーティのAPIをWordPressと統(tǒng)合する方法
Jun 29, 2025 am 12:03 AM
IntegrateThird-PartyApisIntOwordPress、次のようになります。
