WordPress Webサイトのカスタムホームページを設計します-＆＃＆プレス-php.cn

ホームページ

CMS チュートリアル

＆＃＆プレス

WordPress Webサイトのカスタムホームページを設計します

尊渡假赌尊渡假赌尊渡假赌

Feb 15, 2025 pm 12:54 PM

WordPress Webサイトのカスタムホームページを設計します

WordPressは、Web上のサイトの大部分で使用されます。さまざまな種類のサイトを作成することができますが、Webサイトの最も重要なコンポーネントの1つは常にホームページです。完璧なランディングページは、直帰率を引き下げ、トラフィックと顧客を後押しするのに役立ちます。この記事では、WordPress Webサイトのカスタムホームページ（またはランディングページ）を作成する方法について説明します。この目標を達成するには多くの方法がありますが、これは

の1つの方法です

。 この記事で説明するものの概要概要

最初に、これらの基本的な手順を完了します：

WordPressのインデックスページにスライダーを表示します

画像とテキストを並べて製品の詳細を含む2つの行を表示します。チームメンバーを見せて
次に、次の高度なトピックを見ていきます
別のページからコンテンツを取得します（たとえば、About Usページから）。

最も重要な側面は、「WordPress Customizer」オプションからスライダーの画像を変更できることです。スライダーを追加したり、画像のスライドショーを作成したりするためのプラグインは必要ありません。

スライダーオプションを提供するためのFlexSlider。

キーテイクアウト

Kirki Toolkitを使用してWordPressカスタマイザーの機能を強化し、最小限のコーディングで高度なカスタマイズを可能にします。
FlexSliderを使用して視覚的に魅力的な製品スライダーを作成します。テーマに直接統合されて、主要な製品や機能をホームページで際立たせて紹介します。
カスタイザー内のパネル、セクション、フィールドなどのUIコンポーネントを追加および管理するために、Kirkiのパワーを活用して、ユーザーの相互作用と経験を強化します。
このチュートリアルで最も編集するライブラリフォルダー内にTheme-Options.phpという名前のファイルがあります。お気に入りのテキストエディターでそのファイルを開き、手を汚す準備をしてください！ kirki

Kirkiを使用して、カスタマイザーに構成、フィールド、セクション、パネルを追加できます。これは、WordPressカスタマイザーAPIを置き換えません。 KirkiのAPIは、デフォルトのWordPressメソッドの単なるラッパーであり、構文を簡素化し、より少ないコードでより多くの書き込みを可能にし、最も高度な機能のいくつかを利用できるようにします。

githubからkirkiファイルをダウンロードし、テーマフォルダーの内側に「kirki」という名前のフォルダーに入れます。

最初に、新しい構成を作成する必要があります。構成には一意のIDがあり、同じconfig_idを使用するすべてのフィールドはその構成のプロパティを継承します。

構成を追加すると、パネル、セクション、フィールドを追加できます。フィールドを追加できるようにするには、カスタマイザーに少なくとも1つのセクションが必要であることに注意してください。フィールドは「孤児」になることはできません。セクションにグループ化する必要があります。

構成

Kirkiを使用すると、プラグインまたはテーマの構成を作成し、IDでグループ化できます。その後、そのIDにリンクされているすべてのフィールドは、構成プロパティを継承します。

<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>

option_type：optionまたはtheme_mod。
option_name：テーマmodの代わりにオプションを使用している場合は、これを使用してオプション名を指定できます。その後、すべてのフィールドは、WordPressデータベースのそのオプションの下にある配列として保存されます。
パネル

パネルはセクションのラッパーであり、複数のセクションをグループ化する方法です。

セクション

セクションはフィールドのラッパーであり、複数のフィールドをグループ化する方法です。すべてのフィールドはセクションに属している必要があり、フィールドは孤児ではありません。

<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>

フィールド

フィールドは、ユーザーがその内部にカスタムテキストを入力できるように提供されるテキストボックスやチェックボックスなどのオプションです。各フィールドは、特定のセクションのみに関連付けられている必要があります。

<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をテーマに統合します

