WordPressは、Web上のサイトの大部分で使用されます。さまざまな種類のサイトを作成することができますが、Webサイトの最も重要なコンポーネントの1つは常にホームページです。完璧なランディングページは、直帰率を引き下げ、トラフィックと顧客を後押しするのに役立ちます。この記事では、WordPress Webサイトのカスタムホームページ(またはランディングページ)を作成する方法について説明します。 この目標を達成するには多くの方法がありますが、これは
の1つの方法です。 この記事で説明するものの概要概要
最初に、これらの基本的な手順を完了します:
WordPressのインデックスページにスライダーを表示します
- 製品の説明を表示するための3つのパネルを表示します。
- 画像とテキストを並べて製品の詳細を含む2つの行を表示します。 チームメンバーを見せて パネル。
- 次に、次の高度なトピックを見ていきます
- 別のページからコンテンツを取得します(たとえば、About Usページから)。 フロントページのみのサイドバーを作成します。
最も重要な側面は、「WordPress Customizer」オプションからスライダーの画像を変更できることです。スライダーを追加したり、画像のスライドショーを作成したりするためのプラグインは必要ありません。
- 必要なもの
- テーマのオプションを提供するためのKirki Toolkit。
- スライダーオプションを提供するためのFlexSlider。
- マリア・アントニエッタ・ペルナは、このトピックに関する良い紹介を探しているなら、前の記事でkirkiをカバーしました。
キーテイクアウト
-
WordPressカスタマイザーを使用して、追加のプラグインを必要とせずにスライダーやサイドバーなどの要素を簡単に変更して、WordPressホームページを最適化します。
- Kirki Toolkitを使用してWordPressカスタマイザーの機能を強化し、最小限のコーディングで高度なカスタマイズを可能にします。 「ライブラリ」フォルダー内にテーマファイルを整理して、より良い管理とモジュール性を整理することにより、設計プロセスを合理化します。
- FlexSliderを使用して視覚的に魅力的な製品スライダーを作成します。テーマに直接統合されて、主要な製品や機能をホームページで際立たせて紹介します。 ホームページにカスタムテンプレートを使用して、メインインデックスファイルを変更せずに他のページと区別する一意のレイアウトを維持します。
- カスタイザー内のパネル、セクション、フィールドなどのUIコンポーネントを追加および管理するために、Kirkiのパワーを活用して、ユーザーの相互作用と経験を強化します。 チームショーケース、詳細な製品の説明、インタラクティブなスライダーなどの動的な要素を含めることにより、ホームページが有益で魅力的であることを確認してください。
- note
- モジュール性のために、ライブラリという名前のフォルダーを作成し、必要なコンポーネントのみを簡単に編集できるように、すべての関数ファイルを内部に配置しました。 Githubで私のテーマをフォークしてください。このテーマでは、functions.phpファイルからライブラリフォルダー内のすべてのファイルを呼び出しました。このテーマにFoundation CSSフレームワークを使用しました
- このチュートリアルで最も編集するライブラリフォルダー内にTheme-Options.phpという名前のファイルがあります。お気に入りのテキストエディターでそのファイルを開き、手を汚す準備をしてください! kirki
- kirkiはフレームワークではありません。これは、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>
- 機能:有効なWordPress機能。詳細については、WordPress Codexを参照してください
- 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というテーマフォルダー内に新しいファイルを作成し、以下を追加します。このファイルの内部には、スライダーを表示するためにコードを追加します。
これを静的なフロントページに設定する必要があります。しかし、最初はこのテンプレートを使用するページはありません。このテンプレートを使用する新しいページを作成する必要があります。次の手順に従ってください:<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カスタマイザー内の静的フロントページオプションを静的ページに設定し、その下のドロップダウンからカスタムホームページを選択します(または、ページに他の名前を使用した場合は、それを選択してください)。 >
homepage.phpファイルにコードを追加していないため、カスタマイザー内の目に見える変更にまだ気付くことはありません。 homepage.phpを開いて、コードの追加を開始します!
次のコードを追加しましょう:
上記のコードには、現在のテーマディレクトリのheader.phpとfooter.phpファイルが含まれています。カスタマイザーを更新すると、おそらくナビゲーションとフッターメニューのみが表示されます。
製品スライダー<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
私が提供したテーマと一緒に作業している場合は、jsssフォルダー内に存在するベンダーフォルダー内にjquery.flexslider.jsをコピーできます。CSSフォルダー内のflexslider.cssファイル、bg_play_pause.pngファイル内のbg_play_pause.pngファイルイメージフォルダーとフォントフォルダーの内容(FlexSliderのgithubソースから)は、既にテーマフォルダー内にあるフォントフォルダー内にあります。
次に、テーマを使用してこれらのファイルを排除する必要があります。ライブラリフォルダー内に存在する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>
次に、次のコードを使用してライブラリフォルダー内のenqueue-style.php内のCSSファイルをenqueします。<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>
noteTheme-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>
上記のコードは、製品スライダーパネル内のホームページセクションの製品スライダーを追加します。次に、画像を表示するためのフィールドを追加します。次のコードを使用して画像フィールドを作成できます。
さあ、カスタマイザーを更新すると、製品スライダーパネルが表示されているのが表示されます。
<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>
次に、製品スライダーのコードを追加します。 内部
<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>
これらの行は、カスタマイザー内で保存した各スライドの画像を取得します。次のステップでは、これらの画像のいずれかが存在するかどうかを確認します。それらのいずれかが存在する場合は、スライダーに電話します。
<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>
この行は、スライド内の画像が存在するかどうかを確認します。画像が存在する場合、FlexSliderが呼び出されます。次に、以下のコードを使用して、各スライドの画像をエコーします。<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>
スライドにキャプションを追加することもできます。スライドごとにキャプション(テキスト)を受け入れ、エコーアウトする新しいフィールドをカスタマイザーに追加する必要があります。最初にフィールドを追加しましょう。
<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>
説明boxes<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ファイル内に次のコードを追加する必要があります。最初に、次のコードを使用して画像のセクションを作成します。
次に、説明のセクションを作成します:フィールドの作成
次に、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>
カスタマイザーに移動して画像と説明を追加すると、入力を表示しているページが表示されます!製品の詳細
パネルの作成
最初にパネルを作成しましょう。製品の詳細と呼びます
セクションの作成
<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>
出力を表示
<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>
ページのこのセクションは、チームに関する情報を提供するために使用されます。このセクションは便利です。なぜなら、訪問者が誰と仕事をするかを知ることができるからです。通常、このセクションは多くのチームメンバーで構成されている可能性があります。この例では、3人のメンバーにのみオプションを提供しますが、必要に応じて拡張できます。
パネルの作成新しいパネルを作成し、チームショーケースと呼びます。
<span>/** </span><span>Template Name: Custom Homepage </span><span>**/</span>
出力を表示カスタムホームページテンプレートにチームの3人のメンバーの画像と名前を表示します。 homepage.phpを開き、以下を挿入します
最初に変数に画像とテキストの値を保存しましょう。<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>
<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カスタマイザー内のオプションが有効になります。 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ファイル内の次のコードを使用して、このテーマにサイドバーを追加するだけです。Widget-areas.phpを開き、以下を追加します
<span>// Integrating Kirki with our theme </span><span>include_once( get_template_directory() . '/kirki/kirki.php' );</span>
note次に、このページにこのウィジェット領域を表示するには、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で飾り、好きなようにカスタマイズできます。このツールキットの実装に関するクールなアイデアがあり、以下のコメントセクションでお知らせください。問題が発生したり、質問がある場合は、お知らせください。お手伝いしていただければ幸いです。
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 サイトの他の関連記事を参照してください。

