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

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

関連記事

"コメントを残す" 削除・文言を変更する方法

コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹

ログイン画面・機能をカスタマイズ

CSSを変更してスタイル変更 ログイン画面用のCSSを用意して子テーマとして使用します。変更したい部分だけを記述して下さい。 // オリジナル /wp-admin/css/login.min.

コメントフォーム・リストのカスタマイズ

コメント投稿部分は、基本的にはどのテーマでも同じフォームを出力してテーマのstyle.cssで外観を変えています。コメントフォーム欄をカスタマイズするには、プラグインもしくはフックを用いてカスタマイズ

Lightbox (画像ポップアップ) プラグイン

WordPressで使用できるLightbox(画像ポップアップ)プラグインのまとめ ひとまずインストール・有効化するだけで使用可能です。(3.7/3.8/3.9) blueimp lig

「Google Analytics for WordPress」投稿URLにやたら長いパラメータがついてしまう

Google 検索結果をみていたら、Wordpressの投稿のURLが実際のものより異様に長くなっているので何かなと思って調査してみました。 このような感じで http://kwski.net

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

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

開発やテストに便利なプラグイン

開発やカスタマイズに使えそうなプラグインを集めてみました。 テーマのカスタマイズには、使用中のテンプレートファイルなどを表示してくれると便利ですね。個人的には、テーマ開発の際に、実行しているSQ

Twenty Fourteen "コメントをどうぞ"の非表示と変更方法

Twenty Fourteenでは、デフォルトで投稿ページと各アーカイブページの各投稿のメタ情報欄に「コメントをどうぞ」というコメントフォームへのリンクが設置されます。 それぞれ、コメントが0件の場

「カレンダー」ウィジェット カスタマイズ・プラグイン

目次 カレンダー移動をajax遷移させるようにする 営業日・休業日を色分けして表示 ページやウィジェットにgoogleカレンダーを追加 カレンダーウィジェットをajax遷移させるよ

管理画面のCSSをカスタマイズ

管理画面のスタイルを変更したくなったので、カスタマイズしてみました。一例として以下を取り上げてみます。 「投稿一覧」の画面でカスタムフィールドが追加されていくと、そんなに幅が必要のないところが長くな

Comment

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

Message

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

*

PAGE TOP ↑