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

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

関連記事

Web

HTTP の Range ヘッダフィールドを使い、ページの一部分だけを取得する

HTTP/1.1 の Range ヘッダフィールドを使って、ページの一部分のみを取得する実験です。 目次1. Range ヘッダフィールドとは?2. 環境3. 使うツール4. 対象ページ5. 実験6. …

Firefox

Firefox の 強化型トラッキング防止機能

目次1. Firefox の強化型トラッキング防止機能2. 用語トラッカー (Trackers)ソーシャルメディアトラッカートラッキングコンテンツサードパーティのクッキー クロスサイトのトラッキングク …

Web

インストールが可能になるための最低限のウェブサイト(PWA)を作る

インストールが可能になるための最低限のウェブサイト(PWA)を作る方法について説明します。

Web

AMP for WordPress プラグインを使って WordPressサイトをAMP対応する手順

目次1. AMP とは?なぜ、AMP が必要なのか?AMP フレームワーク1. AMP HTML2. AMP JS3. AMP キャッシュその他2. AMP for WordPress プラグインにつ …

Web Programming

Webプログラミングのための Web入門

この記事では、Webプログラミングで必要になる Webの知識をご紹介します。 目次1. インターネット2. インターネットを土台として存在するプロトコル3. Web とは?4. URL5. HTML2 …