2017-08-28 71 views
0

這是我想要達到的佈局:我用這個代碼我希望把我下面的畫廊的縮略圖預覽圖像在WordPress

enter image description here

和正常工作的HTML,但我不知道如何在WordPress中使用。你能幫忙把它整合到WordPress嗎?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html> 
 
<head> 
 
<title>Simple HTML Photo Gallery with JavaScript</title> 
 

 
\t <style type="text/css"> 
 
\t body { 
 
\t \t background: #222; 
 
\t \t color: #eee; 
 
\t \t margin-top: 20px; 
 
\t \t font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 
 
\t } 
 
\t a { 
 
\t \t color: #FFF; 
 
\t } 
 
\t a:hover { 
 
\t \t color: yellow; 
 
\t \t text-decoration: underline; 
 
\t } 
 
\t .thumbnails img { 
 
\t \t height: 80px; 
 
\t \t border: 4px solid #555; 
 
\t \t padding: 1px; 
 
\t \t margin: 0 10px 10px 0; 
 
\t } 
 
\t 
 
\t .thumbnails img:hover { 
 
\t \t border: 4px solid #00ccff; 
 
\t \t cursor:pointer; 
 
\t } 
 
\t 
 
\t .preview img { 
 
\t \t border: 4px solid #444; 
 
\t \t padding: 1px; 
 
\t \t width: 800px; 
 
\t } 
 
\t </style> 
 

 
</head> 
 
<body> 
 

 
<div class="gallery" align="center"> 
 
\t <h2>Simple Photo Gallery with HTML and JavaScript</h2> 
 
\t 
 

 
\t <br /> 
 

 
\t <div class="thumbnails"> 
 
\t \t <img onclick="preview.src=img1.src" name="img1" src="images/img1.jpg" alt=""/> 
 
\t \t <img onclick="preview.src=img2.src" name="img2" src="images/img2.jpg" alt=""/> 
 
\t \t <img onmouseover="preview.src=img3.src" name="img3" src="images/img3.jpg" alt=""/> 
 
\t \t <img onmouseover="preview.src=img4.src" name="img4" src="images/img4.jpg" alt=""/> 
 
\t \t <img onmouseover="preview.src=img5.src" name="img5" src="images/img5.jpg" alt=""/> 
 
\t </div><br/> 
 

 
\t <div class="preview" align="center"> 
 
\t \t <img name="preview" src="images/img1.jpg" alt=""/> 
 
\t </div> 
 

 
</div> 
 

 

 
</body> 
 
</html>

+0

WordPress的作品與主題,你讀過嗎? – Ivan

+0

如果你使用WP,我會建議使用一個插件以更具擴展性的方式實現這樣的事情。 – Bitz

+0

謝謝伊萬。我不知道我可以使用的插件,我今天安裝了這麼多,但仍然沒有得到期望的結果。任何進一步的幫助將是很好的。 –

回答

0

要在HTML寫在一個WordPress站點:

  1. 在發佈或頁面面板,切換到HTML /文本編輯器。
  2. 將光標移動到您想要添加HTML的位置。
  3. 粘貼或鍵入HTML
  4. 保存草稿,發佈或切換回可視編輯器至 繼續。

有一點需要注意的是,它需要一些玩弄才能使CSS正常工作,因爲可能會出現Wordpress默認CSS會干擾自定義CSS樣式的情況。

另外,Visual Editor可能無法正確顯示所有標籤。要查看用戶如何看到您的HTML,請預覽它。