簡體   English   中英

Wordpress,PHP-將圖像插入主題主頁

[英]Wordpress, PHP - Inserting Image Into Theme Homepage

這就是我要去的地方:

在此處輸入圖片說明

這是我最近的頁面截圖:

在此處輸入圖片說明

現在,我只需要正確插入Christi的圖像並使文章的寬度更寬即可。 不幸的是,我不知道如何在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“關於我們”和LiteZine主題(front-page.php)中的城市圖像。 如果您認為我可以僅使用CSS插入圖像,並且希望看到style.css,請告訴我。 到目前為止,我一直在使用兒童主題來調整大多數CSS。 請幫助。 謝謝!

編輯 :我正在使用一個子主題,但父主題是Constructzine-Lite。

在注釋掉的代碼中,您會看到get_template_directory_uri() 這就是給您剩下的圖像路徑的原因(如果您像以前那樣將其放置在images目錄中。

如果確實需要並希望避免使用php,則可以對圖像的完整路徑進行硬編碼。 http://example.com/wp-content/themes/theme_name/images/image.jpg

您可能需要重新考慮如何編寫此內容,以利用WordPress的工作方式。 有一些相當不錯的支持和教程將為您提供幫助。

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

請記住,get_template_directory和get_template_directory_uri是兩件事。 一個返回路徑,一個返回路徑(分別)。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM