前回は主に外観＞カスタマイズで開くカスタマイズ画面での編集を行いました。

OnePressはカスタマイズ画面では有料版でないとセクションの入れ替えができません。

しかし、子テーマを作成してそのfunctions.php上でフィルターフックやアクションフックを使えば、セクションの入れ替えなどのカスタマイズが可能です。

新たなセクションを追加したい場合も、同じ子テーマのfunctions.php上でアクションフックを使って追加できます。

やり方をまとめましたので、参考に以下をご覧ください。

また、有料版OnePress Plusを導入した場合についても記載しました。

※子テーマの作成については下記インストール編をご確認ください。

OnePressテーマ活用方法まとめ３－子テーマでカスタマイズ・有料版OnePress Plus編

セクションの入れ替え

例えばニュースのセクションをヒーローセクション（トップのメイン画像）のすぐ下に動かすとします。

親テーマのtemplate-frontpage.phpの以下の部分で、セクションの表示順が決められています。

if ( ! has_action( 'onepress_frontpage_section_parts' ) ) {

				$sections = apply_filters( 'onepress_frontpage_sections_order', array(
                    'features', 'about', 'services', 'videolightbox', 'gallery', 'counter', 'team',  'news', 'contact'
                ) );

				foreach ( $sections as $section ){
					/**
                     * Load section if active
                     *
					 * @since 2.1.1
					 */
				    if ( Onepress_Config::is_section_active( $section ) ) {
					    onepress_load_section( $section );
                    }

				}

apply_filersのarrayに’features”about’とセクション名が並んでいます。ここで表示順が決められています。

ここに「onepress_frontpage_sections_order」というフィルターフック用意されているので、
子テーマのfunctions.phpに次のようなコードを追加します。

function my_onepress_frontpage_sections_order() {
$mysections = array('news', 'features', 'about', 'services', 'videolightbox','gallery', 'counter', 'team', 'contact');
return $mysections;
}
add_filter('onepress_frontpage_sections_order', 'my_onepress_frontpage_sections_order');

my_onepress_frontpage_sections_orderという子テーマで設定したフィルターフックを足しています。
子テーマでは’news”features’と、newsセクションを一番始めに持ってきました。

実際に行ってみると、以下のように表示されます。

メニュー項目部分の表示順序は外観＞メニューから手動で直してください。

※セクション名について
上記で順序を入れ替えたテンプレート上のセクション名はカスタマイズ画面で表示される日本語名とは異なります。
対比は以下の通りです。

セクション名	スラッグ
セクション：ヒーロー
セクション：特集	features
セクション：私たちについて	about
セクション：サービス	services
セクション：ビデオライトボックス	videolight
Section：Gallery	gallery
チームセクション	team
セクション：ニュース	news
セクション：お問い合わせ	contact

セクションの新規追加

WordPressのテーマ「OnePress」のトップページには、あらかじめ10個のセクションが用意されていますが、ここに新たなセクションを追加してみます。

外観＞テーマエディター＞子テーマのfunctions.phpを開きます。

【WordPress】OnePressテーマ活用方法まとめ１－インストール編で足した子テーマのfunctions.phpには、予め「about」セクションの後に新たなセクションを追加するアクションフックが準備されています。

アクションフックコードはコメントアウトされているので、「/*」「*/」部分を削除して有効化しましょう。

/**
 * Hook to add custom section after about section
 *
 * @see wp-content/themes/onepress/template-frontpage.php
 */


function add_my_custom_section(){
    ?>
    <section id="my_section" class="my_section section-padding onepage-section">
        <div class="container">
            <div class="section-title-area">
                <h5 class="section-subtitle"> My section subtitle</h5>
                <h2 class="section-title"> My section title</h2>
            </div>
            <div class="row">
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>

            </div>
        </div>
    </section>
    <?php
}
add_action( 'onepress_after_section_about', 'add_my_custom_section'  );

コメントアウトを削除してファイルを更新すると、「about」セクションの次に「My section title」というセクションが追加されています。

デモサイトを確認していただくと、追加されているのが分かります。

英語のテキスト部分を自由に書き換えて好みの内容にすればOKです。

上記のフック名は「onepress_after_section_about」ですが、例えば「onepress_after_section_services」とすれば「service」セクションの後に新しいセクションを追加できます。

また、「onepress_before_section_about」とすれば、「about」セクションの前に新しいセクションを追加できます。

更に追加したい場合は、上記コードをコピーして、「add_my_custom_section」を「add_my_custom_section_2」とすれば、複数のセクションの追加が可能になります。

有料版OnePress Plusを導入した場合

外観＞OnePressテーマのOverviewパネルを見ると、有料版OnePress Plusの場合にのみ利用できるセクションが画面下部に表示されています。

有料版OnePress Plusの場合、GoogleMapを緯度・経度の数値のみ入力するだけで設置できたり、ヒーロー部分に動画を利用することが可能です。

セクションの数も増えるので、デザインの幅も広がります。

公式サイトの有料版OnePress Plusのデモサイトはこちらです。

その他の機能は、OnePress Plusをご確認ください。