サポート » テーマ » Twenty Twelveで記事の下に表示される「投稿日」をタイトル下に移動したい

  • 解決済 inos-mini

    (@inos-mini)


    Twenty Twelveで記事の下に表示される「投稿日」をタイトル下に移動したいと考えています。

    WEBで色々と情報を集めてみたところ、「カテゴリー」、「投稿日」、「投稿者」(なぜか私のには投稿者は表示されていません)はセットになっているようで、「投稿日」だけを移動するのが難しいようです。

    私が目指しているのは、記事タイトル下に投稿日を「Posted on 2013/06/01」といった形で表示し、記事下のデフォルト位置にカテゴリーのみ「Categories」という形で残したいです。

    もし「カテゴリー」、「投稿日」、「投稿者」を分けて扱うのが難しいようなら、これらをバラして移動するのではなく、「投稿日」のみ非表示にして、タイトル下に「投稿日」のみ追加する方法でも同じ事が出来そうな気がしています。

    初心者的質問で申し訳ありませんがご教授頂けると助かります。
    よろしくお願いいたします。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • こんにちは

    Twenty Elevenを境に、投稿のメタ情報は、投稿内容の上側の、posted-on から、twentytwelve_entry_meta()というテンプレート関数を使って、下側に表示されるようになったようです

    なので、Twenty Eleven をインストールしてみて、そちらでも満足できそうなら、Twenty Elevenを、やっぱりTwenty Twelveを使いたいという事なら、twentyeleven_posted_on()や content.php や content-***.phpのfooter要素の部分を比較してみるといいです。

    トピック投稿者 inos-mini

    (@inos-mini)

    nobitaさん

    こんにちは。

    アドバイスありがとうございます。
    レスポンシブ化目的でTwenty Twelveを使いたい!というきっかけで始めてしまったので、今回はTwelveで頑張りたいと思っています。9割くらいは完成していますし...。

    で、色々調べてみて、タイトル下に「投稿日」を追加するだけなら、Content.phpに<?php echo get_the_date(); ?>を追加すれば良い事が分かりました。

    ただこれだけでは2013/06/01といったDate情報だけですので、その前にPosted onを追加したいのですが記述方法が分かりません。

    また、この行の上下にMargin設定をしたいのですが、恐らくCSSに記述するのだろうとは思うのですが、そちらもどう追記して良いのか分かりません。

    ご存知の方アドバイスよろしくお願いいたします。

    WordPressのHTMLソースの出力はPHP+WordPressで定義したPHP関数を用いています。
    そのため、出力内容の変更はPHPの知識が必要になります。

    最初の質問についてですが、PHP の echo 関数は出力したい文字列をカンマで区切って並べるだけです。
    以下の感じではいかがですか?
    <?php echo 'Posted on ',get_the_date(); ?>

    CSSの定義変更方法は今までいくつかの質問・回答にある方法で定義箇所を調べ変更するだけです。
    ご質問のMargin設定については、Twenty Twelveのstyle.cssに次の定義があります。

    footer.entry-meta {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 13px;
    font-size: 0.928571429rem;
    line-height: 1.846153846;
    color: #757575;
    }

    有効なテーマのスタイルシートにこの部分をmarginの値を変えて追記または編集すればよいと思います。

    トピック投稿者 inos-mini

    (@inos-mini)

    shirakobatoさん

    アドバイスありがとうございます。

    投稿日の前に ‘Psted on’ はおっしゃるやり方で実現出来ました。
    慣れておられる方にとっては大した事のないことかも知れませんが、
    私のような素人にとっては大いなる一歩でした。

    カンマ区切り...覚えておきます。

    ところでMargin設定に関してはアドバイス頂いた方法では実現出来ませんでした。

    というのも、私の場合、「カテゴリー」「投稿日」「投稿者」といった情報は
    Twenty Twelveデフォルトのまま記事下に位置しており、
    お教え頂いたfooter.entry-meta ・・・の設定は
    その「カテゴリー」「投稿日」「投稿者」に関連するもののようで、
    Margin設定はそちらに反映されてしまいます。

    それとは独立した形で今回の「Psted on 2013/06/01」という投稿日情報を
    <?php echo ‘Posted on ‘,get_the_date(); ?>
    の表記で記事上に入れているのですが、
    これに関しては私が勝手にContent.phpに追記したものですから、
    Marginや色情報がCSSにはいないと思うのです。
    きっとCSSに何かしらの形で追記をしないといけなそうな気がしています。

    どなたかお分かりになる方いらっしゃいましたら情報頂けますでしょうか。
    よろしくお願いいたします。

    こんにちは。
    WordPressは提供されているテーマ・プラグインを使用する限り、HTML / PHP / CSS / DB を意識することなくWebサイトを構築できる利点があります。
    しかし、テーマやプラグインをカスタマイズする際はその内容により必要な知識が求められます。
    それだけに私はテーマやプラグインの作成者に大いなる敬意を抱いています。

    さて、本題です。
    footer.entry-meta はTwenty Twelve で定義している部分の CSS でした。失礼しました。
    テーマにない独立した記述を追加する場合の CSS の指定方法ですが、PHPソースに HTML の タグでID やクラスを指定して CSS の適用部分を明記する必要があります。
    汎用的な場合は<div>~</div>等を使いますし、<span>~</span>または直接スタイルを記述することもあります。

    <div id="ID名" class="クラス名"><?php echo 'Posted on ',get_the_date(); ?></div>

    のようにPHPソースを修正して、CSSで以下のような記述を追加します。

    ID名やクラス名 { margin: 0 0 0 0; }

    PHPソースと表示しているHTMLソースを眺めて、この部分はどのような意味を持つのかを書籍やサイトで調べながら修正していくと、不明部分だけを聞くよりも応用範囲の広い知識を持てると思います。

    トピック投稿者 inos-mini

    (@inos-mini)

    shirakobatoさん

    こんにちは。
    度重なるアドバイスありがとうございます。

    ID名、クラス名によってPHPとCSSを紐付けるんですね。
    なるほど理解出来ました。

    求めている結果に到達出来ました。
    ありがとうございました。

6件の返信を表示中 - 1 - 6件目 (全6件中)
  • トピック「Twenty Twelveで記事の下に表示される「投稿日」をタイトル下に移動したい」には新たに返信することはできません。