Skip to content

4個WordPress超連結設定方法:為你的網站建立龐大且專業的知識庫。

    對於知識工作者、自由接案者來說,不知道如何來讓他人感覺到自己的能力是專業的,

    所以,我想如果可以,透過網站中的超連結設定來為你的網站看起來更加專業,除此之外,還能在用戶不理解該名詞含意的背後狀況下,用戶能直接點擊連結觀看更多。

    今天,這篇文章將要來分享如何使用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.完成超連結

    在下方,是我用程式碼寫出來的,所以你可以點擊下方圖片試試看,能不能跳出去其他網站。

    bauhaus

    建立乾淨的網址

    用WordPress永久連結設定來讓Google了解你的作品集網站方法之一的一文中談到乾淨的網址,這是蠻小細節,你可以使用wordpress外掛,Pretty Link,或是其他網站釋出的縮網址平台。

    讓你的用戶,看起來在網址方面有用心且專業。

    最後

    如果你是自由接案者,目前有相關作品但想要擁有自己的作品集網站,你可以點擊下方的按鈕進入LINE來與我聊聊。

                     logotype

    發佈留言

    發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

    為你打造專屬文字 LOGO 設計我有興趣!
    +