5 template parts
comments.html
<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40","right":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40"}}},"className":"comment-section","layout":{"type":"default"}} -->
<div class="wp-block-group comment-section" style="padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:comments -->
<div class="wp-block-comments"><!-- wp:heading -->
<h2 class="wp-block-heading">Comments</h2>
<!-- /wp:heading -->
<!-- wp:comments-title {"level":3} /-->
<!-- wp:comment-template -->
<!-- wp:columns {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|40"}}}} -->
<div class="wp-block-columns" style="margin-bottom:var(--wp--preset--spacing--40)"><!-- wp:column {"width":"40px"} -->
<div class="wp-block-column" style="flex-basis:40px"><!-- wp:avatar {"size":40,"style":{"border":{"radius":"20px"}}} /--></div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column"><!-- wp:comment-author-name /-->
<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex"}} -->
<div class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:comment-date /-->
<!-- wp:comment-edit-link /--></div>
<!-- /wp:group -->
<!-- wp:comment-content /-->
<!-- wp:comment-reply-link /--></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- /wp:comment-template -->
<!-- wp:comments-pagination {"paginationArrow":"arrow","layout":{"type":"flex","justifyContent":"space-between"}} -->
<!-- wp:comments-pagination-previous /-->
<!-- wp:comments-pagination-numbers /-->
<!-- wp:comments-pagination-next /-->
<!-- /wp:comments-pagination -->
<!-- wp:post-comments-form /--></div>
<!-- /wp:comments --></div>
<!-- /wp:group -->example.html
<style>
.main_page {
flex: 1;
}
.post_template {
padding-left: 0px;
}
.blogs h1 {
font-size: 72px;
font-weight: 500;
margin: 50px 0;
display: block;
}
.blogs .post_template li {
display: inline-block;
width: calc(33.33% - 24px);
box-shadow: 0 0 20px #ccc;
padding: 13px;
box-sizing: border-box;
border-radius: 10px;
margin: 0 10px;
}
.blogs .post_template li img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 10px;
}
.blogs .post_template li .post_title a {
text-decoration: none;
color: #000;
font-size: 24px;
font-weight: 500;
line-height: 30px;
display: block;
margin-top: 20px;
min-height: 90px;
}
.more-Reading {
font-size: 18px;
color: #000;
margin-bottom: 20px;
display: block;
}
.post_date {
width: calc(50% - 3px);
display: inline-block;
margin-bottom: 20px;
}
.tag_s {
width: calc(50% - 3px);
display: inline-block;
text-align: right;
margin-bottom: 20px;
color: #000;
}
.container {
max-width: 1200px;
width: 100%;
margin: 0 auto;
}
@media only screen and (max-width: 600px) {
.blogs .post_template li {
width: 100%;
margin: 10px 0px;
}
.blogs h1 {
font-size: 48px;
}
.blogs .post_template li .post_title a {
min-height: auto;
}
}
@media only screen and (min-width: 601px) and (max-width: 992px) {
.blogs .post_template li {
width: calc(50% - 23px);
margin: 10px 10px;
}
}
/* Add CSS to control the layout */
.image-heading-container {
}
.image-heading-container img {
display: block; /* Make the image a block element */
}
</style>
<?php
// Define a variable with the path to your new image relative to the theme folder
$stonesImagePath = esc_url(get_theme_file_uri('assets/images/stones.jpg'));
?>
aaaaa <?php echo esc_url(get_theme_file_uri('assets/images/stones.jpg')) ?>
<img src="<?php echo esc_url( get_theme_file_uri( 'assets/images/stones.jpg' ) ); ?>"
<div class="main_page">
<div class="blogs">
<div class="container">
<div class="image-heading-container">
aaaaa <?php echo esc_url(get_theme_file_uri('assets/images/stones.jpg')) ?>
<img width="300" src="<?php echo $stonesImagePath; ?>" class="custom-logo" alt="Simply Zen" decoding="async" fetchpriority="high">
<h1>Simply Zen</h1>
</div>
<ul class="post_template">
<li>
<img src="https://www.macintoshhowto.com/wp-content/uploads/2023/08/default-image.jpg" alt="">
<h2 class="post_title"><a href="" target="_self" rel="noopener">New Theme</a></h2>
<p class="post_descrption">I’ve released the macintoshhowto theme to wordpress for others to use. You can check it out on wordpress.org here.</p>
<a class="more-Reading" href="">Continue Reading</a>
<div class="post_date">August 1, 2023</div>
<a class="tag_s" href="">Wordpress</a>
</li>
<li>
<img src="https://www.macintoshhowto.com/wp-content/uploads/2023/07/pxhere-730629.jpeg" alt="">
<h2 class="post_title"><a href="" target="_self" rel="noopener">Can I zoom the MacBook Pro camera in a Zoom meeting?</a></h2>
<p class="post_descrption">Sometimes when I’m in a Zoom meeting I am a little far from my camera and wish that I could zoom in closer to my face…</p>
<a class="more-Reading" href="">Continue Reading</a>
<div class="post_date">July 30, 2023</div>
<a class="tag_s" href="">hardware</a>
</li>
<li>
<img src="https://www.macintoshhowto.com/wp-content/uploads/2023/07/ipad_pxhere-759463.jpeg" alt="">
<h2 class="post_title"><a href="" target="_self" rel="noopener">How to sync your iPad without using your iCloud data</a></h2>
<p class="post_descrption">If you are on a free iCloud plan, you may be looking to save space. I found that my iPad backup took 2 GB of iCloud space…</p>
<a class="more-Reading" href="">Continue Reading</a>
<div class="post_date">July 28, 2023</div>
<a class="tag_s" href="">sync</a>
</li>
</ul>
</div>
</div>
</div>
<!-- /wp:group -->
<!-- /wp:group -->footer.html
<!-- wp:group {"backgroundColor":"primary","layout":{"type":"constrained"}} -->
<div class="wp-block-group has-primary-background-color has-background"><!-- wp:group {"align":"full","style":{"spacing":{"blockGap":"15px"}},"backgroundColor":"base","textColor":"contrast","layout":{"type":"flex","orientation":"vertical","justifyContent":"center"}} -->
<div class="wp-block-group alignfull has-contrast-color has-base-background-color has-text-color has-background"><!-- wp:paragraph {"align":"center","fontSize":"medium"} -->
<p class="has-text-align-center has-small-font-size"><a rel="noreferrer noopener" href="https://macintoshhowto.com/simplyzen" data-type="URL" data-id="https://macintoshhowto.com/simplyzen" target="_blank">Simply Zen Theme</a> Copyright © 2023 Powered by <a href="https://wordpress.org">WordPress</a></p>
<!-- /wp:paragraph -->
<!-- wp:social-links {"size":"has-normal-icon-size","style":{"spacing":{"blockGap":{"top":"12px","left":"12px"}}},"className":"is-style-logos-only","layout":{"type":"flex","flexWrap":"nowrap"}} -->
<ul class="wp-block-social-links has-normal-icon-size is-style-logos-only"><!-- wp:social-link {"url":"#","service":"facebook"} /-->
<!-- wp:social-link {"url":"#","service":"twitter"} /-->
<!-- wp:social-link {"url":"#","service":"wordpress"} /--></ul>
<!-- /wp:social-links --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->header.html
<!-- wp:pattern {"slug":"simply-zen/header"} /-->
post-meta.html
<!-- wp:columns {"align":"wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|30"},"blockGap":"var:preset|spacing|30"}},"fontSize":"small"} -->
<div class="wp-block-columns alignwide has-small-font-size" style="margin-top:var(--wp--preset--spacing--30)"><!-- wp:column {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"0.5ch"}},"layout":{"type":"flex"}} -->
<div class="wp-block-group"><!-- wp:paragraph -->
<p>
Posted </p>
<!-- /wp:paragraph -->
<!-- wp:post-date /--></div>
<!-- /wp:group --></div>
<!-- /wp:column -->
<!-- wp:column {"style":{"spacing":{"blockGap":"0px"}}} -->
<div class="wp-block-column"><!-- wp:group {"style":{"spacing":{"blockGap":"0.5ch"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"right"}} -->
<div class="wp-block-group"><!-- wp:post-terms {"term":"post_tag"} /--></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->