WordPressテーマ【Magazine Plus】のカスタマイズ！ヘッダーの日付、グローバルナビを追加修正！

WordPressの公式テーマ【Magazine Plus】の使い方やカスタマイズについて書いてみたいと思います。今回はヘッダー左上の日付部分、右上のグローバルナビゲーションの追加です。

関連記事

前回書いたコピーライトの修正方法はこちらをご覧ください。

左上の日付の修正

左上に今日の日付が書いてあるようですが、なんだか変な感じです。

こちらを修正したいと思います。

日付についてはWordPress Codex 日本語版も参考になると思います。

日付と時刻の書式 – WordPress Codex 日本語版

日付に関して書いてある場所は、/inc/hook/custom.phpのようです。
370行目辺りにあるようです。

if ( ! function_exists( 'magazine_plus_header_top_content' ) ) :

/**
* Render top head.
*
* @since 1.0.0
*/
function magazine_plus_header_top_content() {
$show_ticker = magazine_plus_get_option( 'show_ticker' );
$show_date   = magazine_plus_get_option( 'show_date' );

if (
false === $show_date &&
false === $show_ticker &&
false === has_nav_menu( 'top' ) &&
! ( true === magazine_plus_get_option( 'show_social_in_header' ) && has_nav_menu( 'social' ) )
) {
return;
}
?>
<div id="tophead">
<div class="container">
<?php if ( true === $show_date ) : ?>
<div class="head-date">
<?php echo date_i18n( _x( 'd M, Y', 'Date Format', 'magazine-plus' ) ); ?>
</div><!-- .head-date -->
<?php endif; ?>
<?php if ( true === $show_ticker ) : ?>
<div class="top-news">
<span class="top-news-title">
<?php $ticker_title = magazine_plus_get_option( 'ticker_title' );  ?>
<?php echo ( ! empty( $ticker_title ) ) ? esc_html( $ticker_title ) : '&nbsp;'; ?>
</span>
<?php echo magazine_plus_get_news_ticker_content(); ?>
</div> <!-- #top-news -->
<?php endif; ?>

<?php if ( true === magazine_plus_get_option( 'show_social_in_header' ) && has_nav_menu( 'social' ) ) : ?>
<div class="header-social">
<?php the_widget( 'Magazine_Plus_Social_Widget' ); ?>
</div><!-- .header-social -->
<?php endif; ?>
<?php if ( has_nav_menu( 'top' ) ) : ?>
<div id="top-nav">
<?php
wp_nav_menu(
array(
'theme_location'  => 'top',
'container'       => 'nav',
'container_class' => 'top-navigation',
'depth'           => 2,
'fallback_cb'     => false,
)
);
?>
</div> <!-- #top-nav -->
<?php endif; ?>



</div><!-- .container -->
</div><!-- #tophead -->
<?php
}

endif;

394行目あたりを修正します。

<?php echo date_i18n( _x( 'd M, Y', 'Date Format', 'magazine-plus' ) ); ?>

下記のようにしてみます。

<?php echo date_i18n( _x( 'Y年n月j日', 'Date Format', 'magazine-plus' ) ); ?>

こちらを子テーマのfunctions.phpにコピペするのですが、
もし子テーマ？という方や子テーマを作りたい方は、下記のページを参考にしてください。

下記の命令をすべて子テーマのfunctions.phpにコピペしてください。

if ( ! function_exists( 'magazine_plus_header_top_content' ) ) :

