インデックス一覧ページ一つ目の投稿記事を大きく表示する方法

Simplicityの特徴 フォーラム テーマファイルのカスタマイズに関する質問など インデックス一覧ページ一つ目の投稿記事を大きく表示する方法

  • このトピックには16件の返信、2人の参加者があり、最後に拳志郎により8年、 3ヶ月前に更新されました。
16件の返信スレッドを表示中
  • 投稿者
    投稿
    • #30731
      拳志郎
      ゲスト

      いつもお世話になっております。
      stinger使用サイトでたまに見かけるのですが
      最初の記事だけ大きく目立つよう表示して
      2つ目以来は普通に表示させることは出来るのでしょうか!?

      出来るのであればアドバイス頂きたいと存じます。
      宜しくお願いします。

    • #30737
      アバター画像わいひら
      キーマスター

      それについては、以下の記事などを参考にしてみてください。
      最新記事だけ大きく表示する方法・改訂版

      一覧リストのルーブ文に関する記述は、list.phpにあります。

    • #30738
      拳志郎
      ゲスト

      わいひらさん いつもありがとうございます。

      一つ目の投稿記事を大きく表示する方法
      をクリックしてもサイトに移動しないです。

      すみませんがアドレスの確認お願いします。
      すみません。

    • #30766
      よくできる?学生
      ゲスト

      正しいURLはこちらかと思われます。

    • #30774
      アバター画像わいひら
      キーマスター

      間違ったページでリンクを生成してしまいました;
      修正しておきました。
      よくできる?学生さんのリンクと同じです。

    • #30906
      拳志郎
      ゲスト

      よくできる?学生 さん
      わいひら さん どうもありがとございます。
      教えて頂いたサイトを参考にいろいろチャレンジしてるのですがstingerだと上手くいくのですが
      Simplicityだと上手く出来ません。
      そこで少し教えて下さい。
      functions.phpの最後に
      ?>は無いのは何故なのでしょうか?
      これは前々から疑問でした。

      そこで親のテーマのfunctions.phpに追加しても画面が真っ白になってしまいます。
      子テーマに追加した場合はきちんと表示されるのですが
      親のテーマのfunctions.phpに追加で書くことは出来ない使用なのでしょうか?

      次にlist.phpの中の

      <div id="list">
      <!-- 記事一覧 -->
      <?php
      ////////////////////////////
      //一覧の繰り返し処理
      ////////////////////////////
      if (have_posts()) : // WordPress ループ
        $count = 0;
        while (have_posts()) : the_post(); // 繰り返し処理開始
          $count += 1;
          if ( is_list_style_bodies() ) {//一覧表示スタイルが本文表示
            get_template_part('entry-body');//一覧表示スタイルが本文表示の場合
          } else {//サムネイルカードか、大きなサムネイルカードの場合
            //一覧表示スタイルがカードor大きなサムネイルカード表示の場合
            get_template_part('entry-card');
          }
      
          //トップページ中間に広告をできるかどうか(表示するかどうか)
          if ( is_ads_list_in_middle_on_top_page_enable($count) ) {
            get_template_part('ad');
          }
      
          //3つ目のアイテムの下にインデックスリストミドルウィジェットを表示するか
          if ( $count == 3 && is_list_style_thumb_cards() && is_active_sidebar( 'widget-index-middle' ) ) {
            echo '<div id="widget-index-middle" class="widgets">';
            dynamic_sidebar( 'widget-index-middle' );
            echo '</div>';
      
          }
      
        endwhile; // 繰り返し処理終了 ?>
        <div class="clear"></div>
      <?php else : // ここから記事が見つからなかった場合の処理  ?>
          <div class="post">
            <h2>NOT FOUND</h2>
            <p>お探しの記事は見つかりませんでした。</p>
          </div>
      <?php
      endif;
      ?>
      </div><!-- /#list -->
      

      のこの部分を編集すれば良いと思ったのですが
      中々僕には複雑で分かりません。
      もう少しアドバイス頂けないでしょうか。
      ご面倒お掛けしますがよろしくお願いします。

    • #30911
      Hidekichi
      ゲスト

      よい方法をお教えしましょう。

      トップのリストは、#list .entryという構造になってます。つまり、IDがlistでclassが.entryとなっており、.entryがリストアイテムです。
      他のリストアイテムと表示する内容(サムネイル・タイトル・post-meta・その他)が同じで良いのならばjQueryとCSSでいじくるのが最も早く実現できます。
      しかしながら、どうすれば最初のアイテムに他のアイテムと別のスタイルを適用できるかと言いますと、最初であるというクラスを追加すればよいわけです。あるいは、.entry:firstでもいけるかもしれません。

      リストアイテムの最初のアイテムだけにクラスを追加する | jsFiddle

      このサンプルでご理解頂けるでしょうか?
      まぁやっつけで作ったので、色々とアレですけれどもね(笑)

      完全に別物にするわけではありません(別物にもできますけれども・・・まぁそれは置いといて)。
      あくまでも#list .eytryのプロパティを継承します。他の.entryがwidth: 500pxを仮に持っていたとしたら、500pxは継承しますが、セレクタを別にすることで、そのクラスがついているアイテムだけ設定を変更することができるのです。
      後のデザインはcss次第です。場合によっては継承される一部のプロパティを打ち消さないといけないかも知れません。

      PHP自体を変更するわけではないので親テーマのアップデートにも対応できます(仕様が変わらなければ)。
      上記サンプルのスクリプトは子テーマjavascript.jsに追記します。(function($){…})(jQuery);部分。わかりやすいように飾りを入れたので、不要部分は消してください。
      css部分は参考程度に、ご自身でいじくられる方がよいでしょう。

    • #30913
      Hidekichi
      ゲスト

      実は、もうひとつあります。それは、リストアイテムの最初の要素だけ#body-inの下に持ってくるのです。すると、#mainと#sidebarの合わせた幅を持つリストアイテムの最初の要素ができます。持っていくだけだとデザイン的にアレなので、何かしらwrapperを作ってそこに持って行くこともできます。
      意味合い的には、before-main.phpにhtmlを追記したような感じになります。

      (function($){
        $(function(){
          $("#body-in").prepend("<div class='moveListItem' />");
          $("#list .entry").first().appendTo("#body-in .moveListItme");
        });
      })(jQuery);

      もうひとつ、今思い出したのですが、ページが変わった時のことを忘れてました。
      トップページのアドレスは基本 http://自分のサイトアドレス/(もしくはwordpressのディレクトリ)/と言う構造かと思います。ページが2、3と変わると、そこに何かしらがくっついていくわけなので、

      var topPage = "自分のサイトトップページのアドレス";
      if ( location.href === topPage ){
        //$("#body-in")とか
        //$("#list .entry")とか
      }

      などとしておく必要があるかも知れません。そうすれば2ページ以降は通常表記になるかと思います。

    • #30916
      サノケン
      ゲスト

      トップページ作りに皆さん苦心してますね
      一覧表示だけでは少し物足りないし
      でも一覧は表示したい

      日々記事を投稿されない方やトップでアピールしたい方は
      別投稿の固定ページ+リスト表示など
      とても参考になります

    • #30928
      アバター画像わいひら
      キーマスター

      PHPの記述が難しい場合は、hidekichiさんのおしゃるように、スタイルシートでのアレンジの方が楽かもしれません。

      functions.phpの最後に
      ?>は無いのは何故なのでしょうか?
      これは前々から疑問でした。

      理由は以下です。

      PHPの終了タグの省略
      PHPブロックで終了するファイルでは、PHPの終了タグを省略することが出来るようです。というか、HTMLを含まないファイルでは、むしろ省略することが推奨されているようです。理由は、PHPブロックの外側は文字列として出力されるので、終了タグの外側に改行がある場合、その改行がそのまま出力されるのを防ぐためだとか。

      引用:PHPプログラミングの基本 | kudox.jp

    • #30937
      拳志郎
      ゲスト

      Hidekichi さんいつも詳しいご説明大変ありがとございます。
      早速今夜にでもトライしてみます。

      わいひら さん終了タグのことありがとございました。
      そう言った理由があったんですね。
      これでスッキリしました。

    • #30990
      e-farmer
      ゲスト

      お世話になります。
      トップページのタイトルの消し方・編集に関しましてで同じような目的で質問した者です。

       一覧リストのスタイルを「本文表示」にすることにより一応達成できていたのですが、その後サムネイルカードでも実現できたので報告します。
      Do It Ourselves! それ自分でやってみたら

      やり方は、list.phpの繰り返し処理の部分を下記のように変更しました。

      ////////////////////////////
      //一覧の繰り返し処理
      ////////////////////////////
      if (have_posts()) : // WordPress ループ
        $count = 0;
        while (have_posts()) : the_post(); // 繰り返し処理開始
          $count += 1;
          if ( is_list_style_bodies() ) {//一覧表示スタイルが本文表示の場合
            get_template_part('entry-body');//本文表示
          }
          elseif ( $count == 1 && is_home() && !is_paged()) {//サムネイルカードか、大きなサムネイルカードの場合の一番目
          get_template_part('entry-body');//本文表示
          }else{ //一覧表示スタイルがカードor大きなサムネイルカード表示で2番目以降の場合
            get_template_part('entry-card');//サムネイルカード表示
          }

      (もちろん子テーマにコピーしたlist.phpを修正します)
      これで、最初の記事だけ本文表示で、それ以降はサムネイルカード表示になります。

      ところが、サムネイルカードと大きなサムネイルカードの時はうまく行きましたが、一覧表示がタイルの場合は、全て一番目の記事に2番目移行のタイルがかぶってしまいダメです。
      タイル表示は使わないのでさしあたり問題ないのですが、こうなる理由を教えていただければありがたいです。

    • #30991
      e-farmer
      ゲスト

      先の投稿でlist.phpの中身の一部がなぜか実態参照文字に変換されています。
      && は && に置き換えて下さい。

    • #30992
      e-farmer
      ゲスト

      &&&& → && です

    • #30993
      e-farmer
      ゲスト

      また、うまくいかないですね。
      && → &&
      です。これでうまくいかない場合は、わいひらさん御願いします<(._.)>

    • #31016
      アバター画像わいひら
      キーマスター

      コードの&が化けてしまうのは、bbPressの仕様なのでe-farmerさんの書き方に問題があるわけではありません。
      どうも、管理者がサブミットしないとちゃんと表示されないようです。
      コードを修正しておきました。

      それにしても、entry-body.phpを利用するのは、良いアイディアですね。
      その発想はなかったです。もしかしたら、新機能として利用させてもらうかもしれません。
      書き込みありがとうございます。

    • #31328
      拳志郎
      ゲスト

      e-farmer さんを含め皆様どうもありがとございました。
      色んなアドバイスのおかげさまで上手く出来ました。

16件の返信スレッドを表示中
  • トピック「インデックス一覧ページ一つ目の投稿記事を大きく表示する方法」には新しい返信をつけることはできません。
スポンサーリンク
アドセンス(大)
アドセンス(大)