最初にする必要があるのは、Kirkiをテーマと統合することです。これを行うには、ライブラリフォルダーにある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ソースからダウンロードしたファイルは、テーマフォルダー内の「Kirki」という名前のフォルダーに配置する必要があります。

構成の作成

前述のように、オプションで使用できる構成を作成する必要があります。 Theme-Options.phpファイルに次のコードを追加します

テーマの構成を正常に作成しました。これで、オプションで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管理パネル内のオプションをカスタマイズして、これらのオプションをカスタマイズします。
フロントページのカスタムテンプレートを作成

フロントページのカスタムテンプレートを作成できるため、index.phpファイルを変更したくありません。このカスタムテンプレートでは、カスタマイズされたフロントページを表示するようにコードを追加します。そのため、フロントページに内容を表示するカスタムテンプレートを作成します。
homepage.phpというテーマフォルダー内に新しいファイルを作成し、以下を追加します。
このファイルの内部には、スライダーを表示するためにコードを追加します。
これを静的なフロントページに設定する必要があります。しかし、最初はこのテンプレートを使用するページはありません。このテンプレートを使用する新しいページを作成する必要があります。次の手順に従ってください：
```
Kirki::add_config( 'my_theme', array(
 'capability' => 'edit_theme_options',
 'option_type' => 'option',
 'option_name' => 'my_theme',
) );
```
新しいページ（**ページ>新しい**を追加）を作成します。

ページにタイトルを追加します（例：**私のカスタムホームページ**）。
1. Select ** Custom HomePage **から**テンプレート**下のドロップダウン**ページ属性**。
2. **公開**ボタンをクリックします。
4. 次に、WordPressカスタマイザー内の静的フロントページオプションを静的ページに設定し、その下のドロップダウンからカスタムホームページを選択します（または、ページに他の名前を使用した場合は、それを選択してください）。 >
カスタマイザーの保存と公開ボタンをクリックすることを忘れないでください。
homepage.phpファイルにコードを追加していないため、カスタマイザー内の目に見える変更にまだ気付くことはありません。 homepage.phpを開いて、コードの追加を開始します！
次のコードを追加しましょう：

上記のコードには、現在のテーマディレクトリのheader.phpとfooter.phpファイルが含まれています。カスタマイザーを更新すると、おそらくナビゲーションとフッターメニューのみが表示されます。
製品スライダー

製品スライダーは、最も創造的またはベストセラー製品を示しています。これらは、訪問者があなたのウェブサイトで最初に見る製品です。製品スライダーの作成には、次の手順が含まれます
```
Kirki::add_panel( 'panel_id', array(
 'priority' => 10,
 'title' => __( 'My Title', 'textdomain' ),
 'description' => __( 'My Description', 'textdomain' ),
) );
```
スライダーのセットを作成します（一般的に5）。

スライダーに背景画像を追加します。

スライダーにキャプションを追加します。
1. スライダーのセットを作成
2. テーマにスライダーを表示するためにFlexSliderを使用しています。したがって、最初に、GitHubからFlexSliderをダウンロードする必要があります。 jquery.flexslider.js、flexslider.css、bg_play_pause.png、およびfontsフォルダーを使用する必要があります。これらのリソースをテーマフォルダーにコピーします
 note
 
 私が提供したテーマと一緒に作業している場合は、jsssフォルダー内に存在するベンダーフォルダー内にjquery.flexslider.jsをコピーできます。CSSフォルダー内のflexslider.cssファイル、bg_play_pause.pngファイル内のbg_play_pause.pngファイルイメージフォルダーとフォントフォルダーの内容（FlexSliderのgithubソースから）は、既にテーマフォルダー内にあるフォントフォルダー内にあります。
 次に、テーマを使用してこれらのファイルを排除する必要があります。ライブラリフォルダー内に存在するEnqueue-scripts.phpファイルに次のenqueueコードを追加します：