/**
* Render top head.
*
* @since 1.0.0
*/
function magazine_plus_header_top_content() {
$show_ticker = magazine_plus_get_option( 'show_ticker' );
$show_date   = magazine_plus_get_option( 'show_date' );

if (
false === $show_date &&
false === $show_ticker &&
false === has_nav_menu( 'top' ) &&
! ( true === magazine_plus_get_option( 'show_social_in_header' ) && has_nav_menu( 'social' ) )
) {
return;
}
?>
<div id="tophead">
<div class="container">
<?php if ( true === $show_date ) : ?>
<div class="head-date">
<?php echo date_i18n( _x( 'Y年n月j日', 'Date Format', 'magazine-plus' ) ); ?>
</div><!-- .head-date -->
<?php endif; ?>
<?php if ( true === $show_ticker ) : ?>
<div class="top-news">
<span class="top-news-title">
<?php $ticker_title = magazine_plus_get_option( 'ticker_title' );  ?>
<?php echo ( ! empty( $ticker_title ) ) ? esc_html( $ticker_title ) : '&nbsp;'; ?>
</span>
<?php echo magazine_plus_get_news_ticker_content(); ?>
</div> <!-- #top-news -->
<?php endif; ?>

<?php if ( true === magazine_plus_get_option( 'show_social_in_header' ) && has_nav_menu( 'social' ) ) : ?>
<div class="header-social">
<?php the_widget( 'Magazine_Plus_Social_Widget' ); ?>
</div><!-- .header-social -->
<?php endif; ?>
<?php if ( has_nav_menu( 'top' ) ) : ?>
<div id="top-nav">
<?php
    wp_nav_menu(
        array(
            'theme_location'  => 'top',
            'container'       => 'nav',
            'container_class' => 'top-navigation',
            'depth'           => 2,
            'fallback_cb'     => false,
        )
    );
 ?>
</div> <!-- #top-nav -->
<?php endif; ?>



</div><!-- .container -->
</div><!-- #tophead -->
<?php
}

endif;

前回同様、functions.phpにコピペする場合、修正する部分だけではなく、一連の命令すべてを持ってくる必要があります。
一部の場合、エラーになると思います。
画面が真っ白になり、エラーメッセージが出た場合は、コピペを削除し、もう一度やり直してください。

子テーマのfunctions.phpをアップしたら確認してみます。

もしも日付部分をスラッシュなどにしたい場合は、「年月」を「/」にします。
下記のように修正すればよいと思います。

<?php echo date_i18n( _x( 'Y/n/j', 'Date Format', 'magazine-plus' ) ); ?>

もしも日付のボックスそのものを削除したい場合は

<?php if ( true === $show_date ) : ?>
<div class="head-date">
<?php echo date_i18n( _x( 'Y/n/j', 'Date Format', 'magazine-plus' ) ); ?>
</div><!-- .head-date -->
<?php endif; ?>

部分をさっくり削除すれば消えると思います。

Latest Newsを日本語に変更する

左上の日付の隣に「Latest News」となっている部分を日本語に変えてみたいと思います。
そのままでも良いとは思いますが、、

［ダッシュボード］の［外観］から［カスタマイズ］を押します。

「Theme Options」を押します。

「Header Options」を押します。

「Ticker Title」の 「Latest News」を「最新ニュース」に変えます。

「公開」を押します。

アップして確認します。

右上にメニューを入れる

デフォルトでは何もありませんが、デモにはメニューがあります。

こちらを入れてみます。

［ダッシュボート］の［外観］にある［カスタマイズ］をクリックします。

「メニュー」をクリックします。

メニューを開くと、どうやら【Magazine Plus】では５つのメニュー場所が用意されているようです。

ここから新規にメニューを作っても良いですが、幅も狭いしわかりずらいと思いますので、いったん左上の「×」を押して戻ります。

［ダッシュボート］の［外観］にある［メニュー］をクリックします。

「メニュー名」のところに任意の名前を入れます。

どんな名前でも良いのですが、例として「header-right-menu」とします。
「メニューを作成」ボタンを押します。

「Top Menu」にチェックをつけて「メニューを保存」を押します。

左側にあるページを追加します。
とりあえずテストサイトは「サンプルページ」しかないので、こちらにチェックをして、「メニューに追加」を押します。

メニュー構造の下に「サンプルページ」が来たと思います。「メニューを保存」を押します。

サイトを確認してみます。

右上に「サンプルページ」のリンクが追加されました。