Twenty Eleven 編集(5)親テーマを直接編集


CSSで編集するより親テーマのphpファイルを直接編集した方がよさそうな修正を5つの項目をメモ。念のため親テーマのバックアップは忘れずにー。

0013

 今まではTwenty Elevenのテーマそのものはいじらず、子テーマにCSSを追記して編集していく形をしていたけど、どうあがいてもこれはいらないだろうーとか、これはこの位置にない方がいいだろうってものは親テーマを直接編集した方が手っとり早い。中でも以下の5つは修正するだけでスッキリするのでおすすめ。親テーマを編集するには、ダッシュボードから外観→テーマ編集へと進み、右側にあるメニューからTwenty Elevenを選択すればOK。

ヘッダーの検索フォームを削除
0034 CSSでも消せるけど、CSSではあくまで視覚的に見えなくしているだけなので、もともとは消えてない状態。メニューが多いとその部分を活用することができず、二段になってしまったりするのが欠点。メニュー項目が多くても、元を絶つことでメニューバー全域をメニュー領域として使うことができちゃうのがメリット。

heder.php内の119行〜125行にある以下の部分を削除

		<div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
				<?php get_search_form(); ?>
				</div>
			<?php
				else :
			?>
				<?php get_search_form(); ?>


投稿日をタグやカテゴリーの隣に配置
0035 デフォルトではタイトルの真下に投稿日が表示されています。微妙に存在感があるので、タグやカテゴリーなどと一緒にまとめればスッキリしていいと思います。投稿日ってなんとなく記事の最後にあったほうがしっくりくるしね。(笑) こちらはcontent.phpcontent-single.phpの2つを修正。


content.phpの24行目を切り取る

<?php twentyeleven_posted_on(); ?>


■46行と47行の間にペーストする

	<footer class="entry-meta">
		<?php twentyeleven_posted_on(); ?>
	<?php $show_sep = false; ?>


content-single.phpの17行目を切り取る

<?php twentyeleven_posted_on(); ?>


■27行目と28行目の間にペーストする

	<footer class="entry-meta">
	<?php twentyeleven_posted_on(); ?>
		<?php


作成者の部分を消す
0036
 単独記事のページにはカテゴリーやタグなどの部分に作成者という項目が追加されています。複数で記事を書いているなら必要かもですが、個人のブログでこれがあっても意味がないので消しましょうー。

content-single.phpの35行目のこの部分を

$utility_text = __( 'This entry was posted in %1$s and tagged %2$s by <a href="%6$s">%5$s</a>. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyeleven' );


■下記のように変更

$utility_text = __( 'カテゴリー: %1$s  |  タグ: %2$s', 'twentyeleven' );


content-single.phpの37行目のこの部分を

$utility_text = __( 'This entry was posted in %1$s by <a href="%6$s">%5$s</a>. Bookmark the <a href="%3$s" title="Permalink to %4$s" rel="bookmark">permalink</a>.', 'twentyeleven' );


■下記のように変更

$utility_text = __( 'カテゴリー: %1$s', 'twentyeleven' );



続きを読むの名称を変更
0037 MarsEditなどで記事を折りたためるように設定してある場合、「続きを読む」というリンクが追加される。どうもこれがしっくりこないというならば、任意の言葉に代えてしまえばOK。CSSを使えば形状も変えられるよー。

content-single.phpの41行目のこの部分を

<?php the_content( __( 'Continue reading <span class="meta-nav">&rarr;</span>', 'twentyeleven' ) ); ?>


■このように任意の言葉に変更

<?php the_content( __( 'もっと読む', 'twentyeleven' ) ); ?>


ちなみにもっと加工したい場合はstyle.cssで.more-linkに対してプロパティを追加していけばOK。


.more-link {
	display: block;
	padding: 2px;
	width: 100px;
	text-align:center;
	margin-left: auto;
	margin-top: 10px;
	border-radius: 6px;
	color: #e9e9e9;
	border: solid 1px #555;
	background: #6e6e6e;
	background: -webkit-gradient(linear, left top, left bottom, from(#888), to(#575757));
	background: -moz-linear-gradient(top, #888, #575757);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#888888', endColorstr='#575757');
}

a.more-link {
	text-decoration: none;
	font-size : 13px;
	line-height:24px;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
	color: #FFFFFF;
}

a:hover.more-link {
	text-decoration: none;
	background: #616161;
	background: -webkit-gradient(linear, left top, left bottom, from(#757575), to(#4b4b4b));
	background: -moz-linear-gradient(top, #757575, #4b4b4b);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#757575', endColorstr='#4b4b4b');
	color: #F2C33D;
}

a:active.more-link {
	text-decoration: none;
	color: #afafaf;
	background: -webkit-gradient(linear, left top, left bottom, from(#575757), to(#888));
	background: -moz-linear-gradient(top, #575757, #888);
 filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#575757', endColorstr='#888888');
}


これでボタンのようにして、右揃えにすることができます。

単独記事ページにもサイドメニューを表示する
 デフォルトでは単独記事のページにサイドメニューは表示されない。かといってそんなに幅が必要ではないので、単独記事のページにも通常と同じようにサイドメニューを表示させたいところ。これはTwenty Eleven Theme Extensionsというプラグインがおすすめ。ダウンロードして有効化したら外観→Theme Extensionsでメニューを開きEnable the widget sidebar on single-post pagesにチェックを入れるだけ。

とりあえず以上5カ所はぜひとも修正しておきたいカ所かなー。

Related Posts Plugin for WordPress, Blogger...
投稿日: 作成者: カテゴリー: CSS, Twenty Eleven

コメントを残す

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