WordPress2.7の導入(10) テーマのカスタマイズ

見た目の気になる部分をカスタマイズします。
念の為、wp-content/themes/ma38su-wp.vicuna.ext/配下のファイルをバックアップしてから作業します。

• Copyrightの表示を変更
  ページの一番下に表示される
  Copyright © sprouthead blog All Rights Reserved.
  を
  Copyright © 2006 – 2009 sprouthead LLC. All Rights Reserved.
  に変更し、2009の部分は自動で年数が変更されるようにします。
  
  メニューから”外観”の”編集”を選択します。
  
  右のリストから”フッター (footer.php)”を選択します。
  中央のテキストエリアで

  
  <address><?php printf(__('Copyright &copy; %s All Rights Reserved.', 'vicuna'), get_bloginfo('name')); ?></address>
  

  の部分を下記に変更し、”ファイルを更新”をクリックします。

  
  <address><?php echo('Copyright  &copy; 2006 - ' . date('Y')  . ' sprouthead LLC.  All Rights Reserved.'); ?></address>
  

  
  ※間違えて入力して”ファイルを更新”をクリックすると最悪の場合WordPressが使用できなくなります(特にfunctions.phpでエラーになった場合)。その場合はwp-content/themes/ma38su-wp.vicuna.ext/にあるphpファイルを編集して元に戻すか、バックアップしたファイルをアップロードして上書きます。
  

• “続きを読む”を変更
  記事を折りたたんで表示した場合、デフォルトだと”Continue reading”と表示されるのを”続きを読む”に変更します。
  
  “tag.php (tag.php)”を選択して

  
  <?php the_content(__('Continue reading', 'vicuna')); ?>
  

  を

  
  <?php the_content(__('続きを読む', 'vicuna')); ?>
  

  に変更。
  “アーカイブ (archive.php)”を選択して

  
  <?php the_content('Continue reading', 'vicuna'); ?>
  

  を

  
  <?php the_content(__('続きを読む', 'vicuna')); ?>
  

  に変更。
  “カテゴリーテンプレート (category.php)”を選択して

  
  <?php the_content(__('Continue reading', 'vicuna')); ?>
  

  を

  
  <?php the_content(__('続きを読む', 'vicuna')); ?>
  

  に変更。
  “ページテンプレート (page.php)”を選択して

  
  <?php the_content(__('Continue reading', 'vicuna')); ?>
  

  を

  
  <?php the_content(__('続きを読む', 'vicuna')); ?>
  

  に変更。
  “メインインデックスのテンプレート (index.php)”を選択して

  
  <?php the_content(__('Continue reading', 'vicuna')); ?>
  

  を

  
  <?php the_content(__('続きを読む', 'vicuna')); ?>
  

  に変更。何故か”アーカイブ (archive.php)”だけ記述が違ったので合わせてみました。
  
  ※WordPressではこのような表示文字を変える場合、多言語化対応の為のpoファイルを編集して、moファイルにコンパイルするというのが正式な手順になりますが、ここでは横着してPHPを直接変更しています。
  

