wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

準備工作

需要用到一款帶有“審查元素”功能的瀏覽器,我用的是360;

需要Notepad編輯器或者Dreamweaver,不建議用記事本,會容易出現新問題。

wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

說明問題

我們進入wordpress后臺,找到”寫文章“,在其中依次插入非常小的兩張圖片,會看到如圖所示,圖片自動換行了,然后把文章發布一下,可以看到兩張圖片是兩行顯示。

wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

發現原因

直說吧,關于排版問題,我們可以默認是CSS的問題,我開始也是想的可能是主題的問題,于是切換到默認主題,但發現官方三款主題,只有【Twenty Seventeen】這款主題在編寫時是不默認換行的。

以我遇到的一個實例,我們看一下區別,首先后臺是顯示很正常的,發布后當前主題與Twenty Seventeen主題效果不同。

wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

相關推薦:《WordPress教程

找到CSS,并開始修改

我們打開有問題的頁面,找到其中一張圖片,點擊鼠標右鍵,選擇【審查元素】

wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

在下面編輯區域修改CSS

通過這里的修改,我們可以直接看到上面頁面效果,是非常便利開發人員和站長朋友們的,在這里我找到display這個屬性,影響了換行,當勾掉對勾時,圖片實現了換行。在這里為大家分享一下,該屬性block鍵值會自動生成換行符,于是圖片便默認換行了。

wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

這一步找到要修改的CSS文件

當我們把鼠標放在圖示右上角位置時,會產生一個鏈接地址的提示,它就是放置該屬性的CSS文件位置,也是我們需要修改的地方。

找到該文件,用notepad打開,然后再通過查找(查找的內容可以是我們直接想刪掉的詞,但切記一定要和我們之前在審查元素看到的內容完全對上,否則肯定就找錯了地方),刪除掉不要東西。

wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

清除瀏覽器緩存,刷新看效果

這一步其實很簡單,但很重要,每次看文件效果之前務必要進行該操作,除非你確定已經清除過緩存了。因為如果緩存在的話,無論你怎么改,都不會看到效果,只有一臉的懵逼。如圖操作:

wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

修改編輯器相關的CSS文件

我們發現做了上述修改后,寫文章時編輯器里還是對圖片進行了換行處理,這時用的方法跟上面的類似,也是右鍵圖片,選擇”審查元素“,找到要修改的文件,對其進行修改。

wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

再到前面修改由于編輯器造成的CSS效果

當我們后臺滿意后,發布完成后,發現文章中的小圖片又換行了,郁悶了!其實,只是工作還沒做完,繼續!方法同上,找到圖片,右鍵,審查元素,修改文件,清理緩存,刷新頁面。

wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

wordpress文章圖片怎么并排

至此,無論你前后臺怎么發布圖片,發現WordPress寫文章會像寫word文檔那樣聽話了。

以上就是

? 版權聲明
THE END
喜歡就支持一下吧
點贊10 分享