```
Kirki::add_config( 'my_theme', array(
 'capability' => 'edit_theme_options',
 'option_type' => 'option',
 'option_name' => 'my_theme',
) );
```
 次に、次のコードを使用してライブラリフォルダー内のenqueue-style.php内のCSSファイルをenqueします。
 
 おめでとうございます！テーマを使用してFlexSliderファイルを正常に編成しました。ページのソースをチェックすることで、Enqueueが成功しているかどうかを確認できます。ページを右クリックして表示ページソースをクリックして、ページのソースを確認できます。 FlexSliderを検索すると、JSとCSSのファイルが正常に除外されていることがわかります。
```
Kirki::add_panel( 'panel_id', array(
 'priority' => 10,
 'title' => __( 'My Title', 'textdomain' ),
 'description' => __( 'My Description', 'textdomain' ),
) );
```
 note
 
 私が提供したテーマを使用していない場合は、次の部分を編集する必要があるかもしれません：/js/vendor/jquery.flexslider.jsおよび/css/flexslider.cssおよびcssファイル。
 
 まず、スライダーの画像、リンク、キャプションを表示するWordPressカスタマイザー内にパネルを作成しましょう。
 Theme-Options.phpをもう一度開き、次のコードを追加します。
 
 上記のコードは、カスタマイザーに製品スライダーパネルを追加しますが、このパネルがなく、このパネルに関連するセクションが含まれていないセクションがないため、表示されません。混乱していますか？続行しましょう。それがより明確になります。
 
 次に、ホームページに製品スライダーという名前のセクションを追加する必要があります。これは、次のコードをtheme-options.phpファイルに追加することで実行できます。
```
Kirki::add_section( 'section_id', array(
 'title' => __( 'My Title', 'textdomain' ),
 'description' => __( 'My Description', 'textdomain' ),
 'panel' => '', // Not typically needed.
 'priority' => 160,
 'capability' => 'edit_theme_options',
 'theme_supports' => '', // Rarely needed.
) );
```
 上記のコードは、製品スライダーパネル内のホームページセクションの製品スライダーを追加します。
 次に、画像を表示するためのフィールドを追加します。次のコードを使用して画像フィールドを作成できます。
 
 さあ、カスタマイザーを更新すると、製品スライダーパネルが表示されているのが表示されます。
```
function my_custom_text_settings( $fields ) {

 // Add the controls
 $fields[] = array(
 'label' => __( 'My custom control', 'translation_domain' ),
 'section' => 'my_section',
 'settings' => 'my_setting',
 'type' => 'text',
 'priority' => 10,
 'option_type' => 'theme_mod',
 'capability' => 'edit_theme_options',
 );

 $fields[] = array(
 'label' => __( 'My custom control 2', 'translation_domain' ),
 'section' => 'my_section',
 'settings' => 'my_setting_2',
 'type' => 'text',
 'priority' => 20,
 'option_type' => 'theme_mod',
 'capability' => 'edit_theme_options',
 );

 return $fields;

}
add_filter( 'kirki/fields', 'my_custom_text_settings' );
```
 画像フィールドを通じて、スライダーに表示される画像を追加できます。スライダーに少なくとも5つの画像を使用できるように、さらに4つの類似したフィールドを作成します。次のコードでは、さらに4つの画像フィールドが追加されます
 
 これらのフィールドに画像をアップロードしてから、ランディングページに表示できます。
 スライダーに背景画像を追加
```
// Integrating Kirki with our theme
include_once( get_template_directory() . '/kirki/kirki.php' );
```
 次に、製品スライダーのコードを追加します。内部
```
Kirki::add_config( 'my_theme', array(
 'capability' => 'edit_theme_options',
 'option_type' => 'option',
 'option_name' => 'my_theme',
) );
```
 これらの行は、カスタマイザー内で保存した各スライドの画像を取得します。次のステップでは、これらの画像のいずれかが存在するかどうかを確認します。それらのいずれかが存在する場合は、スライダーに電話します。
```
Kirki::add_panel( 'panel_id', array(
 'priority' => 10,
 'title' => __( 'My Title', 'textdomain' ),
 'description' => __( 'My Description', 'textdomain' ),
) );
```
 この行は、スライド内の画像が存在するかどうかを確認します。画像が存在する場合、FlexSliderが呼び出されます。次に、以下のコードを使用して、各スライドの画像をエコーします。
 
 次に、FlexSliderが機能するためにJavaScriptを追加する必要があります。
