Twenty Ten カスタマイズ
Twenty Tenのカスタマイズについてのまとめです。
目次
- コンテンツナビゲーション 非表示
- 「投稿日」を非表示
- 「作成者(投稿者)」を非表示
- "コメントをどうぞ"("leave a comment")を消す
- コメント入力欄 削除
- コメントの日付を非表示
- コメントを(コメント)フォームの下に
- "proudly powered by wordpress"を非表示
- レスポンシブ化
別記事
コンテンツナビゲーション 非表示
Twenty Tenでは、コンテンツナビゲーションが投稿上部と下部に表示されます。コンテンツナビゲーションとは、一つ前や一つ後の投稿へのリンクを表示してくれる部分です。
上部ナビを消す場合→loop-single.phpの20行目から23行目をコメントアウト
下部ナビを消す場合→loop-single.phpの60行目から63行目をコメントアウト
// オリジナル /wp-content/themes/twentyten/loop-single.php // /wp-content/themes/[子テーマ]/loop-single.php <?php if(0){ // コメントアウト↓?> <div id="nav-above" class="navigation"> <div class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div> <div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'twentyten' ) . '</span>' ); ?></div> </div><!-- #nav-above --> <?php } // コメントアウト↑?>
「投稿日」を非表示
CSSで非表示にする
以下をstyle.css(子テーマ)へ追加すると、作成者を非表示にできますが「投稿日:」という文字は残ったままになります。
投稿日の部分もclassで定義されていますが、"meta-prep meta-prep-entry-date"となるべきところが、"meta-prep meta-prep-author"になってます。meta-prepを同様にdiplay:noneすればいいですが、他の部分も非表示になってしまいます。
/* /wp-content/themes/[子テーマ]/style.css*/ .entry-date { display: none; }
子テーマのfucntions.phpに追加して非表示にする
こちらは、「投稿日:」も非表示にできます。
// オリジナル /wp-content/themes/twentyten/functions.php twentyten_posted_on() // /wp-content/themes/[子テーマ]/functions.php function twentyten_posted_on() { printf( __( '<span class="meta-sep">作成者:</span> %3$s', 'twentyten' ), 'meta-prep meta-prep-author', sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><span class="entry-date">%3$s</span></a>', get_permalink(), esc_attr( get_the_time() ), get_the_date() ), sprintf( '<span class="author vcard"><a class="url fn n" href="%1$s" title="%2$s">%3$s</a></span>', get_author_posts_url( get_the_author_meta( 'ID' ) ), esc_attr( sprintf( __( 'View all posts by %s', 'twentyten' ), get_the_author() ) ), get_the_author() ) ); }
「作成者(投稿者)」を非表示
CSSで非表示にする
以下をstyle.css(子テーマ)へ追加すると、作成者を非表示にできますが「作成者:」という文字は残ったままになります。
/* /wp-content/themes/[子テーマ]/style.css*/ .author { display: none; }
子テーマのfucntions.phpに追加して非表示にする
こちらは、「作成者:」も非表示にできます。
// オリジナル /wp-content/themes/twentyten/functions.php twentyten_posted_on() // /wp-content/themes/[子テーマ]/functions.php function twentyten_posted_on() { printf( __( '<span class="%1$s">投稿日:</span> %2$s', 'twentyten' ), 'meta-prep meta-prep-author', sprintf( '<a href="%1$s" title="%2$s" rel="bookmark"><span class="entry-date">%3$s</span></a>', get_permalink(), esc_attr( get_the_time() ), get_the_date() ) ); }
"コメントをどうぞ"("leave a comment")を消す
CSSで消す
ログイン時にのみ"|"(パイプ)が2重に出力されます。
.comments-link { display: none; }
子テーマを変更
Twenty Tenでは、アーカイブページにのみ"コメントをどうぞ"が出力され、各投稿ページのコメント入力部分にリンクしてくれます。
loop.phpを子テーマディレクトリにコピーして以下のようにコメントアウトして下さい。3種類のフォーマット用に3箇所(標準・アサイド ・ギャラリー )あります。99行目・122行目・164行目の3つ
|(パイプライン・縦棒)が気になる場合は、それぞれの1行下を以下のようにして下さい。
// オリジナル /wp-content/themes/twentyten/loop.php // /wntent/themes/子テーマ/loop.php <?php if(0) { ?> <span class="comments-link"><?php comments_popup_link( __( 'Leave a comment', 'twentyten' ), __( '1 Comment', 'twentyten' ), __( '% Comments', 'twentyten' ) ); ?></span> <?php } ?> // パイプラインを消す <span class="meta-sep">|</span>を削除 <?php edit_post_link( __( 'Edit', 'twentyten' ), ' <span class="edit-link">', '</span>' ); ?>
コメント入力欄 削除
設定もしくはフックしてコメント停止
Twenty Tenのテンプレートを変更してコメント欄を非表示
TwentyTenでは、標準では、3つのページでコメントフォームが表示されます。
- シングルページ (loop-single.php)
- 固定ページのデフォルトテンプレート (loop-page.php)
- 画像(メディア)ページ (loop-attachment.php)
コメントを無効にしたいページ(.php)の以下の部分をコメントアウトすることでコメント入力欄を削除できます。
<?php comments_template( '', true ); ?>
コメントの日付を非表示
フックして非表示にする
テンプレートを変更
まず、オリジナルにあるtwentyten_commentを子テーマのfunctions.phpに定義して下さい。そして以下のように日付表示部分をコメントアウトします。
// オリジナル /wp-content/themes/twentyten/functions.php twentyten_comment // /wp-content/themes/[子テーマ]/functions.php <?php if(0){ // コメントアウト↓?> <a href="<?php echo esc_url( get_comment_link( $comment->comment_ID ) ); ?>"> <?php /* translators: 1: date, 2: time */ printf( __( '%1$s at %2$s', 'twentyten' ), get_comment_date(), get_comment_time() ); ?></a> <?php } // コメントアウト↑?>
コメントを(コメント)フォームの下に
子テーマを変更
comments.phpを子テーマディレクトリにコピーして、以下のようにコメントフォーム部分である<?php comment_form(); ?>を33行目の上に移動。75行目のものはコメントアウト。
// オリジナル /wp-content/themes/twentyten/comments.php // /wp-content/themes/子テーマ/comments.php <?php comment_form(); ?> <?php if ( have_comments() ) : ?> ....
"proudly powered by wordpress"を非表示
子テーマを変更
footer.phpを子テーマディレクトリにコピーして以下のようにコメントアウトして下さい。
// オリジナル /wp-content/themes/twentyten/footer.php // /wp-content/themes/子テーマ/footer.php <?php if(0){ // コメントアウト↓?> <div id="site-generator"> <?php do_action( 'twentyten_credits' ); ?> <a href="<?php echo esc_url( __( 'http://wordpress.org/', 'twentyten' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'twentyten' ); ?>"><?php printf( __( 'Proudly powered by %s.', 'twentyten' ), 'WordPress' ); ?></a> </div><!-- #site-generator --> <?php } // コメントアウト↑?>
style.cssで非表示にする
style.css(子テーマ)へ以下を追加して下さい。
#site-generator{ display: none; }
レスポンシブ化
Twenty Tenは、標準ではレスポンシブ対応してませんが、「Responsive Twenty Ten」を導入することで対応化することができます。
プラグインもしくは子テーマ一式があります。
プラグイン ダウンロード
子テーマ ダウンロード
関連記事
-
Twenty Twelve 投稿日・投稿者を非表示に
TwentyTwelveのちょっとした部分をカスタマイズする方法を紹介していきます。 また、子テーマで出力部分を変更する際に、翻訳が必要な部分//_()の部分がでてきますので、以下の投稿も参考に
-
開発やテストに便利なプラグイン
開発やカスタマイズに使えそうなプラグインを集めてみました。 テーマのカスタマイズには、使用中のテンプレートファイルなどを表示してくれると便利ですね。個人的には、テーマ開発の際に、実行しているSQ
-
新年早々やらかした
あけましておめでとうございます。 タイトルどおり、新年早々やらかしてしまいましたのでご報告まで。どうやらかしたかというと、確認用サイトとこのブログを間違えてしまいWordpress 3.5にアップグ
-
Twenty Twelve カスタマイズ
何点かTwentyTwelveのカスタマイズについてご質問をいただきましたのでここでまとめてみます。 目次 子テーマのつくりかた 他記事へのリンク アーカイブタイトル("カテゴリー別アーカ
-
Twenty Twelve "コメントをどうぞ"を消す
今回は「Twenty Twelve」で標準で投稿タイトル下に出力されるリンク"コメントをどうぞ"|"Leave a reply"を非表示にする方法を。(コメントやピンバックが1件の場合は"1件のフィー
-
Twenty Fourteen 「投稿日」や"先頭固定表示"を非表示
日付を表示する部分は、全てtwentyfourteen_posted_onに集約されています。該当部分をコメントアウトしたかたちで子テーマのfunctions.phpに追加して下さい。 「投稿日
-
JSやCSSに自動で付与されるバージョン番号を非表示に
Wordpressでは、JSやCSSがロードされる際にlinkタグやscriptタグ内にWordpressやプラグインもしくはスクリプトそのもののバージョン番号が付与されます。「?ver=」で検索して
-
テーマ ブックマーク 2014
有料 技術系・ガジェットサイトテーマ 30 Blog & Magazine Style WordPress Themes for Tech & Gadget Sites
-
Twenty Fourteen クレジットを非表示・変更方法
Twenty Fourteenにも最下部に「Proudly powered by WordPress」というコピーライトが表示されます。それを削除もしくは変更するには、footer.phpを編集して行
-
翻訳ファイルの子テーマ化
子テーマでfunctions.phpなどを変更していくと翻訳すべき項目にぶつかっていくと思います。例を挙げると_()の部分で、Wordpressが翻訳を行ってくれる部分です。 個人的には、日本語
Comment
twentytenのレスポンシブ子テーマをダウンロードしたかったのですが、ご紹介くださった「Responsive Twenty Ten」内でダウンロードリンクを見つけられませんでした。もう終わってしまったのでしょうか?もちろん、もう2015年ですが・・・。
WordPress: Twenty Ten カスタマイズ | Think deeply, Do less, More ... http://dlvr.it/39Xjlw