Web

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

投稿日:2017年5月12日 更新日:

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

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

Attitude の情報

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

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

改造例

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

画面1.作業前の著作権部分

フッターの部分は 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="http://laboradian.com/" title="ラボラジアン" ><span>ラボラジアン</span></a></div><!-- .copyright -->
EOT;
}

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

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

となります。

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

画面2.作業後の著作権部分

デザイン

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

まとめ

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

📂-Web
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

HTTPレスポンスヘッダとブラウザキャッシュの関係を調査

目次1. はじめに2. 使用したツールWebサーバー側クライアント側3. 使用する HTML (PHP) ファイル4. 実験パターン1HTML (PHP)のヘッダ出力部分1回目のアクセス2回目のアクセ …

Web

Icons8 の Free Icons を使う手順

Icons8 の Free Icons Icons8 というサイトでは、いろいろな種類の無料素材が提供されています。 今回、そのうちの1つである「アイコン(Free Icons)」を使う手順についての …

Web

ブラウザをキーボードで操作するための拡張機能 Vimium

ブラウザをキーボードで操作するための拡張機能 Vimium について説明します。

Web

インターネットの説明に欠けているもの?

 株式会社日本レジストリサービス(以下JPRS、本社:東京都千代田区、代表取締役社長 東田幸樹)は、インターネット教育の支援活動の一環として、全国の中学校・高校・高等専門学校を対象に、マンガ小冊子『ポ …

Web

CORS の プリフライト・リクエストを発生させて観察する

CORS の プリフライト・リクエストを発生させて観察するページを作成しました。