無料のWordpressテーマ【OnePress】のヘッダーをカスタマイズする方法

目次

---

1. 概要
2. 解決方法

概要

---

・グローバルナビゲーション以外にヘッダーに文字や画像を追加したい
・ヘッダーのタイトルやロゴの周辺に文字や画像を追加したい等

OnePressのheader.phpは関数で作成されているので、細かいレイアウトの調整が出来ませんでした。 細かいレイアウトの調整のために関数内容部分を子テーマの方で編集したのですが、レイアウトが反映されず困ったので今回の調査した解決方法をOnePressのテーマを使用している方に共有できればと思い記事を書きました。

解決方法

---

テーマのinc/template-tags.phpのコードをfunctions.phpに追加する

親テーマor子テーマのinc/template-tags.phpの187行目~247行目をコピーする。以下のコードがheaderに当たるコードになります。

add_action( 'onepress_site_start', 'onepress_site_header' );
if ( ! function_exists( 'onepress_site_header' ) ) {
    /**
     * Display site header
     */
    function onepress_site_header() {
        $header_width = get_theme_mod( 'onepress_header_width', 'contained' );
        $is_disable_sticky = sanitize_text_field( get_theme_mod( 'onepress_sticky_header_disable' ) );
        $classes = array(
            'site-header',
            'header-' . $header_width,
        );

        if ( $is_disable_sticky != 1 ) {
            $classes[] = 'is-sticky no-scroll';
        } else {
            $classes[] = 'no-sticky no-scroll';
        }

        $transparent = 'no-t';
        if ( onepress_is_transparent_header() ) {
            $transparent = 'is-t';
        }
        $classes[] = $transparent;

        $pos = sanitize_text_field( get_theme_mod( 'onepress_header_position', 'top' ) );
        if ( $pos == 'below_hero' ) {
            $classes[] = 'h-below-hero';
        } else {
            $classes[] = 'h-on-top';
        }

        ?>
        <header id="masthead" class="<?php echo esc_attr( join( ' ', $classes ) ); ?>" role="banner">
            <div class="container">
                <div class="site-branding">
                <?php
                onepress_site_logo();
                ?>
                </div>
                <div class="header-right-wrapper">
                    <a href="#0" id="nav-toggle"><?php _e( 'Menu', 'onepress' ); ?><span></span></a>
                    <nav id="site-navigation" class="main-navigation" role="navigation">
                        <ul class="onepress-menu">
                            <?php wp_nav_menu(
                                array(
                                    'theme_location' => 'primary',
                                    'container' => '',
                                    'items_wrap' => '%3$s',
                                )
                            ); ?>
                        </ul>
                        
                    </nav>
                    <!-- #site-navigation -->
                </div>
            </div>
        </header><!-- #masthead -->
        <?php
    }
}

このコードをそのままfunction.phpに追加します。 headerタグがありますので、その部分を編集していただければレイアウトが反映されると思います。