カスタマイズ > 固定フロントページ > 投稿ページを色々いじりたい

> 上にコンテンツを挿入したり

ダッシュボード→ウィジェットより、インデックスリスト・トップを利用して何かしらのウィジェットを入れることはできます。ショートコードを合わせれば色々できますし、jQieryを使う方法もあります。これはリスト一覧の最初のアイテムの上です。

上というのが、#mainと#sidebarの上ということならbefore-main.phpをいじります。
入れたいものが何かがわからないので何とも言えない部分もありますが。

> カテゴリーや日付の表示スタイルの順番などを色々変更したりしたいですが、

具体的にどうしたいのかを書いてもらえれば何かしら考えますが、たいていはcssでできます。
cssだけで間に合わない場合はjqueryで何とでもできます。

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

上にコンテンツを挿入したい、ということに関してはインデックストップリストのウィジェットでできそうです！投稿記事一覧の上がここで指定されていることは知りませんでした、ありがとうございます。

日付などの順番をいじりたい、ということに関して、具体的にはLigさんのブログカードのように、
https://liginc.co.jp/
右下に日付を表示して、左上にカテゴリーを表示したいと思っております。（サイドバーで使用しているpopular postウィジェットと統一性を持たせるため。）

どこかで変数と構造が指定されていれば、そこをちょろちょろ順番を変えれば、あとはCSSをいじればできるかな？と思ったのですが、何かアドバイス頂ければ幸いです。

Simplicityデフォルトの記事一覧

<a class="hover-card" href="https://"><article id="post-2610" class="entry cf entry-card post-2610 post type-post status-publish format-standard has-post-thumbnail category-2017natu category-konzatu tag-events tag-natu">
  <figure class="entry-thumb">
                  <img width="150" height="150" src="150x150.png" class="entry-thumnail wp-post-image" alt="今年の夏は、暑いです。" srcset="150x150.png 150w, 100x100.png 100w" sizes="(max-width: 150px) 100vw, 150px">
            </figure><!-- /.entry-thumb -->

  <div class="entry-card-content">
  <header>
    <h2>今年の夏は、暑いです。</h2>
    <p class="post-meta">
            <span class="post-date"><span class="fa fa-clock-o fa-fw"></span><span class="published">2017/3/7</span></span>
      
            <span class="category"><span class="fa fa-folder fa-fw"></span>2017年, 季節のイベント</span>
  
    </p><!-- /.post-meta -->
      <div class="admin-pv">
  <span class="all">全体:<span class="pv-count">21</span></span><span class="monthly">月:<span class="pv-count">21</span></span><span class="weekly">週:<span class="pv-count">21</span></span><span class="daily">日:<span class="pv-count">21</span></span>  </div>
  </header>
  <p class="entry-snippet">今年はあついですね。記事抜粋・・・・</p>

    <footer>
    <p class="entry-read">記事を読む</p>
  </footer>
  
</div><!-- /.entry-card-content -->
</article></a>

Ligさんの一覧

<li>
                                    <article class="article-list article-list-normal">
  <a href="https://liginc.co.jp/342944" class="sp-top-list-link gtm_archive_link" id="sp-top-list-link5" data-index="5">
    
    <div class="clearfix">
              <img class="article-list-eyecatch js_lazy" src="https://cdn.liginc.co.jp/wp-content/uploads/2017/02/148734297851104200_81-400x267.jpg" data-original="https://cdn.liginc.co.jp/wp-content/uploads/2017/02/148734297851104200_81-400x267.jpg" alt="東京から3時間半！大自然の残る長崎県壱岐島（いきのしま）でリモートワークをしてきました！のアイキャッチ" style="display: block;">
      
      <div class="article-list-meta">
                <div class="article-list-series">
          <div class="series-title clearfix">
            <span class="series-title-number">第8話</span>
            <span class="series-title-text">出張！全国どこでもオフィス</span>
          </div>
        </div>
              <h2 class="article-list-title">
          東京から3時間半！大自然の残る長崎県壱岐島（いきのしま）でリモートワークをしてきました！        </h2>
      </div>
    </div>

    <div class="clearfix">
            <div class="article-list-tags clearfix">
        <span class="tag tag-small tag-pr">LIG PR</span>      </div>
    
      <div class="article-list-like">
        <div class="like-count">
          <i class="icon-heart like-count-icon"></i>
          <span class="like-count-number">512</span>
        </div>
      </div>

      <div class="article-list-date">
        <time class="date date-small" datetime="2017-03-03">2017.03.03</time>
      </div>
    </div>
  </a>