このガイドは、WordPress PDFプラグインを使用して、WordPressの投稿とページにPDFファイルを埋め込み、保護する方法を示しています。 PDFは、カタログからプレゼンテーションまで、さまざまなコンテンツに対してユーザーフレンドリーで普遍的にアクセス可能な形式を提供します。 この方法は

WordPressは、初心者が簡単に始めることができます。 1.バックグラウンドにログインした後、ユーザーインターフェイスは直感的であり、シンプルなダッシュボードは必要なすべての関数リンクを提供します。 2。基本操作には、コンテンツの作成と編集が含まれます。 WysiWygエディターは、コンテンツの作成を簡素化します。 3.初心者は、プラグインとテーマを介してウェブサイトの機能を拡張でき、学習曲線は存在しますが、練習を通じて習得できます。

人々は、その力と柔軟性のためにWordPressを使用することを選択します。 1)WordPressは、さまざまなWebサイトのニーズに適した、使いやすさとスケーラビリティを備えたオープンソースのCMSです。 2)豊富なテーマとプラグイン、巨大なエコシステム、強力なコミュニティサポートがあります。 3)WordPressの作業原則は、テーマ、プラグイン、コア関数に基づいており、PHPとMySQLを使用してデータを処理し、パフォーマンスの最適化をサポートします。

WordPressのコアバージョンは無料ですが、使用中に他の料金が発生する場合があります。 1。ドメイン名とホスティングサービスには支払いが必要です。 2。高度なテーマとプラグインが充電される場合があります。 3.プロフェッショナルサービスと高度な機能が請求される場合があります。

WordPress自体は無料ですが、使用するには余分な費用がかかります。1。WordPress.comは、無料から支払いまでの範囲のパッケージを提供し、価格は月あたり数ドルから数十ドルまでの範囲です。 2。WordPress.orgでは、ドメイン名(年間10〜20米ドル)とホスティングサービス(月額5〜50米ドル)を購入する必要があります。 3.ほとんどのプラグインとテーマは無料で、有料価格は数十から数百ドルです。適切なホスティングサービスを選択し、プラグインとテーマを合理的に使用し、定期的に維持および最適化することにより、WordPressのコストを効果的に制御および最適化できます。

WIXは、プログラミングの経験がないユーザーに適しており、WordPressは、よりコントロールと拡張機能を必要とするユーザーに適しています。 1)WIXはドラッグアンドドロップエディターとリッチテンプレートを提供しているため、Webサイトをすばやく構築できます。 2)オープンソースのCMSとして、WordPressには巨大なコミュニティとプラグインエコシステムがあり、詳細なカスタマイズと拡張をサポートしています。

wordpressisisgoodforvirtalayanywebprojectoitsversitilityasacms.itexcelsin:1)ユーザーフレンドリー、柔軟性と柔軟性と顧客化の維持、およびプルージンの数値化; 3)seooptimization;

WordPressはコンテンツ管理システム(CMS)です。コンテンツ管理、ユーザー管理、テーマ、プラグイン機能を提供して、Webサイトコンテンツの作成と管理をサポートします。その実用的な原則には、ブログから企業Webサイトまで、さまざまなニーズに適したデータベース管理、テンプレートシステム、プラグインアーキテクチャが含まれます。


ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

Dreamweaver Mac版
ビジュアル Web 開発ツール

Safe Exam Browser
Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

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

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

ホットトピック



