Twenty Thirteenでリンクの下線表示

WordPressの 2013年の公式テーマ「Twenty Thirteen」では、リンク文字列の上にマウスカーソルがあるときには下線を表示しますが、通常はリンク文字列に下線を表示しません。

私は、記事本文中のリンク文字列には下線を表示させるのが好みなので、下線が出るようにしてみました。

修正対象は、style.css

.entry-content a,
.comment-content a {
	/* color: #bc360a; */
	color: #0000ee;
	text-decoration: underline;
}

なお、下線を表示させるついでに、リンク文字列の色も変更しました。

未訪問の場合と訪問済の場合の両方を、Google Chomeの標準設定に合わせてあります。

a {
	/* color: #ca3c08; */
	color: #0000ee;
	text-decoration: none;
}

a:visited {
	/* color: #ac0404; */
	color: #551a8b;
}

Twenty Thirteenで画像や広告の表示

WordPressの 2013年の公式テーマ「Twenty Thirteen」に画像や広告の表示領域を準備するためのカスタマイズについて、簡単に解説します。

ブログの記事本文の上部や下部に画像や広告を表示したい場合、content.phpに修正を施します。

ただし、Twenty Thirteenでは、トップページやアーカイブページの表示にも content.phpを用いています。
個別記事ページに広告を表示させるようにすると、WordPressの設定によっては、トップページ等に多数の広告が表示されてしまいます。

広告会社によっては、ページ内に一定の数以上の広告を表示させることは規約違反となります。

規約違反を避ける方法として確実なのは、個別記事ページだけに広告を表示させること。
具体的には、is_single()を利用して、個別記事か判定し、処理を振り分けます。

以下に、個別記事ページの記事下に広告枠を設置する方法を、例示しておきます。

	</div><!-- .entry-content -->
		// 記事の後ろに下記のコードを入れる
		<?php if ( is_single() ) : ?> <!-- 個別ページの判定 -->
			// ここに、画像や広告のコード!
		<?php endif; // is_single() ?>

ブログのサイドバーに画像や広告を表示したい場合、表示対象の横幅を確認する必要があります。

Twenty Thirteenでは、サイドバーの幅は 300 pxで、ウィジェットの表示用に、左右に 20 pxずつのパディング(padding)が定義されています。

横幅 260 pxまでの画像なら、管理画面の「外観」‐「ウィジェット」で、「テキスト」ウィジェットを利用するのが簡単です。

300 pxよりも幅の大きな画像を表示させる場合、テーマのサイズを調整するしかありません。

261 px以上で 300 px以下の横幅の画像の場合、sidebar.phpを直接編集し、サイドバーの上部か下部に表示させる手もあります。

ここでは、サイドバーの上部に画像を表示させる方法を例として示しておきます。

if ( is_active_sidebar( 'sidebar-2' ) ) : ?>
	<div id="tertiary" class="sidebar-container" role="complementary">
		<div class="sidebar-inner">
			<div class="widget-area">

				// ここに、画像や広告のコード!

				<?php dynamic_sidebar( 'sidebar-2' ); ?>
			</div><!-- .widget-area -->
		</div><!-- .sidebar-inner -->
	</div><!-- #tertiary -->

Twenty Thirteenの最小限のカスタマイズ

WordPress 3.7.1 日本語版をインストールした時点では、「Twenty Thirteen」というテーマが有効になっています。

Twenty Thirteenは、2013年の公式テーマで、WordPress 3.6から付くようになりました。

初期状態では 1カラム表示ですが、右側にサイドバーを表示できます。

個人的には、3カラム表示(記事の両側にサイドバー)が好みなのですが、今回は勉強のため、Twenty Thirteenを使うことにしました。

テーマを初期状態のまま、カスタマイズなしで利用できるのが理想ですが、以下の項目について対処しました。

  • サイドバーの表示
  • 画像や広告の表示
  • リンクの下線表示

サイドバーの表示

管理画面の「外観」‐「ウィジェット」で、1つ以上のウィジェットを 副ウィジェットエリアに置くことにより、サイドバーが表示されるようになります。

広告枠の設置

記事下とサイドバー上部に広告を表示するようにカスタマイズしました。
修正対象は、content.phpsidebar.php
詳細は、下記URL参照。
http://www.lifexyz.com/blog/wptheme2013ad.html

リンクの下線表示

記事中のリンク部分に下線を付けるようにしました。
修正対象は、style.css
詳細は、下記URL参照。
http://www.lifexyz.com/blog/wptheme2013link.html

