こんな人にオススメです!
- WordPress公式テーマ、Twenty Seventeenのカスタマイズがしたい。
- Twenty Seventeen のフッターをcopyright表記に変更したい。
Twenty Seventeenに限らず、WordPressの公式テーマのフッターは、デフォルトだとwordpress.orgへのリンクが表示されています。
「Proudly powered by WordPress」
しかし、自身で運営しているサイトだったら、ここはやはりコピーライト表記に変更しておきたいですよね。そこで、今回は、Twenty Seventeenのフッターをコピーライト表示に変更するカスタマイズ方法です。
子テーマがあるのを前提に作業を進めていきます。
copyright表記にするにはどこを変更するの?
まず、真っ先に思いつくのは、footer.phpだと思いますが、Twenty Seventeenの場合、footer.phpには直接書かれていません。
Twenty Seventeenのfooter.phpの38行目を見てみましょう。
<?php
/**
* The template for displaying the footer
*
* Contains the closing of the #content div and all content after.
*
* @link https://developer.wordpress.org/themes/basics/template-files/#template-partials
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/
?>
</div><!-- #content -->
<footer id="colophon" class="site-footer" role="contentinfo">
<div class="wrap">
<?php
get_template_part( 'template-parts/footer/footer', 'widgets' );
if ( has_nav_menu( 'social' ) ) : ?>
<nav class="social-navigation" role="navigation" aria-label="<?php _e( 'Footer Social Links Menu', 'twentyseventeen' ); ?>">
<?php
wp_nav_menu( array(
'theme_location' => 'social',
'menu_class' => 'social-links-menu',
'depth' => 1,
'link_before' => '<span class="screen-reader-text">',
'link_after' => '</span>' . twentyseventeen_get_svg( array( 'icon' => 'chain' ) ),
) );
?>
</nav><!-- .social-navigation -->
<?php endif;
get_template_part( 'template-parts/footer/site', 'info' );
?>
</div><!-- .wrap -->
</footer><!-- #colophon -->
</div><!-- .site-content-contain -->
</div><!-- #page -->
<?php wp_footer(); ?>
</body>
</html>
「get_template_part」は、他のphpファイル(テンプレートパーツ)を呼び出す関数です。
「template-parts/footer」でディレクトリを指定して、その中の「/site’, ‘info’」というファイルを呼び出しています。
「 /site’, ‘info’」は、site-infoファイルという意味なので、つまり
/wp-content/themes/twentyseventeen/template-parts/footer/site-info/
を呼び出している訳です。
それでは、親テーマであるTwenty Seventeenのsite-infoファイルを確認してみましょう。
<?php
/**
* Displays footer site info
*
* @package WordPress
* @subpackage Twenty_Seventeen
* @since 1.0
* @version 1.0
*/
?>
<div class="site-info">
<a href="<?php echo esc_url( __( 'https://wordpress.org/', 'twentyseventeen' ) ); ?>"><?php printf( __( 'Proudly powered by %s', 'twentyseventeen' ), 'WordPress' ); ?></a>
</div><!-- .site-info -->
ありました!
13行目が目的の箇所です。ここをcopyright表記に変更してあげればいいんです。
それでは、実際の作業に入りましょう。
カスタマイズの手順と方法
1. 子テーマに空のファイルを作る
子テーマにディレクトリをふたつ作って、その中に、空のsite-info.phpファイルを作ります。親テーマと同じ階層構造を作ってあげるのです。
視覚的にわかりやすく表現してみます。緑色が新しく作るディレクトリ、赤色が新しく作るファイルです。
wp-content
↓
themes
↓
twentyseventeen-child(子テーマ)
↓
template-parts(新しく作るディレクトリ)
↓
footer(新しく作るディレクトリ)
↓
site-info(新しく作るファイル)
子テーマの中にtemplate-partsディレクトリを作って、さらにその中にfooterディレクトリを作る。そして、そのfooterディレクトリの中に、空のsite-info.phpファイルを作るといった感じです。
2. site-info.phpファイルにコードをペーストする
空のsite-info.phpファイルができたら、その中に次のコードをコピペしてください。
<div class="site-info">
<small>© <?php echo date('Y'); ?> <?php bloginfo('name'); ?>, All rights reserved.</small>
</div><!-- .site-info -->
とくに問題なければ、
© 2017 YourSiteName, All rights reserved
と表示されるはずです。
© で © を表示し、php echo date(‘Y’); で現在の年を取得しています
もし、表示内容を変更したければ、この部分を色々と書き換えてみるといいでしょう。