```
Kirki::add_section( 'section_id', array(
 'title' => __( 'My Title', 'textdomain' ),
 'description' => __( 'My Description', 'textdomain' ),
 'panel' => '', // Not typically needed.
 'priority' => 160,
 'capability' => 'edit_theme_options',
 'theme_supports' => '', // Rarely needed.
) );
```
 スライダーにキャプションを追加
```
function my_custom_text_settings( $fields ) {

 // Add the controls
 $fields[] = array(
 'label' => __( 'My custom control', 'translation_domain' ),
 'section' => 'my_section',
 'settings' => 'my_setting',
 'type' => 'text',
 'priority' => 10,
 'option_type' => 'theme_mod',
 'capability' => 'edit_theme_options',
 );

 $fields[] = array(
 'label' => __( 'My custom control 2', 'translation_domain' ),
 'section' => 'my_section',
 'settings' => 'my_setting_2',
 'type' => 'text',
 'priority' => 20,
 'option_type' => 'theme_mod',
 'capability' => 'edit_theme_options',
 );

 return $fields;

}
add_filter( 'kirki/fields', 'my_custom_text_settings' );
```
 スライドにキャプションを追加することもできます。スライドごとにキャプション（テキスト）を受け入れ、エコーアウトする新しいフィールドをカスタマイザーに追加する必要があります。
 最初にフィールドを追加しましょう。
 
 他の4つのスライドについても同様のことができます。
 
 さて、フロントエンドのカスタムホームページテンプレート内で、これらのキャプションを表示するには、コードを少し編集する必要があります。
```
// Integrating Kirki with our theme
include_once( get_template_directory() . '/kirki/kirki.php' );
```
 最初に、変数にキャプションを保存する必要があります：
 
 次に、次のコードを置き換えます
 次のコードを使用して：
```
// Adding the configuration
Kirki::add_config( 'mc', array(
 'capability' => 'edit_theme_options',
 'option_type' => 'option',
 'option_name' => 'mc',
) );
```
 説明boxes
 
 説明ボックスは、当社の製品に関する便利な説明を提供できます。これらのボックスは、訪問者の注意を引くようにスライダーのすぐ下に配置されています。これらのボックスは、製品の詳細を表示したい場合に役立ちます。通常、3〜4個のボックス（またはパネル）がありますが、必要に応じてさらに多くのボックスを使用できます。このチュートリアルでは、3つのボックスを作成しており、各パネルに均一な高さを提供するために、基礎CSSフレームワークのデータエクラライザープロパティを使用しています。
```
/**
Template Name: Custom Homepage
**/
```
 仕事に取り掛かりましょう！
 
 パネルの作成
```
// Add the header
get_header();

// Add the footer
get_footer();
```
 最初は、説明ボックスを表示するための別のパネルを作成します。同じパネルの下にすべてのオプションを提供することもできます（最初に作成したパネルで）が、後で使用するために物事を分離することは良い習慣です。
 テーマOptions.phpファイル内に次のコードを追加する必要があります。
 
 セクションの作成
 
 製品の説明のために2つのセクションを作成します。 1つのセクションに画像をアップロードし、別のセクションに説明を追加します。
 最初に、次のコードを使用して画像のセクションを作成します。
 次に、説明のセクションを作成します：
 
 フィールドの作成
 
 次に、3つのフィールドを作成する必要があります（3つのボックスがあり、したがって3つの画像があるため）画像入力のために3つのフィールドがあり、その後、製品の説明のために3つのフィールドを作成します。コードは次のようになります
```
// adding flexslider scripts file in the footer
wp_register_script( 'flexslider-js', get_template_directory_uri() . '/js/vendor/jquery.flexslider.js', array( 'jquery' ), '', true );

wp_enqueue_script( 'flexslider-js' );
```
 出力の表示
 
 次のコードを使用して、カスタムテンプレートに出力を表示する必要があります。
