2016-03-07 38 views
0

這裏就是我要去爲:WordPress的,PHP - 插入圖像插入主題首頁

enter image description here

這是我最近的頁面截圖:

enter image description here

現在我只需要正確插入Christi的圖像,並使文章的寬度更寬。不幸的是,我不知道如何在php中插入圖片。

您可以看到圖像被檢測到,但我需要圖像實際顯示並浮動到段落的左側(如第一次截圖所示)。下面是前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和城市的距離constructzine圖像-lite主題(front-page.php)。如果您認爲我可以通過使用CSS插入圖像,並且希望看到style.css,請讓我知道。到目前爲止,我一直在使用兒童主題來調整大部分CSS。如果可能的話請幫忙。謝謝!

編輯:我使用的是兒童主題,但父主題是Constructzine-Lite。

+1

如何將她的圖片用作頁面的特色圖片並調用相應的功能? – hungerstar

+0

你的意思是我應該拿出「h2 - 關於我們」的評論並替換圖片?我可以嘗試,但我現在很接近現在的樣子... – HappyHands31

+2

我相信@hungerstar意味着你會在一篇文章(或自定義文章類型)中編寫內容並使用特色圖像選項,然後顯示它像'<?php the_post_thumbnail('medium',array('class'=>'alignleft')); ?> –

回答

1

您將在您註釋掉的代碼中看到get_template_directory_uri()。這就是給你的圖像路徑的其餘部分(如果你把它放在images目錄中,就像之前發生的一樣)

如果你真的需要並想要,你可以硬編碼圖像的完整路徑避免PHP。http://example.com/wp-content/themes/theme_name/images/image.jpg

你可能要重新考慮你如何寫這篇採取的WordPress的工作方式的優勢。這裏也有一些不錯的支持和教程會幫助你在路上。

1
<?php echo '<img src="'.get_template_directory_uri().'/images/image.jpg'">' ?> 

請記住,get_template_directory和get_template_directory_uri是兩個不同的薄gs。一個返回值(分別)返回值(分別)。