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

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

関連記事

Twitterのツイートボタンの設置

Twitterのツイートボタンの設置はプラグインを使用しなくても容易に実装できるようです。 ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 Tweetボタンの設置コード 公式

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

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

投稿記事から「(ログイン)ユーザー名」がバレるのを防ぐ

ここ最近、アカウント乗っ取りやセキュリティ事故関連のニュースが相次いでいますが、WordPressで制作されたサイトも標的に会っているようです。一般的な手法としては「ブルートフォースアタック」という手

jQueryをCDNから読み込む

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

ナビゲーションメニューに検索フォームを追加

メニュー内に検索フォームを追加したいという問い合わせをいただいたので試してみました。 メニューのつくられかた まずは、WordPressでメニューがつくられる手順を説明します。 箱をつく

Twenty Fifteen カスタマイズ

WordPress 4.1のデフォルトテーマである「Twenty Fifteen」は三世代前の「Twenty Twelve」に似たテーマで非常にシンプルなテーマにまとまっていますね。カスタマイズをまと

アバターサイズの変更など Twenty Twelve 1.3での変更点

Twenty Twelve 1.3 での変更点 アバターサイズの設定ロジック変更 ヘッダ画像の設定ロジック変更 全ての変更点はこちら Changes from twentytwel

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

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

no image

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

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

Twenty Twelve サイトタイトルをテキストから画像に置き換え

ページトップに表示されるサイトタイトルをデフォルトのテキストから画像に変更します。 あらかじめ、管理画面のメディアライブラリから画像をアップロードしているもしくは別の場所に保存しているそのファイルの

Comment

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

Message

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

*

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

    PAGE TOP ↑