</article>
                  </li>

さらに具体的には、記事を読むの右側に日付を移動して、float rightで右下に投稿日付を表示する感じにしたいと考えています。
もし何かアドバイス頂ければ大変うれしく思います。

<a class="hover-card" href="https://"><article id="post-2610" class="entry cf entry-card post-2610 post type-post status-publish format-standard has-post-thumbnail category-2017natu category-konzatu tag-events tag-natu">
  <figure class="entry-thumb">
                  <img width="150" height="150" src="150x150.png" class="entry-thumnail wp-post-image" alt="今年の夏は、暑いです。" srcset="150x150.png 150w, 100x100.png 100w" sizes="(max-width: 150px) 100vw, 150px">
            </figure><!-- /.entry-thumb -->

  <div class="entry-card-content">
  <header>
    <h2>今年の夏は、暑いです。</h2>
    <p class="post-meta">
      
            <span class="category"><span class="fa fa-folder fa-fw"></span>2017年, 季節のイベント</span>
  
    </p><!-- /.post-meta -->
      <div class="admin-pv">
  <span class="all">全体:<span class="pv-count">21</span></span><span class="monthly">月:<span class="pv-count">21</span></span><span class="weekly">週:<span class="pv-count">21</span></span><span class="daily">日:<span class="pv-count">21</span></span>  </div>
  </header>
  <p class="entry-snippet">今年はあついですね。記事抜粋・・・・</p>

    <footer>
    <p class="entry-read">記事を読む <span class="post-date"><span class="fa fa-clock-o fa-fw"></span><span class="published">2017/3/7</span></span></p>
  </footer>
  
</div><!-- /.entry-card-content -->
</article></a>

サンプル: post-metaの配置を変える | codepen
※ cssはscssで書いてあります。css欄下向き三角からview compiledでcssに変換できます。

こんな感じですかね。

phpファイルを直でいじると親テーマのアップデート時に面倒ですし、cssやらjQueryでできるならそっちでやるほうが良いです。

子テーマに持っていってもイケると思うんですが、今度は親テーマのアップデートで変更があった場合が面倒くさいですしね。

ありがとうございます！
jquery回りはよくわからないのですが、コピペで実装することができました。
カードの間が結構せまいなあと思っていたので、とても助かりました。

https://dwait.net/index.php/tdrportalblog

子テーマの追記
style.cssに追記

#list .entry {position: relative;margin-bottom: 0;}
#list .entry  .entry-card-content  .post-meta {background-color: transparent;font-size:0.8em;}
#list .entry  .entry-card-content  .post-meta .post-date {position: absolute;right: 0;bottom: 0;font-weight:bold;}
#list .entry  .entry-card-content  .post-meta  .entry-snippet {display: none;}
#list .entry  .entry-card-content  .post-meta .entry-read {position: absolute;left: 161px;bottom: 0;}

#list .entry-sep {
    color: initial;
    width: 100%;
    display: block;
    height: 1px;
    background-color: #ccc;
    border: 0 solid transparent;
    margin: 15px 0;
    }

   #list .entry-sep:last-of-type {
      display: none;
    }

javascript.jsに追記

(function($){
	$(function(){
		
		//hover-cardを使われているみたいなので
		//仮に実装する
		$("#list").find(".entry").wrap("<a class='hover-card' href='#'>");
		
		//リストアイテムのセパレータ
		//hover-cardが無い時
		//$("#list").find(".entry").after("<hr class='entry-sep'>");
		
		//hovercardがある場合は、
		$("#list").find(".hover-card").after("<hr class='entry-sep'>");
	});
})(jQuery);

修正
javascript.js

(function($){
	$(function(){
		
		//hovercardがあるので、
		$("#list").find(".hover-card").after("<hr class='entry-sep'>");
	});
})(jQuery);