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( '&larr;', 'Previous post link', 'twentyten' ) . '</span> %title' ); ?></div>
    <div class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '&rarr;', '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」を導入することで対応化することができます。
プラグインもしくは子テーマ一式があります。
プラグイン ダウンロード
子テーマ ダウンロード

  • このエントリーをはてなブックマークに追加

関連記事

投稿タイトルのtitle属性を削除など Twenty Twelve 1.2での変更点

TwentyTwelveが1.1から1.2にアップデートされたので、いくつか変更点を洗ってみました。 (*全てを網羅しているわけではありません) 全ての変更部分は、こちらに記載されています。

Twenty Twelve 投稿者情報を表示/非表示に

TwentyTwelveでは、投稿ページごとに投稿者の情報を掲載することができます。他のテーマでも同様だと思います。こんな感じです。ここでは、掲載と削除の方法について記載します。 表示方法 「

Twenty Twelve "Proudly powered by WordPress"をCopyrightに変更

標準でページの最下部に表示される"Proudly ~"を変更します。 子テーマフォルダにfooter.phpをコピーし、以下のように編集を行ってください。リンクを外して、表示部分を書き換えるだけです

コメント欄停止・コメント削除

WordPressでは標準でコメント機能が付いてきます。この投稿ではコメント機能の停止や既に投稿されたコメントを削除する方法を紹介します。 設定による停止方法 新規の投稿に関してコメントを停止

テーマ 「Responsive」 カスタマイズ

デモ | ダウンロード 目次 投稿日 非表示 作成者 非表示 "Responsive Theme powered by WordPress" 削除 投稿日 非表示 オリ

Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」

Prettify Code Syntaxは、WordPressでGoogle Code Prettifyを使用してソースコードを表示してくれるプラグインです。 プラグインダウンロード Google

Twenty Twelve "Open Sans"の使用を止

「Twenty Twelve」では、"スペシャルフォント"ということで「Open sans」を特別にロードしているようです。今のところ使うつもりがないのでリンクしないようにしました(必要になれば戻せば

no image

「編集(Edit)」リンクの非表示方法

ログインした状態で投稿ページを開くと投稿内や各コメントに各編集ページへリンクしてくれる「編集」リンクが表示されます。(繰り返し言いますが、自サイトにログインしているユーザにしか見えません。) こ

no image

「固定ページ」ウィジェット カスタマイズ

「固定ページ」ウィジェットは、そのままではありますが、固定ページの一覧をウィジェットに表示してくれます。 カスタマイズは、管理画面よりいくつかできるようです。 目次 特定の(固定)ページ

jQueryをCDNから読み込む

WordPressではデフォルトでjQueryライブラリが同梱されています。この記事では、それをやめて、CDNから読み込み、使用する方法を解説します。 WordPress 3.6 3.9 4.0

Comment

  1. twentytenのレスポンシブ子テーマをダウンロードしたかったのですが、ご紹介くださった「Responsive Twenty Ten」内でダウンロードリンクを見つけられませんでした。もう終わってしまったのでしょうか?もちろん、もう2015年ですが・・・。

John へ返信する コメントをキャンセル

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    PAGE TOP ↑