```
Kirki::add_config( 'my_theme', array(
 'capability' => 'edit_theme_options',
 'option_type' => 'option',
 'option_name' => 'my_theme',
) );
```
 これにより、最初のボックスの出力が表示されます。同様に、他の2つのボックスについても同じことを行います。
```
Kirki::add_panel( 'panel_id', array(
 'priority' => 10,
 'title' => __( 'My Title', 'textdomain' ),
 'description' => __( 'My Description', 'textdomain' ),
) );
```
 カスタマイザーに移動して画像と説明を追加すると、入力を表示しているページが表示されます！
 
 製品の詳細
 
 この部分には、片側に画像があり、反対側に説明がある2つの行が含まれています。このページのこの部分またはセクションは、訪問者にとって製品の最も重要な側面の視覚として使用できます。
 パネルの作成
 
 最初にパネルを作成しましょう。製品の詳細と呼びます
 
 セクションの作成
```
Kirki::add_section( 'section_id', array(
 'title' => __( 'My Title', 'textdomain' ),
 'description' => __( 'My Description', 'textdomain' ),
 'panel' => '', // Not typically needed.
 'priority' => 160,
 'capability' => 'edit_theme_options',
 'theme_supports' => '', // Rarely needed.
) );
```
 以下のコードを使用して、フィールドのセクションを作成します。
 
 フィールドの作成
 
 以前に扱われた概念と同様に、以下のコードを使用して2つの画像フィールドと2つのテキストエリアフィールドを作成します。
```
function my_custom_text_settings( $fields ) {

 // Add the controls
 $fields[] = array(
 'label' => __( 'My custom control', 'translation_domain' ),
 'section' => 'my_section',
 'settings' => 'my_setting',
 'type' => 'text',
 'priority' => 10,
 'option_type' => 'theme_mod',
 'capability' => 'edit_theme_options',
 );

 $fields[] = array(
 'label' => __( 'My custom control 2', 'translation_domain' ),
 'section' => 'my_section',
 'settings' => 'my_setting_2',
 'type' => 'text',
 'priority' => 20,
 'option_type' => 'theme_mod',
 'capability' => 'edit_theme_options',
 );

 return $fields;

}
add_filter( 'kirki/fields', 'my_custom_text_settings' );
```
 出力を表示
 
 カスタムホームページテンプレートに出力を表示する必要があります。 homepage.phpファイルを開き、次のコードを追加します。
```
// Integrating Kirki with our theme
include_once( get_template_directory() . '/kirki/kirki.php' );
```
 他の行でも同じことをしてください。次に、カスタマイザーに移動して更新します。
 
 チームショーケース
```
// Adding the configuration
Kirki::add_config( 'mc', array(
 'capability' => 'edit_theme_options',
 'option_type' => 'option',
 'option_name' => 'mc',
) );
```
 ページのこのセクションは、チームに関する情報を提供するために使用されます。このセクションは便利です。なぜなら、訪問者が誰と仕事をするかを知ることができるからです。
 通常、このセクションは多くのチームメンバーで構成されている可能性があります。この例では、3人のメンバーにのみオプションを提供しますが、必要に応じて拡張できます。
 パネルの作成
 新しいパネルを作成し、チームショーケースと呼びます。
 
 セクションの作成
 
 次に、チームショーケースのオプションがあるセクションを作成します。
 
 フィールドの作成
 
 アバター用の3つの画像フィールドと、メンバーの名前の3つのテキストフィールドで構成される合計6つのフィールドがあります。
```
/**
Template Name: Custom Homepage
**/
```
 出力を表示
 
 カスタムホームページテンプレートにチームの3人のメンバーの画像と名前を表示します。 homepage.phpを開き、以下を挿入します
 最初に変数に画像とテキストの値を保存しましょう。
```
// Add the header
get_header();

// Add the footer
get_footer();
```
 次に、以下のコードを使用して各メンバーに表示できます。