WordPressのプラグイン

WordPress 3.7.1 日本語版のインストール終了後、管理画面でインストール済のプラグインを確認すると、既に下記のプラグインが停止状態で入っています。

  • Akismet
  • Hello Dolly
  • WP Multibyte Patch

Akismet

ブログをコメント・トラックバックスパムから保護するためのプラグイン。
「有効化」後、Akismet API キーを登録し、Akismet設定ページに APIキーを保存する必要があります。

Hello Dolly

ルイ・アームストロング(Louis Armstrong)のヒット曲「Hello, Dolly!」からの歌詞を管理画面の右上にランダムに表示させるプラグイン。

WP Multibyte Patch

本家版、日本語版 WordPress のマルチバイト文字の取り扱いに関する不具合の累積的修正と強化を行うプラグイン。

私は上記のうち、Hello Dollyは停止状態のままですが、他の 2つは有効化して利用しています。

また、現在、下記の 2つのプラグインを利用しています。

  • All In One SEO Pack
  • Google XML Sitemaps

All In One SEO Pack

SEO対策の定番プラグイン。

Google XML Sitemaps

XML形式のサイトマップを自動生成するプラグイン。

今後、ソーシャルブックマーク関連のプラグインを導入するかもしれません。

WordPress インストール後の設定

WordPressのインストールが正常に終了すれば、ブログに記事を投稿することは可能です。

ただ、インストール直後にブログを表示させると、WordPressの開発元が用意したサンプル記事が表示されます。

サンプル記事を残しておくと、ブログの完成度を低く評価される危険がありますので、記事を削除する等、サンプル記事を表示しないようにするのが無難でしょう。

サンプル記事以外にも、早期に設定しておきたい項目がいくつかあります。

私は今回、「WordPress 3.7.1」日本語版のインストール直後、以下の作業を実施しました。

  • ニックネーム設定
  • パーマリンクの設定

ニックネーム設定

WordPressの初期設定では、投稿者名として WordPressのログイン時に使用するユーザー名が使用されます。

第三者にユーザー名が知られるのは、セキュリティ上、危険です。
そこで、管理画面の「ユーザー」からユーザーを選択し、ニックネームを入力し、ブログ上の表示名をニックネームにしておきます。
こうしておいても、WordPressの知識があれば簡単にユーザー名を知ることができますが、やらないよりはいいでしょう。

パーマリンクの設定

パーマリンクとは、Webサイトの個々の記事に対して割り当てる URLのことです。

WordPressのデフォルトは、インストール先の後ろに「/?p=123」のような文字列が付く、いわゆる「動的URL」形式。

近頃では、検索エンジン対策で 動的URLが著しく不利ということはないはずですが、URLから記事内容を類推できない点は不便です。

私の場合、パーマリンクは、「カスタム構造」を選択し、「/%postname%.html」と指定しています。

このように、タイトルの文字列を URLに流用すると、タイトルに漢字や全角かな文字が含まれている場合、日本語URLになります。

実用上、日本語URLでも大きな問題はありませんが、私の好みではありません。

基本的に私は、URLが半角英数字だけの文字列になるよう、記事投稿時に入力し直しています。

WordPressをインストール

WordPressでブログを始めようと思い立ち、2013年12月6日の午後、lifexyz.com の下にディレクトリを作成し、そこに「WordPress 3.7.1」日本語版をインストールしました。

前回、私がワードプレスをインストールしたのは 2011年8月のことだったので、もう 2年以上前。

当時の日本語版の最新バージョンは 3.2.1だったはずです。

前回と同様、インストール前の準備作業として、以下の作業を実施しました。

  • WordPress.org の秘密鍵サービスを利用し、認証用ユニークキーを生成。
  • インストール先のサーバに DBを作成。
  • wp-config-sample.phpを編集し、認証用ユニークキーと DB接続情報を設定。
  • wp-config-sample.phpを、wp-config.phpに改名。

その後、WordPressのファイル一式を FTPでサーバに転送し、ブラウザからインストールを実行しました。

特に問題なく、インストール終了後。

ブログを表示させてみたところ、サンプルとして、記事 1本とコメント 1件が投稿済、固定ページ 1つが作成済の状態でした。

このままブログを公開するのは美しくないので、編集するか削除する必要があります。

また、ブログを本格的に運営する前に設定しておきたい項目が複数あります。

そこで、記事を非公開の状態にしておき、インストール作業は一段落としました。

元プログラマーの仕事ブログ