• “続きを読む”のリンクから”#extended”を削除する
  “続きを読む”のリンクに自動で”#extended”が挿入されないように”テーマのための関数 (functions.php)”変更します。

  
  // Replace '<p><a class="more-link">' by '<p class="continue"><a>'.
  // (replace 'href="hoge#more-**"' to 'href="hoge#extended"')
  $content = preg_replace('/<p(\s.+?=".+?">|>)\s?<a href="(.+?)#more-([0-9]+?)" class="more-link">(.+?)<\/a><\/p>/', '<p class="continue"><a href="\2#extended" title="'. sprintf("Read the full text of %s", $entry_title) . '" rel="nofollow">\4</a></p>', $content);
  
  // if <a class="more-link"> is without <p>, replace to '<p class="continue"><a>'.
  $content = preg_replace('/\s*<a href="(.+?)#more-([0-9]+?)" class="more-link">(.+?)<\/a><\/p>/', "</p>\n\t\t\t\t".'<p class="continue"><a href="\1#extended" title="'. sprintf("Read the full text of %s", $entry_title) . '" rel="nofollow">\3</a></p>', $content);
  

  上記部分の3行目と6行目にある#extendedを削除して

  
  // Replace '<p><a class="more-link">' by '<p class="continue"><a>'.
  // (replace 'href="hoge#more-**"' to 'href="hoge#extended"')
  $content = preg_replace('/<p(\s.+?=".+?">|>)\s?<a href="(.+?)#more-([0-9]+?)" class="more-link">(.+?)<\/a><\/p>/', '<p class="continue"><a href="\2" title="'. sprintf("Read the full text of %s", $entry_title) . '" rel="nofollow">\4</a></p>', $content);
  
  // if <a class="more-link"> is without <p>, replace to '<p class="continue"><a>'.
  $content = preg_replace('/\s*<a href="(.+?)#more-([0-9]+?)" class="more-link">(.+?)<\/a><\/p>/', "</p>\n\t\t\t\t".'<p class="continue"><a href="\1" title="'. sprintf("Read the full text of %s", $entry_title) . '" rel="nofollow">\3</a></p>', $content);
  

  に変更します。

• 日付に表示される曜日を英語表記に変更
  曜日を英語で表示するように変更します。
  
  ここからWordPress EnglishDateプラグインを使用することによって表示を英語に変更することができます。このプラグインは日付の表示設定のグローバル変数を上書きすることで英語表記に変更している為、これも正式な方法ではありませんが簡単に変更することができます。
  
• 投稿者の名前を表示する
  日付の後ろに投稿者の名前を表示するように変更します。
  メニューの”外観”>”編集”で”tag.php (tag.php)”を選択します。

  
  <li class="date"><?php the_time(__('Y-m-d (D)', 'vicuna')) ?></li>
  <li class="category"><?php the_category(' | ') ?></li>
  

  を

  
  <li class="date"><?php the_time(__('Y-m-d (D)', 'vicuna')) ?></li>
  <li class="date"><?php the_author_nickname(); ?></li>
  <li class="category"><?php the_category(' | ') ?></li>
  

  に変更します。とりあえずスタイルは日付と同じものを使用しました。

  
  <?php the_author_nickname(); ?>
  

  上記部分が投稿者のニックネームになります。
  ユーザ名を表示する場合はここを

  
  <?php the_author_nickname(); ?>
  

  姓を表示する場合は

  
  <?php the_author_lastname(); ?>
  

  名前を表示する場合は

  
  <?php the_author_firstname(); ?>
  

  になります。

  “アーカイブ (archive.php)”
  “カテゴリーテンプレート (category.php)”
  “メインインデックスのテンプレート (index.php)”
  “単一記事の投稿 (single.php)”
  についても同様に変更します。

• ヘッダーの表示を変更
  wp-content/themes/ma38su-wp.vicuna.ext/スキン名/module/mod_subSkin/1-subSkin.cssを編集してヘッダーの表示を変更します。

  
  div#header {
  border-top: 5px solid #01b0f0;
  border-bottom: 16px solid #000;
  background-color: #222;
  }
  

  を

  
  div#header {
  border-top: 5px solid #000;
  border-bottom: 5px solid #000;
  background-color: #666;
  background-image: url(images/bg/stripe01.png);
  }
  

  に変更して1-subSkin.cssをアップロード。

• 背景の画像を自社サイトと同じ画像に変更
  wp-content/themes/ma38su-wp.vicuna.ext/スキン名/module/mod_subSkin/images/bg/bg_stripe.gifの画像を差し替えて背景画像を変更します。

Similar Posts:

• WordPress2.7の導入(7) テーマの設定
• WordPress2.7の導入(8) テーマwp.Vicuna Ext.の設定
• WordPress2.7の導入(6) Google Analyticsの設定
• WordPressに関連記事の表示を追加するプラグイン Similar Posts
• WordPress2.7の導入(1) インストール