合并图块 PHP(Wordpress 主题:Planar - lite)
Merging Tiles PHP (Wordpress Theme: Planar - lite)
抱歉,如果这是一个新手问题,我将不胜感激。我正在自定义一个 wordpress 主题,我觉得我必须合并 PHP 函数才能获得我正在寻找的结果。
主题是响应式的,将 post 分成多个图块。但是,图块被分解为图像,然后是 post 内容。我在想我需要合并图块,所以缩略图是 post 图块的背景。这可能吗?
图像平铺功能
<figure class="tile" style="background: <?php echo esc_attr( get_theme_mod( 'planar_additional_color', '#398ece' ) ); ?><?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'planar-quadratum' ); if( !empty($thumbnail) ) { ?> url(<?php echo $thumbnail[0]; ?>) no-repeat; background-size: cover; background-position:50%<?php } ?>;">
<img src="<?php echo get_template_directory_uri(); ?>/img/blank.png" alt="" width="800" height="800" />
</figure>
Post函数
<article id="post-<?php the_ID(); ?>" <?php post_class('tile post'); ?>>
<img src="<?php echo get_template_directory_uri(); ?>/img/blank.png" alt="" width="800" height="800" />
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="tile-content<?php if ( !has_post_thumbnail()) : ?> no-thumbnail<?php endif; ?>" rel="bookmark">
<div class="entry-meta">
<?php
$category = get_the_category();
echo '<h3>' . $category[0]->cat_name . '</h3>';
if ( has_post_format() ) :
echo get_post_format_string( get_post_format() );
endif;
?>
<span><time datetime="<?php the_time('Y-m-d'); ?>"><?php the_date('j F Y', '<br />', '<br />'); ?></time></span>
</div><!-- .entry-meta -->
<h1 class="entry-title"><?php the_title(); ?></h1>
</a><!-- .tile-content -->
</article>
非常感谢任何帮助,谢谢。
编辑
感谢您的帮助,知道将新背景属性放在哪里非常有帮助。这是功能代码:
<article id="post-<?php the_ID(); ?>" <?php post_class('tile post'); ?> style="background: <?php echo esc_attr( get_theme_mod( 'planar_additional_color', '#398ece' ) ); ?><?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'planar-quadratum' ); if( !empty($thumbnail) ) { ?> url(<?php echo $thumbnail[0]; ?>) no-repeat; background-size: cover; background-position:50%<?php } ?>;">
再次感谢。
将 style="background-image:url('<?php echo $thumbnail ?>"
添加到您想要背景图片的任何元素。
假设文章标签:
//to get the URL
<?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'planar-quadratum' ); ?>
//display
<article id="post-<?php the_ID(); ?>" <?php post_class('tile post'); ?> style="background-image:url('<?php echo $thumbnail)">
//code...
</article
抱歉,如果这是一个新手问题,我将不胜感激。我正在自定义一个 wordpress 主题,我觉得我必须合并 PHP 函数才能获得我正在寻找的结果。
主题是响应式的,将 post 分成多个图块。但是,图块被分解为图像,然后是 post 内容。我在想我需要合并图块,所以缩略图是 post 图块的背景。这可能吗?
图像平铺功能
<figure class="tile" style="background: <?php echo esc_attr( get_theme_mod( 'planar_additional_color', '#398ece' ) ); ?><?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'planar-quadratum' ); if( !empty($thumbnail) ) { ?> url(<?php echo $thumbnail[0]; ?>) no-repeat; background-size: cover; background-position:50%<?php } ?>;">
<img src="<?php echo get_template_directory_uri(); ?>/img/blank.png" alt="" width="800" height="800" />
</figure>
Post函数
<article id="post-<?php the_ID(); ?>" <?php post_class('tile post'); ?>>
<img src="<?php echo get_template_directory_uri(); ?>/img/blank.png" alt="" width="800" height="800" />
<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="tile-content<?php if ( !has_post_thumbnail()) : ?> no-thumbnail<?php endif; ?>" rel="bookmark">
<div class="entry-meta">
<?php
$category = get_the_category();
echo '<h3>' . $category[0]->cat_name . '</h3>';
if ( has_post_format() ) :
echo get_post_format_string( get_post_format() );
endif;
?>
<span><time datetime="<?php the_time('Y-m-d'); ?>"><?php the_date('j F Y', '<br />', '<br />'); ?></time></span>
</div><!-- .entry-meta -->
<h1 class="entry-title"><?php the_title(); ?></h1>
</a><!-- .tile-content -->
</article>
非常感谢任何帮助,谢谢。
编辑
感谢您的帮助,知道将新背景属性放在哪里非常有帮助。这是功能代码:
<article id="post-<?php the_ID(); ?>" <?php post_class('tile post'); ?> style="background: <?php echo esc_attr( get_theme_mod( 'planar_additional_color', '#398ece' ) ); ?><?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'planar-quadratum' ); if( !empty($thumbnail) ) { ?> url(<?php echo $thumbnail[0]; ?>) no-repeat; background-size: cover; background-position:50%<?php } ?>;">
再次感谢。
将 style="background-image:url('<?php echo $thumbnail ?>"
添加到您想要背景图片的任何元素。
假设文章标签:
//to get the URL
<?php $thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id(), 'planar-quadratum' ); ?>
//display
<article id="post-<?php the_ID(); ?>" <?php post_class('tile post'); ?> style="background-image:url('<?php echo $thumbnail)">
//code...
</article