```
Kirki::add_config( 'my_theme', array(
 'capability' => 'edit_theme_options',
 'option_type' => 'option',
 'option_name' => 'my_theme',
) );
```
 高度なトピック
 
 別のページからコンテンツを取得します
 
 別のページのコンテンツをホームページに取得することもできます。これは、会社に関する情報を表示したい場合に特に便利です。また、すでに米国のページがあります。同じコンテンツをもう一度書く必要はありません。 Kirkiを使用してそのコンテンツを取得するだけです
 このオプションを提供するための別のパネルを作成できます。これを行いましょう！
 
 パネルのコードは次のとおりです
 
 そして、セクションのコードを次に示します：
```
Kirki::add_panel( 'panel_id', array(
 'priority' => 10,
 'title' => __( 'My Title', 'textdomain' ),
 'description' => __( 'My Description', 'textdomain' ),
) );
```
 次に、管理者がフロントページに表示するページを選択できる場所からのドロップダウンを表示します。 Kirkiのドロップダウンページオプションを使用できます
```
Kirki::add_section( 'section_id', array(
 'title' => __( 'My Title', 'textdomain' ),
 'description' => __( 'My Description', 'textdomain' ),
 'panel' => '', // Not typically needed.
 'priority' => 160,
 'capability' => 'edit_theme_options',
 'theme_supports' => '', // Rarely needed.
) );
```
 以下を使用してフィールドを追加できます
 これにより、WordPressカスタマイザー内のオプションが有効になります。 Homepage.phpファイルを編集してコンテンツを表示できるようになりました。そのファイルを開き、このコンテンツを表示する場合の次のコードをコピーします。
 
 フロントページのみのサイドバーを作成する
```
function my_custom_text_settings( $fields ) {

 // Add the controls
 $fields[] = array(
 'label' => __( 'My custom control', 'translation_domain' ),
 'section' => 'my_section',
 'settings' => 'my_setting',
 'type' => 'text',
 'priority' => 10,
 'option_type' => 'theme_mod',
 'capability' => 'edit_theme_options',
 );

 $fields[] = array(
 'label' => __( 'My custom control 2', 'translation_domain' ),
 'section' => 'my_section',
 'settings' => 'my_setting_2',
 'type' => 'text',
 'priority' => 20,
 'option_type' => 'theme_mod',
 'capability' => 'edit_theme_options',
 );

 return $fields;

}
add_filter( 'kirki/fields', 'my_custom_text_settings' );
```
 WordPress Codexに従うと、テーマのサイドバーを作成するのは簡単です。ここで詳細を説明するのではなく、ライブラリ/Widget-areas.phpファイル内の次のコードを使用して、このテーマにサイドバーを追加するだけです。
 Widget-areas.phpを開き、以下を追加します
```
// Integrating Kirki with our theme
include_once( get_template_directory() . '/kirki/kirki.php' );
```
 note
 
 ライブラリフォルダー内にあるウィジェットエアーズ.phpファイルには、このテーマのすべてのウィジェット領域が含まれているため、サイドバーコードを追加しました。
 次に、このページにこのウィジェット領域を表示するには、homepage.phpファイルを編集する必要があります。 homepage.phpを開き、次のコードを追加します
 
 今、このサイドバーにウィジェットを追加すると、フロントページのみに表示されます。
