固定ページの途中に新着記事を表示したい

Simplicityの特徴 フォーラム Simplicity2に関する話題何でも 固定ページの途中に新着記事を表示したい

このトピックには10件の返信が含まれ、1人の参加者がいます。5 ヶ月前 akira さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #50657

    akira

    いつも拝見し勉強させていただています。
    simplecityのフロントページをカスタマイズしたいのですが、思うようにいかず悩んでいます。

    やりたいことは「#46642」と似ているのですが、以下のような感じです。

    —————————–
    任意の固定ページ1
     —————–
     ブログ新着記事
     ブログ新着記事
     ブログ新着記事
     ・・・
     ・・
     ・
     ——————————
    任意の固定ページ1の続き
    ——————————

    上記のように固定ページの途中に新着記事を表示したいと思っています。
    ウィジェットの「固定ページ本文中」に「[S]新着記事」とすることで、現在は表現しているのですが、画像が小さかったりと意図しているものではありません。
    「固定ページ」の投稿ページに設定した際に表現されるような新着記事一覧と同じものを固定ページの途中に表示したいのですが、可能でしょうか。

    カスタマイズ対象ページ
    http://for-money.com/

    新着記事一覧
    http://for-money.com/new/

    よろしくお願いいたします。

  • #50658

    Hidekichi

    > 画像が小さかったりと意図しているものではありません。

    まず意図としているものがどういうものであるかを書いて下さい。

    フロントページを任意の固定ページとしてその間に新着を入れたいということですよね?
    それはわかりますが、何が必要でどのようにスタするしたいかそこが重要です。
    何が必要とはサムネイル、記事タイトルはもちろん、それ以外に何が必要かという事です。それにそってどうするべきか考える必要があります。

    あるいは、現在の新着で画像以外にどういう部分が意図と違うかでも良いです。

  • #50659

    Hidekichi

    > 「固定ページ」の投稿ページに設定した際に
    > 表現されるような新着記事一覧と同じものを

    ここがちょっとわからなかったもので。

  • #50661

    Hidekichi

    ☓ スタするしたい
    ○ スタイルしたい

  • #50663

    akira

    返信ありがとうございます。

    >まず意図としているものがどういうものであるかを書いて下さい。
    →「新着記事一覧」のリンク先と全く同じように表現したいと思っています。
     「任意の固定ページ1」の間に「新着記事一覧」の固定ページが挿入されているようなイメージです。

    よろしくお願いいたします。

  • #50669

    Hidekichi

    新着記事に日付を表示したいのトピックでサイドバーに新着を表示するというのを書きましたが、それをちょっと改造してみました。

    子テーマfunctions.phpにわかるように追加して、何か問題が出た際はftp等で追加した部分をコメントアウト、あるいは削除すれば良いように準備をしておいて下さい(元の子テーマfunctions.phpをバックアップしておき、下記を追加したものをアップロード。問題があれば、バックアップしておいたものをアップロードして修正という感じで)。

    function sc_newPost($opt) {
      extract(shortcode_atts(array(
        'num' => ''
      ), $opt));
      
      $num = (!empty($num)) ? $num : 5;
        
      $args = array(
        'posts_per_page'   => $num,
        'orderby'          => 'date',
        'order'            => 'DESC',
        'post_type'        => 'post',
        'post_status'      => 'publish'
      );
    
      $posts_array = get_posts( $args );
    	
      $out = "";
      $out .= "<ul>";
      foreach($posts_array as $post) {
        setup_postdata( $post );
        $id = $post->ID;
        $title = $post->post_title;
        $post_date = get_the_time( get_theme_text_date_format(), $id);
        $post_modified = $post->post_modified;
        $link = get_the_permalink($id);
        $thumb = get_the_post_thumbnail(
          $id,
          'thumb150',
          array(
            'class' => 'list-thumb',
            'alt' => $title
          )
        );
        $categories = get_the_category($id);
        if ($categories) {
          foreach($categories as $cat) {
            $cats[] = "<a href='".get_category_link($cat->term_id)."' title='".$cat->name."'>"
                    . $cat->cat_name . "</a>";
          }
         }
        if (!empty($cats)) {
          $category = "<span class='fa fa-folder fa-fw'></span>".implode(" | ", $cats);
        } else {
          $category = "! Category is not set !";
        }
        unset($cats);
    		
        $excerpt = get_the_custom_excerpt( $post->post_content, get_excerpt_length() );
    		
        //html出力
        $out .= <<< EOM
    <li>
      <div class="thumb">
        <a href="{$link}" title="{$title}">
          {$thumb}
        </a>
      </div>
      <div class="content">
        <h3>
          <a href="{$link}" title="{$title}">
            {$title}
          </a>
        </h3>
        <p>
          <span class="post-date">
            <span class="fa fa-clock-o fa-fw"></span>
            <span class="published">{$post_date}</span>
          </span>
          <span class="category">{$category}</span>
        </p>
        <div class="excerpt">{$excerpt}</div>
        <div class="read">
          <a href="{$link}" title="{$title}">記事を読む</a>
        </div>
      </div>
    </li>
    <hr>
    EOM;
      }
    
      wp_reset_postdata();
    	
      $out .= "</ul>";
    	
      return $out;
    }
    add_shortcode('nwlist', 'sc_newPost');

    必要があれば「html出力部分」や、それ以前に書いてある変数部分を変更してください。

    サンプル: ショートコードを利用して新着を任意の件数表示する。抜粋付き | codepen
    ※ cssはscssで書いてます。css欄のview compiledよりcssに変換できます。

    表示自体はデフォルトのリストに似せてありますが、中身の書き方は違います。htmlの構造に従ってcssを修正・追加等して下さい。
    2列でも3列表示でも可能です。

    記事の中には、

    <div class="insertList">
    [nwlist]
    </div>

    あるいは、

    <div class="insertList">
    <h3>何かしらのタイトル</h3>
    [nwlist]
    </div>

    このようにして、

    .insertList h3 {
      //何かしらのスタイル
    }

    という感じでスタイルして下さい。

    <div class="insertList">
      <ul>
        <li>
          <div class="thumb">
            <a href="#">
              <img src="#" class="list-thumb wp-post-image" alt="#" width="148" height="150">
            </a>
          </div>
          <div class="content">
            <h3>
              <a href="#" title="#">何かしらのタイトル</a>
            </h3>
            <p>
              <span class="post-date">
                <span class="fa fa-clock-o fa-fw"></span>
                <span class="published">更新日</span>
              </span>
              <span class="category">
                <span class="fa fa-folder fa-fw"></span>
                <a href="#" title="未分類">未分類</a>
              </span>
            </p>
            <div class="excerpt">抜粋部分</div>
            <div class="read">
              <a href="#" title="#">記事を読む</a>
            </div>
          </div>
        </li>
        <hr>
      </ul>
    </div>

    1つのリストアイテムに付きこんなhtmlが出力されます。

  • #50671

    Hidekichi

    ちなみに、

    <div class="insertList">
    [nwlist num=10]
    </div>

    とすれば10件表示されます。

    カテゴリのセパレーターは、
    $category = "<span class='fa fa-folder fa-fw'></span>".implode(" | ", $cats);
    でやってます。
    implode(" | ", $cats); を
    implode(“, “, $cats); とすれば,で区切られます。

  • #50672

    Hidekichi

    implode(", ", $cats);

    code入れるの忘れてました。

  • #51216

    akira

    返信ありがとうございました。
    いただいたコードでは一部正常に表示されなかったので、なんとか調整しようとしたのですが、できなかったため再度質問させていただきます。

    いただいたコードをそのままコピペすると表示は以下のとおりとなります。

    http://for-money.com/test-2/

    どの当たりを修正すればよろしいのでしょうか。
    基本的なことかもしれませんが、よろしくお願いいたします。

  • #51218

    Hidekichi

    サンプルのscsscssに変換して、子テーマstyle.css追記して下さい。

    表示(html)は中身をちゃんと見てませんが、classは出力されていたので、たぶんスクリプトのhtmlを触っていないならcssを適用するだけです。

    必要な項目は出力されているようなので、サンプルの通りに表示されるだろうと思います。
    後はcssでのスタイルの話なので、htmlの構造をデベロッパーツールで確認しながら好きにいじって下さい。

  • #51224

    akira

    cssについて理解できていませんでした。
    cssを追加したところうまく表示されました。

    いじり方もわかったので、いろいろ挑戦してみたいと思います。

    ありがとうございました。

トピック「固定ページの途中に新着記事を表示したい」への新規返信追加は締め切られています。

スポンサーリンク
アドセンス(大)
アドセンス(大)