對於知識工作者、自由接案者來說,不知道如何來讓他人感覺到自己的能力是專業的,
所以,我想如果可以,透過網站中的超連結設定來為你的網站看起來更加專業,除此之外,還能在用戶不理解該名詞含意的背後狀況下,用戶能直接點擊連結觀看更多。
今天,這篇文章將要來分享如何使用Wordpress的超連結設定,建立強大知識庫。
內容目錄
什麼是超連結?
超連結(Hyperlink)簡單來說就是以利用一個網站中的文字、圖片等去連結另一個網站。
這種方式是在文章中用到專有名詞、術語、詳解等,讓用戶直接透過點擊連結,更能了解該語意的意涵。
你可以看到在維基百科中,經常用這樣的方式來建立資訊庫,所以無論你是想建立企業網站、作品集網站、部落格等,都能以此模仿。
如何在Wordpress建立超連結?
在分享怎麼設定之前,我想分享設定Wordpress超連結大致上有分3種形式:外部連結、內部連結、圖片連結。
- 外部超連結:由一個網站連到其他網站(例如:Creativemini→維基百科。)
- 內部超連結:由一個網站連到自己網站(例如:Creativemini→Creativemini )
- 圖片超連結:由網站中圖片連結到內、外部超連結。
上面這三種都會分享怎麼設定,非常簡單。
外部超連結
Step1.在文章打上文字
Step2.複製連結
到網站上方複製連結。
Step3.打開連結
反選字樣,在上方點擊連結按鈕。
Step4.貼上連結
接著跳出一個小的對話框,貼上剛剛複製的連結。
最後,按下Enter即可完成超連結。
內部超連結
Step1.在文章打上文字
在文章中打上文字,然後需要反選。
Step2.搜尋上打上文字
這次不需要事先複製連結,只需要打上文章中的關鍵字,比如打上「包浩斯」,就跳出以前我寫的文章,然後點擊你要的文章即可。
圖片超連結
下面的教學,無論是外部連結還是內部連結,都跟上述做法一樣,但礙於篇幅,所以下面我會偏向使用內部連結作為教學。
Step1.貼上圖片
複製圖片後,貼上圖片。
Step2.點擊圖片
點擊圖片,會出現上方小小工具。
Step3.點擊連結
點擊連結後,打上關鍵字,比方說打上「包浩斯」為例,就跳出你之前寫文章的選項,根據你所選的去點擊即可。
最後,到前端試試看能不能透過圖片點擊,你也可以在下方點點看我的圖片是不是成功。
進階:圖片超連結
下面這個做法比較進階一點,就是利用程式碼去代入,對於不熟程式碼的人來說,或許有些困難(但很簡單),那建議用上面的方式好了。
這個方式,在前端出圖時,會比前一個方法來的快一點。
Step1.開啟要連的網站
首先我們開啟要連的網站,等一下會用到。
Step2.寫上程式碼
請在文章後台寫上程式碼,你可以直接複製以下程式碼然後去改。
<a href="https://zh.wikipedia.org/zh-tw/%E5%8C%85%E8%B1%AA%E6%96%AF" target="_blank">
<img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Bauhaus.JPG"
alt="bauhaus" width="700" height="480"/><br>
</a>
首先第一段,href=”https://zh.wikipedia.org/zh-tw/%E5%8C%85%E8%B1%AA%E6%96%AF” target=”_blank”>
是我們要去連到的網站位置,所以貼上剛剛開著的網站,複製網址貼上。
第二段,要到照片的網址後,貼上https://upload.wikimedia.org/wikipedia/commons/e/e1/Bauhaus.JPG之字樣。
後面的alt後面是當用戶還沒點擊之前,會先看到的字樣,所以在這邊打上bauhaus。
<figure class="wp-block-image"><img src="https://upload.wikimedia.org/wikipedia/commons/e/e1/Bauhaus.JPG" alt="bauhaus"/></figure>
最後,寬跟高須自行設定,這邊我是設width=”700″ height=”480″,每一個人圖片寬跟高都不一樣。
Step3.完成超連結
在下方,是我用程式碼寫出來的,所以你可以點擊下方圖片試試看,能不能跳出去其他網站。
建立乾淨的網址
在用WordPress永久連結設定來讓Google了解你的作品集網站方法之一的一文中談到乾淨的網址,這是蠻小細節,你可以使用wordpress外掛,Pretty Link,或是其他網站釋出的縮網址平台。
讓你的用戶,看起來在網址方面有用心且專業。
最後
如果你是自由接案者,目前有相關作品但想要擁有自己的作品集網站,你可以點擊下方的按鈕進入LINE來與我聊聊。