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」を導入することで対応化することができます。
プラグインもしくは子テーマ一式があります。
プラグイン ダウンロード
子テーマ ダウンロード

Related

ie.cssの子テーマ化など Twenty Twelve 1.1での変更点 Twenty Thirteen カスタマイズ Twenty Twelve カスタマイズ Twenty Eleven カスタマイズ Twenty Fourteen カスタマイズ Twenty Fifteen カスタマイズ Twenty Twelve "コメントをどうぞ"を消す テーマ 「Responsive」 カスタマイズ