```
// Adding the configuration
Kirki::add_config( 'mc', array(
 'capability' => 'edit_theme_options',
 'option_type' => 'option',
 'option_name' => 'mc',
) );
```
 それを包みます
 このチュートリアルでは、Kirki Toolkitを使用してWordPress Webサイトのランディングページを作成する方法を説明しました。これをいくつかのCSSで飾り、好きなようにカスタマイズできます。このツールキットの実装に関するクールなアイデアがあり、以下のコメントセクションでお知らせください。問題が発生したり、質問がある場合は、お知らせください。お手伝いしていただければ幸いです。
 
 WordPress Webサイトのカスタムホームページの設計に関するよくある質問 WordPressで静的フロントページを作成するにはどうすればよいですか？
 WordPressで静的フロントページを作成するのは非常に簡単です。まず、WordPressダッシュボードにログインする必要があります。次に、「ページ」に移動して、「新しい追加」をクリックします。この新しいページ「ホーム」またはあなたが好むその他の名前に名前を付けます。その後、別の新しいページを作成し、「ブログ」または「投稿」に名前を付けます。これらの2つのページを作成したら、「設定」に移動してから「読み取り」に移動します。「ホームページディスプレイ」の下で、「静的ページ」を選択します。ドロップダウンメニューで、自宅用に作成したページに「ホームページ」を設定し、ブログや投稿用に作成したページに「投稿ページ」を設定します。 [変更の保存]をクリックして設定を完成させます。
 WordPressホームページをカスタマイズするにはどうすればよいですか？ WordPress Customizerを使用できます。これにより、変更をリアルタイムでプレビューできます。アクセスするには、「外観」に移動し、「カスタマイズ」します。ここでは、サイトのアイデンティティ、色、背景画像、メニュー、ウィジェットなどを変更できます。または、ElementorやBeaver Builderなどのページビルダープラグインを使用できます。これらのプラグインは、ホームページを正確に設計できるようにするドラッグアンドドロップインターフェイスを提供します。 WordPressホームページ、視聴者と目的を念頭に置いておくことが重要です。あなたのホームページがあなたが誰であり、あなたが何をしているのかを明確に伝えてください。高品質の画像と説得力のある見出しを使用して、訪問者の注意を引いてください。訪問者がサイトを簡単にナビゲートできるように、デザインを清潔で簡単に保ちます。また、Webトラフィックの大部分がモバイルデバイスから来ているため、サイトがモバイルに優しいことを確認してください。 WordPressホームページへのカスタムヘッダー、「外観」に移動し、「カスタマイズ」します。テーマに応じて、「ヘッダー」または「ヘッダー画像」をクリックします。ここから、新しい画像をアップロードし、希望するサイズにトリミングし、必要なテキストやリンクを追加できます。完了したら「保存と公開」をクリックします。ヘッダ。「外観」に移動し、「カスタマイズ」します。テーマに応じて、「フッター」または「フッター設定」をクリックします。ここでは、フッターテキストをカスタマイズし、ウィジェットを追加し、レイアウトを変更できます。完了したら、「保存と公開」をクリックしますWordPressホームページにスライダーを追加するには、スライダーレボリューションやスマートスライダーなどのスライダープラグインが必要です。選択したプラグインをアクティブにして、新しいスライダーを作成し、画像を追加し、設定をカスタマイズできます。次に、プラグインに応じて、ショートコード、ウィジェット、またはテンプレートタグを使用してスライダーをホームページに追加できます。 WordPressホームページにブログセクションを追加して、最初に、ブログ投稿の別のページを作成したことを確認してください。次に、「外観」に移動し、「カスタマイズ」します。「ホームページ設定」をクリックし、「ホームページディスプレイ」の下に「最新の投稿」を選択します。これにより、ホームページに最新のブログ投稿が表示されます。
 WordPressホームページにソーシャルメディアアイコンを追加するにはどうすればよいですか？ソーシャルメディアウィジェットやシンプルなソーシャルアイコンなどのソーシャルメディアプラグイン。選択したプラグインをインストールしてアクティブにしたら、ソーシャルメディアリンクを追加して、好みのアイコンスタイルとサイズを選択できます。次に、ウィジェットを使用してソーシャルメディアアイコンをホームページに追加できます。クリーンで応答性の高いテーマを選択します。 Yoast SEOなどのSEOプラグインを使用して、タイトルタグとメタの説明を最適化します。コンテンツに関連するキーワードを含めますが、キーワードの詰め物は避けてください。ヘッダータグを使用してコンテンツを構成し、読みやすくします。また、ページ速度がランキングファクターであるため、サイトが迅速にロードされていることを確認してください。、連絡先フォーム7やWPFormsなどの連絡先フォームプラグインが必要です。選択したプラグインをインストールしてアクティブにしたら、新しい連絡先フォームを作成し、必要に応じてフィールドをカスタマイズできます。次に、ショートコードを使用してホームページに連絡フォームを追加できます。

以上がWordPress Webサイトのカスタムホームページを設計しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

WordPressは、CMSとして使用するためにコーディングの知識が必要ですか？Apr 30, 2025 am 12:03 AM

