ただ今、本ウェブサイトを改造しています

現在、このウェブサイトを改造しています。

今回、WordPress の「Attitude」というテーマを使ってみたのですが、評判が良いだけあって使いやすいです。デザインがすっきりしていてシンプルなのもよいですし、それでいて中身はしっかりと作られているという印象で、改造もやりやすそうでした。

Attitude の情報
改造例
デザイン
まとめ

Attitude の情報

Attitudeを利用するにあたって、以下の情報を参考にしました。

WordPress テーマ「Attitude」- 無料ながら万能、多用途型のスゴいやつ。
- 非常に親切に使い方を説明してくれています。
- まずこちらを読んで、どんなことができるのか理解しました。
Attitude Theme Instruction by Theme Horse
- Attitude 公式の説明書です。
- 英語ですが、1の記事を読んでいるので理解するのがラクでした。
- ざっと読んだ上で、自分にとって必要そうなところを改めてちゃんと読みました。
Attitude のソースコード

改造例

例えば、フッターの著作権について書いてある部分の「Theme by: Theme Horse | Powered by: WordPress」という部分を消したいとします。

フッターの部分は attitude/footer.php というファイル内の do_action( 'attitude_footer' ); で出力していました。ということは、attitude_footer というアクションフックに登録した関数がこの部分の出力を行っているはずです。

（省略）
<footer id="colophon" class="clearfix">
  <?php
（省略）
    do_action( 'attitude_footer' ); // ← ここ！
  ?>
</footer>
（省略）

次に、その attitude_footer というアクションフックに関数を登録しているところを探すと、attitude/library/structure/sidebar-extensions.php というファイル内で見つかりました。

このファイルの中を見てみると、以下の部分だと分かりました。attitude_footer_info()という関数内で、著作権の部分が出力されています。

(省略)
add_action( 'attitude_footer', 'attitude_footer_info', 30 );
  /**
   * function to show the footer info, copyright information
   */
  function attitude_footer_info() {
     $output = '<div class="copyright">'.__( 'Copyright ©', 'attitude' ).' '.attitude_the_year().' ' .attitude_site_link().' | ' . ' '.__( 'Theme by:', 'attitude' ).' '.attitude_themehorse_link().' | '.' '.__( 'Powered by:', 'attitude' ).' '.attitude_wp_link() .'</div><!-- .copyright -->';
    echo $output;
}
(省略)

次にこの部分を改造します。今回は、子テーマを作っているので、子テーマのディレクトリ内に、function.php ファイルを作成して、以下を記述します。


// テーマがセットアップされた直後に呼び出されるフックに関数を登録します
add_action( 'after_setup_theme', 'add_my_functions_to_parent_theme' );

/**
 * テーマがセットアップされた直後に実行する関数
 */
function add_my_functions_to_parent_theme() {
  // もともと登録されていた関数を削除する
  remove_action( 'attitude_footer', 'attitude_footer_info', 30 );
  // こちらが作成した関数を登録する
  add_action( 'attitude_footer', 'attitude_child_footer_info', 30 );
}

/**
 * フッターに著作権を出力する関数
 */
function attitude_child_footer_info() {
echo <<<'EOT'
<div class="copyright">Copyright © 2017 <a href="https://laboradian.com/" title="ラボラジアン" ><span>ラボラジアン</span></a></div><!-- .copyright -->
EOT;
}

このコードがやっていることを簡単に説明すると、

テーマのセットアップが終わった後に、add_my_functions_to_parent_theme という関数を実行させる。
この関数では、親テーマ側で登録していた　attitude_footer_info 関数を削除して、代わりにこちらが作成した attitude_child_footer_info 関数を登録する。
attitude_child_footer_info 関数では、著作権として表示したい文字列だけを出力する。

となります。

以上の作業でフッターの著作権部分を変更することができました。

デザイン

CSSで作るおしゃれなボックス（囲み枠）のデザインサンプル13パターンで紹介されているパターンをいくつも利用させて頂きました。感謝しかありません。

まとめ

あともう少しで完成です！！