Wordpress,PHP - 将图像插入主题主页

时间:2016-03-07 16:11:10

标签: php css wordpress image wordpress-theming

这就是我要去的地方:

enter image description here

这是我最近的页面截图:

enter image description here

现在我只需要正确插入克里斯蒂的图像,并使文章的宽度更宽。不幸的是,我不知道如何在php中插入图像。

你可以看到图像被检测到但是我需要图像实际显示并浮动到段落的左边(就像在第一个截图中一样)。这是front-page.php的(相关)代码:

<article class="front">
<!--<h2 class="first-title">
<?php
 if ( get_theme_mod( 'ti_frontpage_article_title','About us' ) ) {
 echo get_theme_mod( 'ti_frontpage_article_title','About us' );
 }
 ?>
</h2>

<?php

if ( get_theme_mod('ti_frontpage_article_image'
,get_template_directory_uri().'/images/about_us.jpg' ) ) {

?>
<img src="<?php echo get_theme_mod(
'ti_frontpage_article_image',get_template_directory_uri().
'/images/about_us.jpg' ); ?>"
alt="<?php echo get_theme_mod( 'ti_frontpage_article_title','About us'
); ?>"

title="<?php echo get_theme_mod( 'ti_frontpage_article_title',
'About us' ); ?>">
<?php }
 ?>-->

<?php
if ( get_theme_mod
( 'ti_frontpage_article_content','Lorem ipsum dolor sit amet,
 consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
 labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
 exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
 dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
 proident, sunt in culpa qui officia deserunt mollit anim id est
 laborum. Sed ut perspiciatis unde omnis iste natus error sit
 voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque
 ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
 dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
 aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos
 qui ratione voluptatem sequi nesciunt. Neque porro quisquam est.' ) )
 {

echo '<p>' . get_theme_mod
( 'ti_frontpage_article_content',
'<img src="images/Christie_Schmuke.jpg" alt="Christi Schmuke">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde
omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo
enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt. Neque porro quisquam est.' ) . '</p>';

}
?>
</article>

正如你所看到的,我评论了一些原始代码,包括h2&#34;关于我们&#34;以及来自constructzine-lite主题(front-page.php)的城市形象。如果您认为我可以通过使用CSS插入图像,并且您希望看到style.css,请告诉我。到目前为止,我一直在使用子主题调整大部分CSS。请尽可能帮助。谢谢!

编辑:我使用的是儿童主题,但父主题是Constructzine-Lite。

2 个答案:

答案 0 :(得分:1)

您在注释掉的代码中会看到get_template_directory_uri()。这就是为您提供图像路径的其余部分(如果您将其放在images目录中,就像之前发生的那样。

如果你真的需要并且想要避免使用php,你可以硬编码图像的完整路径。 http://example.com/wp-content/themes/theme_name/images/image.jpg

您可能想重新考虑如何编写本文以利用WordPress的工作方式。有一些非常好的支持和教程可以帮助你。

答案 1 :(得分:1)

configure

请记住,get_template_directory和get_template_directory_uri是两回事。一个返回路径,一个返回URI(分别)。