WordPressを使用するためにプログラミングの知識は必要ありませんが、プログラミングをマスターするとエクスペリエンスが向上する可能性があります。 1）CSSとHTMLを使用して、テーマスタイルを調整します。 2）PHPの知識は、トピックファイルを編集して機能を追加できます。 3）カスタムプラグインとメタタグはSEOを最適化できます。 4）更新の問題を防ぐために、サブトピックのバックアップと使用に注意してください。

WordPressを使用する際のセキュリティ上の考慮事項は何ですか？Apr 29, 2025 am 12:01 AM

tosecureawwordpresssite、soflowthesesteps：1）定期的にwordpresscore、themes、およびpluginstopatchvulnerabilities.2）usestrong、usestrong、usestrong、sonsandenabletototothentication.3）optformanagedagedwordpresshosting arehoredhoredhoredhored hosting withebapplicationfirewaal

WordPressは他のWebサイトビルダーとどのように比較されますか？Apr 28, 2025 am 12:04 AM

wordpressexexexexexcelsoverwebsitebuildersduetoits ffficability、scalability、andopen-sourcenature.1）それは、aversatilecmswitextensive sustomizationoptionsviathemesandplugins.2）その学習中心部のスチッピアベッタービューターフルフルフルフルフルフルフルカンセーズ。3）

2025年に開発者が使用できる5つのWordPressプラグインApr 27, 2025 am 08:25 AM

2025年のウェブサイト開発のための7つの必須ワードプレスプラグイン 2025年に一流のWordPress Webサイトを構築するには、速度、応答性、およびスケーラビリティが必要です。これを効率的に達成することは、しばしば戦略的なプラグインの選択にかかっています。この記事Highlig

WordPressは何のために使用しますか？Apr 27, 2025 am 12:14 AM

wordpresscanbeusedpurposesbeyondblogging.1）e-ocommerce：withwoocommerce、itcanbecomeafulloninestore.2）メンバーシップサイト：Pluginslikememberpressenable clusivecontentareas.3）ポートフォリオソイト：ThemeslikeasieasiestraololowStunnningStunnningStunnningStunnningStuntunnneDayOutssuntunnneaTuntunnnedrayOutuntuntuntunnnedraySuts

WordPressはポートフォリオWebサイトを作成するのに適していますか？Apr 26, 2025 am 12:05 AM

はい、wordpressisexcellentforcreatingportfoliowebsite.1）itoffers numersportfolio cilems like'astra'astra'foreasycustomization.2）プラグインエレメントレメントレディングの装飾、思想的な態度環境を

Webサイトをゼロからコーディングする上でWordPressを使用することの利点は何ですか？Apr 25, 2025 am 12:16 AM

wordpressisadvasteousovercodingawebsitefromscratchdueto：1）easeofuseandfasterdevelopment、2）柔軟性と吸収性、3）strongCommunitySupport、4）組み込みインセンアンドマークティングツール、5）費用対効果、6）レシュリティアップデート

WordPressがコンテンツ管理システムになっている理由は何ですか？Apr 24, 2025 pm 05:25 PM

wordpressisacmsduetoitseaseaseofuse、customization、usermanagement、seo、andcommunitysupport.1）ofssextensiveationization throughthemesandplugins.3）ofsiscontensiveativeizationization withintentmanagement withintententmanagement with inting ustomization.3）revisustusersandpermissions.4）拡張型を提供します

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティングサービスをチェックしてください。

SecLists

SecLists は、セキュリティテスターの究極の相棒です。これは、セキュリティ評価中に頻繁に使用されるさまざまな種類のリストを 1 か所にまとめたものです。 SecLists は、セキュリティテスターが必要とする可能性のあるすべてのリストを便利に提供することで、セキュリティテストをより効率的かつ生産的にするのに役立ちます。リストの種類には、ユーザー名、パスワード、URL、ファジングペイロード、機密データパターン、Web シェルなどが含まれます。テスターはこのリポジトリを新しいテストマシンにプルするだけで、必要なあらゆる種類のリストにアクセスできるようになります。