WordPressは、Web上のサイトの大部分で使用されます。さまざまな種類のサイトを作成することができますが、Webサイトの最も重要なコンポーネントの1つは常にホームページです。完璧なランディングページは、直帰率を引き下げ、トラフィックと顧客を後押しするのに役立ちます。この記事では、WordPress Webサイトのカスタムホームページ（またはランディングページ）を作成する方法について説明します。 この目標(biāo)を達(dá)成するには多くの方法がありますが、これは
の1つの方法です。 この記事で説明するものの概要概要
最初に、これらの基本的な手順を完了します：
WordPressのインデックスページにスライダーを表示します
- 製品の説明を表示するための3つのパネルを表示します。
- 畫像とテキストを並べて製品の詳細(xì)を含む2つの行を表示します。 チームメンバーを見せて パネル。
- 次に、次の高度なトピックを見ていきます
- 別のページからコンテンツを取得します（たとえば、About Usページから）。 フロントページのみのサイドバーを作成します。
最も重要な側(cè)面は、「WordPress Customizer」オプションからスライダーの畫像を変更できることです。スライダーを追加したり、畫像のスライドショーを作成したりするためのプラグインは必要ありません。
- 必要なもの
- テーマのオプションを提供するためのKirki Toolkit。
- スライダーオプションを提供するためのFlexSlider。
- マリア?アントニエッタ?ペルナは、このトピックに関する良い紹介を探しているなら、前の記事でkirkiをカバーしました。
キーテイクアウト
-
WordPressカスタマイザーを使用して、追加のプラグインを必要とせずにスライダーやサイドバーなどの要素を簡(jiǎn)単に変更して、WordPressホームページを最適化します。
- Kirki Toolkitを使用してWordPressカスタマイザーの機(jī)能を強(qiáng)化し、最小限のコーディングで高度なカスタマイズを可能にします。 「ライブラリ」フォルダー內(nèi)にテーマファイルを整理して、より良い管理とモジュール性を整理することにより、設(shè)計(jì)プロセスを合理化します。
- FlexSliderを使用して視覚的に魅力的な製品スライダーを作成します。テーマに直接統(tǒng)合されて、主要な製品や機(jī)能をホームページで際立たせて紹介します。 ホームページにカスタムテンプレートを使用して、メインインデックスファイルを変更せずに他のページと區(qū)別する一意のレイアウトを維持します。
- カスタイザー內(nèi)のパネル、セクション、フィールドなどのUIコンポーネントを追加および管理するために、Kirkiのパワーを活用して、ユーザーの相互作用と経験を強(qiáng)化します。 チームショーケース、詳細(xì)な製品の説明、インタラクティブなスライダーなどの動(dòng)的な要素を含めることにより、ホームページが有益で魅力的であることを確認(rèn)してください。
- note
- モジュール性のために、ライブラリという名前のフォルダーを作成し、必要なコンポーネントのみを簡(jiǎn)単に編集できるように、すべての関數(shù)ファイルを內(nèi)部に配置しました。 Githubで私のテーマをフォークしてください。このテーマでは、functions.phpファイルからライブラリフォルダー內(nèi)のすべてのファイルを呼び出しました。このテーマにFoundation CSSフレームワークを使用しました
- このチュートリアルで最も編集するライブラリフォルダー內(nèi)にTheme-Options.phpという名前のファイルがあります。お?dú)荬巳毪辘违匹攻去ē钎％咯`でそのファイルを開き、手を汚す準(zhǔn)備をしてください！ kirki
- kirkiはフレームワークではありません。これは、WordPress開発者がカスタマイザーを使用し、コードを抽象化し、誰(shuí)もが美しく意味のあるユーザーエクスペリエンスを簡(jiǎn)単に作成できるようにすることで、その高度な機(jī)能と柔軟性を活用できるツールキットです。
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>
- 機(jī)能：有効なWordPress機(jī)能。詳細(xì)については、WordPress Codexを參照してください
- option_type：optionまたはtheme_mod。 のいずれかにすることができます
- option_name：テーマmodの代わりにオプションを使用している場(chǎng)合は、これを使用してオプション名を指定できます。その後、すべてのフィールドは、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>デザイン
ランディングページのデザインを見てみましょう。ホームページには、次のものがあります
製品スライダー（製品ページのスライドショーを表示するため）。
説明ボックス（あなたの會(huì)社に関する情報(bào)を表示するため）。
<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>製品の詳細(xì)（製品に関する詳細(xì)を表示するため）
チームショーケース（チームメンバーの詳細(xì)を表示するため）。
ホームページのためにこれらのポイントを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è)定し、その下のドロップダウンからカスタムホームページを選択します（または、ページに他の名前を使用した場(chǎng)合は、それを選択してください）。 >
homepage.phpファイルにコードを追加していないため、カスタマイザー內(nèi)の目に見える変更にまだ気付くことはありません。 homepage.phpを開いて、コードの追加を開始します！
次のコードを追加しましょう：上記のコードには、現(xiàn)在のテーマディレクトリのheader.phpとf(wàn)ooter.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è)している場(chǎng)合は、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が成功しているかどうかを確認(rèn)できます。ページを右クリックして表示ページソースをクリックして、ページのソースを確認(rèn)できます。 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
私が提供したテーマを使用していない場(chǎng)合は、次の部分を編集する必要があるかもしれません：/js/vendor/jquery.flexslider.jsおよび/css/flexslider.cssおよびcssファイル。
まず、スライダーの畫像、リンク、キャプションを表示するWordPressカスタマイザー內(nèi)にパネルを作成しましょう。Theme-Options.phpをもう一度開き、次のコードを追加します。
上記のコードは、カスタマイザーに製品スライダーパネルを追加しますが、このパネルがなく、このパネルに関連するセクションが含まれていないセクションがないため、表示されません?；靵yしていますか？続行しましょう。それがより明確になります。
次に、ホームページに製品スライダーという名前のセクションを追加する必要があります。これは、次のコードを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)で保存した各スライドの畫像を取得します。次のステップでは、これらの畫像のいずれかが存在するかどうかを確認(rèn)します。それらのいずれかが存在する場(chǎ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>
この行は、スライド內(nèi)の畫像が存在するかどうかを確認(rèn)します。畫像が存在する場(chǎng)合、FlexSliderが呼び出されます。次に、以下のコードを使用して、各スライドの畫像をエコーし??ます。
次に、FlexSliderが機(jī)能するために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
説明ボックスは、當(dāng)社の製品に関する便利な説明を提供できます。これらのボックスは、訪問者の注意を引くようにスライダーのすぐ下に配置されています。これらのボックスは、製品の詳細(xì)を表示したい場(chǎng)合に役立ちます。通常、3?4個(gè)のボックス（またはパネル）がありますが、必要に応じてさらに多くのボックスを使用できます。 このチュートリアルでは、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>
最初は、説明ボックスを表示するための別のパネルを作成します。同じパネルの下にすべてのオプションを提供することもできます（最初に作成したパネルで）が、後で使用するために物事を分離することは良い習(xí)慣です。
テーマ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>
カスタマイザーに移動(dòng)して畫像と説明を追加すると、入力を表示しているページが表示されます！製品の詳細(xì)
この部分には、片側(cè)に畫像があり、反対側(cè)に説明がある2つの行が含まれています。このページのこの部分またはセクションは、訪問者にとって製品の最も重要な側(cè)面の視覚として使用できます。パネルの作成
最初にパネルを作成しましょう。製品の詳細(xì)と呼びます
セクションの作成
<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>
他の行でも同じことをしてください。次に、カスタマイザーに移動(dòng)して更新します。チームショーケース
<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>
ページのこのセクションは、チームに関する情報(bào)を提供するために使用されます。このセクションは便利です。なぜなら、訪問者が誰(shuí)と仕事をするかを知ることができるからです。通常、このセクションは多くのチームメンバーで構(gòu)成されている可能性があります。この例では、3人のメンバーにのみオプションを提供しますが、必要に応じて拡張できます。
パネルの作成
新しいパネルを作成し、チームショーケースと呼びます。
セクションの作成
次に、チームショーケースのオプションがあるセクションを作成します。
フィールドの作成
アバター用の3つの畫像フィールドと、メンバーの名前の3つのテキストフィールドで構(gòu)成される合計(jì)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>
高度なトピック
別のページからコンテンツを取得します
別のページのコンテンツをホームページに取得することもできます。これは、會(huì)社に関する情報(bào)を表示したい場(chǎng)合に特に便利です。また、すでに米國(guó)のページがあります。同じコンテンツをもう一度書く必要はありません。 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>
次に、管理者がフロントページに表示するページを選択できる場(chǎng)所からのドロップダウンを表示します。 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ファイルを編集してコンテンツを表示できるようになりました。そのファイルを開き、このコンテンツを表示する場(chǎng)合の次のコードをコピーします。
フロントページのみのサイドバーを作成する
<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に従うと、テーマのサイドバーを作成するのは簡(jiǎn)単です。ここで詳細(xì)を説明するのではなく、ライブラリ/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ì)問がある場(chǎng)合は、お知らせください。お手伝いしていただければ幸いです。
WordPress Webサイトのカスタムホームページの設(shè)計(jì)に関するよくある質(zhì)問 WordPressで靜的フロントページを作成するにはどうすればよいですか？WordPressで靜的フロントページを作成するのは非常に簡(jiǎn)単です。まず、WordPressダッシュボードにログインする必要があります。次に、「ページ」に移動(dòng)して、「新しい追加」をクリックします。この新しいページ「ホーム」またはあなたが好むその他の名前に名前を付けます。その後、別の新しいページを作成し、「ブログ」または「投稿」に名前を付けます。これらの2つのページを作成したら、「設(shè)定」に移動(dòng)してから「読み取り」に移動(dòng)します。 「ホームページディスプレイ」の下で、「靜的ページ」を選択します。ドロップダウンメニューで、自宅用に作成したページに「ホームページ」を設(shè)定し、ブログや投稿用に作成したページに「投稿ページ」を設(shè)定します。 [変更の保存]をクリックして設(shè)定を完成させます。
WordPressホームページをカスタマイズするにはどうすればよいですか？ WordPress Customizerを使用できます。これにより、変更をリアルタイムでプレビューできます。アクセスするには、「外観」に移動(dòng)し、「カスタマイズ」します。ここでは、サイトのアイデンティティ、色、背景畫像、メニュー、ウィジェットなどを変更できます。または、ElementorやBeaver Builderなどのページビルダープラグインを使用できます。これらのプラグインは、ホームページを正確に設(shè)計(jì)できるようにするドラッグアンドドロップインターフェイスを提供します。 WordPressホームページ、視聴者と目的を念頭に置いておくことが重要です。あなたのホームページがあなたが誰(shuí)であり、あなたが何をしているのかを明確に伝えてください。高品質(zhì)の畫像と説得力のある見出しを使用して、訪問者の注意を引いてください。訪問者がサイトを簡(jiǎn)単にナビゲートできるように、デザインを清潔で簡(jiǎn)単に保ちます。また、Webトラフィックの大部分がモバイルデバイスから來ているため、サイトがモバイルに優(yōu)しいことを確認(rèn)してください。 WordPressホームページへのカスタムヘッダー、「外観」に移動(dòng)し、「カスタマイズ」します。テーマに応じて、「ヘッダー」または「ヘッダー畫像」をクリックします。ここから、新しい畫像をアップロードし、希望するサイズにトリミングし、必要なテキストやリンクを追加できます。完了したら「保存と公開」をクリックします。ヘッダ。 「外観」に移動(dòng)し、「カスタマイズ」します。テーマに応じて、「フッター」または「フッター設(shè)定」をクリックします。ここでは、フッターテキストをカスタマイズし、ウィジェットを追加し、レイアウトを変更できます。完了したら、「保存と公開」をクリックしますWordPressホームページにスライダーを追加するには、スライダーレボリューションやスマートスライダーなどのスライダープラグインが必要です。選択したプラグインをアクティブにして、新しいスライダーを作成し、畫像を追加し、設(shè)定をカスタマイズできます。次に、プラグインに応じて、ショートコード、ウィジェット、またはテンプレートタグを使用してスライダーをホームページに追加できます。 WordPressホームページにブログセクションを追加して、最初に、ブログ投稿の別のページを作成したことを確認(rèn)してください。次に、「外観」に移動(dòng)し、「カスタマイズ」します。 「ホームページ設(shè)定」をクリックし、「ホームページディスプレイ」の下に「最新の投稿」を選択します。これにより、ホームページに最新のブログ投稿が表示されます。WordPressホームページにソーシャルメディアアイコンを追加するにはどうすればよいですか？ソーシャルメディアウィジェットやシンプルなソーシャルアイコンなどのソーシャルメディアプラグイン。選択したプラグインをインストールしてアクティブにしたら、ソーシャルメディアリンクを追加して、好みのアイコンスタイルとサイズを選択できます。次に、ウィジェットを使用してソーシャルメディアアイコンをホームページに追加できます。クリーンで応答性の高いテーマを選択します。 Yoast SEOなどのSEOプラグインを使用して、タイトルタグとメタの説明を最適化します。コンテンツに関連するキーワードを含めますが、キーワードの詰め物は避けてください。ヘッダータグを使用してコンテンツを構(gòu)成し、読みやすくします。また、ページ速度がランキングファクターであるため、サイトが迅速にロードされていることを確認(rèn)してください。 、連絡(luò)先フォーム7やWPFormsなどの連絡(luò)先フォームプラグインが必要です。選択したプラグインをインストールしてアクティブにしたら、新しい連絡(luò)先フォームを作成し、必要に応じてフィールドをカスタマイズできます。次に、ショートコードを使用してホームページに連絡(luò)フォームを追加できます。
次のコードを追加しましょう：
製品の詳細(xì)
他の行でも同じことをしてください。次に、カスタマイザーに移動(dòng)して更新します。
以上がWordPress Webサイトのカスタムホームページを設(shè)計(jì)しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
WordPressによって引き起こされる高いCPU使用を診斷する方法
Jul 06, 2025 am 12:08 AM
WordPressがサーバーCPU使用の急増を引き起こす主な理由には、プラグインの問題、非効率的なデータベースクエリ、テーマコードの品質(zhì)の低さ、またはトラフィックの急増が含まれます。 1.最初に、トップ、HTOP、またはコントロールパネルツールを介したWordPressによって引き起こされる高い負(fù)荷であるかどうかを確認(rèn)します。 2.トラブルシューティングモードを入力して、プラグインを徐々に有効にしてパフォーマンスのボトルネックをトラブルシューティングし、QueryMonitorを使用してプラグインの実行を分析し、非効率的なプラグインを削除または交換します。 3.キャッシュプラグインをインストールし、冗長(zhǎng)データをクリーンアップし、スロークエリログを分析してデータベースを最適化します。 4.トピックには、コンテンツの過負(fù)荷、複雑なクエリ、キャッシングメカニズムの欠如などの問題があるかどうかを確認(rèn)します。標(biāo)準(zhǔn)のトピックテストを使用して、コードロジックを比較および最適化することをお?jiǎng)幛幛筏蓼?。上記の手順に従って、?chǎng)所を確認(rèn)して解決し、問題を1つずつ解決します。
WordPressでJavaScriptファイルをマイニングする方法
Jul 07, 2025 am 01:11 AM
JavaScriptファイルをマイニングすると、ブランク、コメント、役に立たないコードを削除することにより、WordPress Webサイトの読み込み速度を向上させることができます。 1。W3TOTALCACHEなどの圧縮をサポートするキャッシュプラグインを使用し、「MINIFY」オプションで圧縮モードを有効にし、選択します。 2。FastVelocityMinifyなどの専用圧縮プラグインを使用して、より細(xì)かい制御を提供します。 3. JSファイルを手動(dòng)で圧縮し、FTPを介してアップロードします。これは、開発ツールに精通しているユーザーに適しています。一部のテーマまたはプラグインスクリプトは圧縮関數(shù)と競(jìng)合する可能性があり、アクティベーション後にWebサイト機(jī)能を徹底的にテストする必要があることに注意してください。
プラグインなしでWordPressを最適化する方法
Jul 05, 2025 am 12:01 AM
プラグインに依存しないWordPressサイトを最適化する方法は次のとおりです。1。積み重なったテーマを避けるために、AstraやGeneratePressなどの軽量テーマを使用します。 2. CSSおよびJSファイルを手動(dòng)で圧縮およびマージして、HTTP要求を削減します。 3.アップロードする前に畫像を最適化し、WebP形式を使用し、ファイルサイズを制御します。 4. configure.htaccessブラウザキャッシュを有効にし、CDNに接続して靜的リソースの負(fù)荷速度を向上させます。 5.記事の改訂を制限し、定期的にデータベース冗長(zhǎng)データをクリーンにします。
プラグインチェックプラグインを使用する方法
Jul 04, 2025 am 01:02 AM
PluginCheckは、WordPressユーザーがプラグインの互換性とパフォーマンスをすばやくチェックするのに役立つツールです。主に、現(xiàn)在インストールされているプラ??グインに、WordPressの最新バージョン、セキュリティの脆弱性などと互換性がないなどの問題があるかどうかを特定するために使用されます。インストールとアクティベーションの後、バックグラウンドの「runaScan」ボタンをクリックして、すべてのプラグインを自動(dòng)的にスキャンします。 2。レポートには、プラグイン名、検出タイプ、問題の説明、およびソリューションの提案が含まれています。これにより、深刻な問題の優(yōu)先処理が容易になります。 3. WordPressを更新する前に検査を?qū)g行することをお?jiǎng)幛幛筏蓼?。ウェブサイトの異常が異常である?chǎng)合、または定期的に実行されて隠された危険を事前に発見し、將來の大きな問題を回避することをお?jiǎng)幛幛筏蓼埂?/p>
キャッシングにTransiments APIを使用する方法
Jul 05, 2025 am 12:05 AM
Transientapiは、自動(dòng)有効期限データを一時(shí)的に保存するためのWordPressの組み込みツールです。そのコア関數(shù)は、set_transient、get_transient、delete_transientです。 OptionsAPIと比較して、Transimentsは、Cache API要求の結(jié)果や複雑なコンピューティングデータなどのシナリオに適した、生存時(shí)間（TTL）の設(shè)定をサポートしています。それを使用する場(chǎng)合、キーネーミングと名前空間の獨(dú)自性、キャッシュ「怠zyな削除」メカニズム、およびオブジェクトキャッシュ環(huán)境では続かない問題に注意を払う必要があります。一般的なアプリケーションシナリオには、外部要求頻度の削減、コード実行リズムの制御、ページの読み込みパフォーマンスの改善が含まれます。
コメントスパムをプログラムで防ぐ方法
Jul 08, 2025 am 12:04 AM
コメントスパムを防ぐ最も効果的な方法は、プログラマティックな手段を介して自動(dòng)的に識(shí)別して傍受することです。 1.検証コードメカニズム（Googler CaptchaやHcaptchaなど）を使用して、特に公共のWebサイトに適した人間とロボットを効果的に區(qū)別します。 2.隠しフィールド（ハニーポットテクノロジー）を設(shè)定し、ロボットを使用して機(jī)能を自動(dòng)的に埋めて、ユーザーエクスペリエンスに影響を與えることなくスパムコメントを識(shí)別します。 3.コメントコンテンツのブラックリストを確認(rèn)し、敏感な単語(yǔ)の一致を通じてスパム情報(bào)をフィルタリングし、誤判斷を避けるために注意を払ってください。 4.コメントの頻度とソースIPを判斷し、単位時(shí)間あたりの提出數(shù)を制限し、ブラックリストを確立します。 5.サードパーティのスパムサービス（Akismet、CloudFlareなど）を使用して、識(shí)別の精度を向上させます。ウェブサイトに基づいていることができます
Gutenbergブロックの資産を排除する方法
Jul 09, 2025 am 12:14 AM
Gutenbergブロックを開発する場(chǎng)合、エンキュー資産の正しい方法には次のものが含まれます。1。register_block_typeを使用して、editor_script、editor_style、およびstyleのパスを指定します。 2。functions.phpまたはプラグインでwp_register_scriptとwp_register_styleを介してリソースを登録し、正しい依存関係とバージョンを設(shè)定します。 3.適切なモジュール形式を出力し、パスが一貫していることを確認(rèn)するためのビルドツールを構(gòu)成します。 4. Add_Theme_SupportまたはEnqueue_Block_Assetsを介してフロントエンドスタイルの読み込みロジックを制御して、フロントエンドスタイルのロードロジックが確保されるようにします。
ユーザーにカスタムフィールドを追加する方法
Jul 06, 2025 am 12:18 AM
カスタムユーザーフィールドを追加するには、プラットフォームに従って拡張メソッドを選択し、データ検証と許可制御に注意を払う必要があります。一般的なプラクティスには次のものが含まれます。1。データベースの追加のテーブルまたはキー価値ペアを使用して情報(bào)を保存します。 2.フロントエンドに入力ボックスを追加し、バックエンドと統(tǒng)合します。 3。機(jī)密データのフォーマットチェックとアクセス許可を制約します。 4.モバイルの適応とユーザーエクスペリエンスを考慮しながら、新しいフィールド表示と編集をサポートするインターフェイスとテンプレートを更新します。
