page.phpとstyle.css

【解決】WordPressでもっとみるさらにみるshow moreの設定の仕方トップページを記事一覧にする.md

【解決】WordPressで「もっとみる・さらに見る」「show more」の設定の仕方(トップページを記事一覧にする)の設定のpage.phpとstyle.css

最新のコードはこちらで管理しています

ブログ記事

注意 ・Twenty Nineteenバージョン: 1.4 の page.phpであること ・phpは3.5.5

page.php

※うまくいっていない箇所あり(出力されるhtml内のaタグの中にcontentが入らないところ)

<?php
/**
 * The template for displaying all single posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package WordPress
 * @subpackage Twenty_Nineteen
 * @since 1.0.0
 */

get_header();
?>

<section id="primary" class="content-area">
<main id="main" class="site-main">


<?php
global $post;
$args = array( 'posts_per_page' => 8 );
$myposts = get_posts( $args );
foreach( $myposts as $post ) {
setup_postdata($post);
?>
<div class="flex-wrap">
  <a href="<?php the_permalink() ?>">
    <div class="flex">
      <div class="item thum">
        <?php if(has_post_thumbnail()): ?>
          <?php the_post_thumbnail('index_thumbnail'); ?>
          <?php endif; ?>
        </div>
        <div class="item content">
          <span class="time">
            <?php the_time('Y.m.d') ?>
          </span>
          <span class="title">
            <?php the_title(); ?>
          </span>
          <span>
            <?php the_content(); ?>
          </span>
        </div>
      </div>
    </a>
  </div>
<?php
}
wp_reset_postdata();
?>

</main><!-- #main -->
</section><!-- #primary -->

<?php
get_footer();
?>

style.css

/*
Theme Name: Twenty Nineteen Child
Theme URI: https://wordpress.org/themes/twentynineteen/
Template: twentynineteen
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you’re running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
Tags: one-column,flexible-header,accessibility-ready,custom-colors,custom-menu,custom-logo,editor-style,featured-images,footer-widgets,rtl-language-support,sticky-post,threaded-comments,translation-ready
Version: 1.4.1580554747
Updated: 2020-02-01 19:59:07

*/

body {
  line-height: 1;
  font-size: 16px;
}

.flex {
  display: flex;
  width: 100%;
  justify-content: space-between;
  padding: 10px;
  box-sizing: border-box;
}

.flex > a {
  flex: 1;
}

.item {
  padding: 10px;
}

.item.thum {
  padding: 10px;
}

.item.content {
  flex: 1;
}

.item.content .time {
  font-size: 12px;
}

.item.content .title {
  line-height: 1.2;
    font-size: 14px;
    color: #2e2e2e;
}

.thum img {
  width: 30%;
}

.thum img {
  width: 100%;
  height: auto;
}

.flex-wrap{
  border-bottom: 1px solid #e2e2e2;
}

@media (min-width: 900px ){
  .site-main {
    width: 840px;
    margin: 0 auto;
  }
  .flex > a {
    flex: 1;
  }
  .item.thum {
    padding: 10px;
    width: 80%;
  }
  .item.content {
    flex: 1;
  }
  .thum img {
    max-width: 60%;
    height: auto;
  }
  .widget-title {
    font-size: 16px;
  }
}
/* カスタム */

.entry .entry-content p {
  line-height: 1.6;
  letter-spacing: 1.1px;
  font-size: 16px;
}
.site-header.featured-image {
  min-height: auto;
}
.site-header.featured-image .site-featured-image .entry-header {
  margin-top: 0;
}
.site-header.featured-image

.widget-title {
  font-size: 18px;
}

.widget.widget_recent_entries ul li a {
  font-size: 16px;
}