• <dd id="iyeig"></dd>
  • <code id="iyeig"></code>
  • <nav id="iyeig"></nav>
    <object id="iyeig"><sup id="iyeig"></sup></object>
  • <input id="iyeig"><strong id="iyeig"></strong></input>
  • 舟山企業網站制作:創建自定義WordPress 404錯誤頁

    舟山網站建設 | 2019-04-03

    很有可能,您遇到了“404 Notfind”錯誤頁面。404引用頁面在URL不存在時接收的HTTP狀態代碼。因此,每次用戶訪問不存在于您網站上的鏈接時,都會為他們提供一個默認404頁面,告知他們這一事實。有一個故事說404代碼來自第一個存放WWW數據庫服務器的房間的編號,但是這是個神話。這只是W3C分配的數字。如果您希望看到404頁正在運行,您可以看到一個關于優雅主題的例子.

    404頁的利用率相對較低,通常不提供太多的附加信息就不存在頁面。幸運的是,WordPress使您的404頁面更容易定制,因此您可以使用它向用戶提供有用的信息,并將其引導到站點的其他地方。

    如何使用404頁

    舟山企業網站制作當找不到頁面時,服務器就會顯示404頁。它通常表示用戶輸入了錯誤的URL,或者跟隨一個鏈接到一個曾經存在但不再存在的頁面。通常,它表示您的用戶丟失了。作為一個負責任的網站所有者,你的工作就是幫助他們重新找到自己的道路。

    在這些情況下,您的首要任務是為訪問者提供一條簡單的途徑,讓他們找到真正想要的東西。你也可以增加一些舒適和輕松的網頁,使它符合您的網站的整體外觀,并提供真誠的道歉。

    那么應該向404頁面添加什么樣的元素呢?你會想給你的訪問者一些不同的方式連接到他們真正想要的內容。要做到這一點,您可以從更一般的最佳實踐開始,然后嘗試一些更細粒度的方法。例如,搜索表單是必須的,并為用戶提供了重新訪問站點的廣泛途徑。確保頁面上存在主題的主導航也屬于此類別。

    但是404頁最重要的方面是細節。在本文中,我將介紹如何使用WordPress實際設置404頁面,并給出一些想法和示例以幫助您開始工作。我也將與你分享一兩個技巧,以提高頁面更多。

    設置404頁

    WordPress使創建基本404頁面變得非常簡單。本質上,它將所有找不到的頁面路由到主題目錄中的404.php文件中。因此,如果您創建了一個名為404.php的文件,那么您已經設置了404頁面。

    大多數主題都附帶了一個404.php文件,其中包含了一些基本信息。如果需要,可以繼續編輯該文件。但是,處理這個問題的更負責任的方法是構建一個子主題,并在其中添加404頁面。

    Divi主題的默認404頁。

    設置“兒童”主題的404頁

    子主題構建在父主題之上,允許對主題的任何更新工作,同時仍然維護您決定添加的任何自定義元素。我不會討論兒童主題的所有優點,也不會討論如何設置它。為此,我推薦尼克·羅奇主題入門文章。在本教程中,我將使用Divi的子主題,但是代碼對于任何主題都是可互換的。

    一旦設置了子主題,第一步就是在您的子主題文件夾中創建一個名為“404.php”的文件。這將覆蓋隨主題附帶的404頁,并允許您進行任何想要的更新。舟山企業網站制作在您創建了這個文件之后,我們將添加一些代碼,以便我們開始工作。

    <?php get_header(); ?>
    
    <div id="main-content">
    	<div class="container">
    		<div id="content-area" class="clearfix">
    			<div id="left-area">
    				<article id="post-0" <?php post_class( 'et_pb_post not_found' ); ?>>
    					<h1><?php esc_html_e('Page Not Found','Divi'); ?></h1>
    					<p><?php esc_html_e('Whoops. Looks like the page you were looking for doesn\'t exit. Maybe try searching for something else using the search bar above', 'Divi'); ?></p>
    				</article> <!-- .et_pb_post -->
    			</div> <!-- #left-area -->
    
    			<?php get_sidebar(); ?>
    		</div> <!-- #content-area -->
    	</div> <!-- .container -->
    </div> <!-- #main-content -->
    
    <?php get_footer(); ?>

    還沒發生什么事。這只是一些樣板代碼,以使您的頁面設置。它引入WordPress頁眉、頁腳和側邊欄,就像主題中的任何其他頁面一樣。在中間,我添加了一點文本,為錯誤向用戶道歉,并建議他們嘗試搜索他們想要的內容。確保從404頁面訪問搜索表單是必要的,也是一個良好的開端,但我們可以做得更好。好多了。

    您的404頁應該包含哪些內容?

    為了確定您應該添加到404頁面的內容,您必須首先評估您正在運行的站點類型。你的目標是讓用戶快速找到相關的內容,而不讓他們有太多的選擇。搜索是有用的,但如果你做得對,你的網站上的每一頁上都會有一個搜索欄。在404頁上,你必須縮小一些范圍。

    例如,如果您正在運行一個博客,那么最好提供一個最近的帖子列表。如果您的站點展示了產品,您可以將用戶引導到功能列表或常見問題解答?;蛘?,如果用戶遇到問題,最好提供一種與您聯系的方式。試著進入你的用戶的頭腦,找出最有可能指向他們的頁面是什么。如果所有這些都失敗了,使用分析來確定您最受歡迎的頁面是什么,并指導那里的用戶。

    例如,GitHub使事情變得非常簡單。他們的404頁有一個巨大的搜索欄,搜索他們的整個網站。在此下面,他們包含了三個鏈接,以聯系支持或獲得GitHub的狀態,引導他們的用戶到一個新的頁面。

    Dropbox采取類似的方法,將用戶引導到他們可以獲得支持的站點區域,或者返回到主頁。合理的選擇,但不要太多。

    “紐約時報”采取了更為全面的做法。除了一個搜索欄和一個聯系人鏈接,他們還提供了一個最近的帖子列表,特別受歡迎,希望能讓讀者再次感興趣。

    你也會想把你的品牌風格添加到頁面中,這樣用戶就會感到更自在一些。例如,優雅的主題在404頁上有一張富有表現力的圖片,讓用戶知道他們感受到了痛苦。他們的主要導航足以指導用戶到任何他們想去的地方。

    這里的要點是:

    一旦您了解了想要在頁面上放置什么,下一步就是實際實現它。我們將使用一個內置的WordPress特性,它已經存在了很長一段時間了:Widget,而不是重新發明輪子,并從零開始對所有添加的內容進行硬編碼。

    添加404 WidgeizedSidebar

    舟山企業網站制作第一次看到的策略賈斯汀·塔洛克,我們可以在構建404頁面時使用小部件。對于那些不熟悉的用戶,小部件是可以通過WordPress管理程序中的拖放界面添加的內容塊。對于不同的特性,有不同的小部件,例如最近的文章、純文本和RSS提要。有些包含在WordPress中,還有一些與插件和主題捆綁在一起。例如,優雅的主題使您可以訪問一些額外的小部件。小部件通常放在側邊欄中,但實際上它們可以在您的站點上的任何位置。

    換句話說,穩固404頁面的大部分構建塊都是以小部件的形式出現的。如果我們只為404頁設置一個單獨的小部件區域,那么我們可以輕松地在一個簡單的可視化界面中添加圖像、文本和其他內容,并動態地進行更改。

    設置Widget區域

    我們需要做的第一件事是注冊一個小部件區域,這樣我們就可以開始使用它了。幸運的是,優雅的主題使得向WordPress添加新的小部件區域變得非常簡單。你要做的就是去外觀->小部件在WordPress管理員中。在右側欄的底部,您將看到一個允許您創建新Widget區域的框。只需在提供的文本字段中輸入名稱“404”,然后單擊創造紐扣。就像這樣,將添加一個新的小部件區域,您可以立即開始使用。

    只需鍵入小部件的名稱即可。

    如果您沒有使用優雅主題中的主題,則必須使用WordPress‘添加一個小部件。寄存器側欄功能。這段代碼需要添加到子主題的Functions.php文件中。如果沒有,只需在子主題的目錄中創建一個名為“function s.php”的文件,并添加以下代碼:

    function widget_area_404() {
    
    	register_sidebar( array(
    		'name' => '404 Page',
    		'id' => '404',
    		'description'  => __( 'Widgets placed here will be shown on the 404 Not Found.' ),
    		'before_widget' => '<div class="et_pb_post">',
    		'after_widget' => '</div>',
    		'before_title' => '<h4 class="widgettitle">',
    		'after_title' => '</h4>',
    	) );
    }
    add_action( 'widgets_init', 'widget_area_404' );

    這設置了一個簡單的函數,它注冊了WordPress的側邊欄,并添加了一些默認的HTML。

    我們可以開始在WordPress管理中向這個區域添加小部件,但是它們還不會出現在我們的頁面上。為此,我們必須將新的小部件區域添加到404頁。

    將Widget區域添加到頁面

    讓我們回到404.php文件。就在我們添加的文本塊下面,我們將添加一行代碼:

    <?php dynamic_sidebar( '404' ); ?>

    DynamicSidebar是WordPress提供的一個函數,它允許您顯示一個小部件區域。只需將名稱傳遞給它,小部件區域中的任何小部件都將自動顯示在代碼放置的位置?,F在是開始添加頁面的時候了。

    向頁面添加小部件

    舟山企業網站制作在我們的小部件區域全部設置好之后,唯一要做的事情就是實際開始添加內容。登錄到WordPress儀表板并再次導航到外觀->小部件在菜單上。您將在右側看到新的404 PageWidget區域。在左側,您將看到可以使用的小部件列表。

    我的主題已經包括一個搜索欄和標題中的導航以及側欄中的搜索,所以我不需要添加任何一個元素。如果您的主題不包括這一點,那么添加一個搜索小部件將是一個好主意。

    接下來,我們將添加一些有用的鏈接。假設我在開博客。我想展示一下最近的幾篇文章,這樣用戶就可以快速瀏覽到他們想要找到的內容。只需將“最近的帖子”小部件拖放到404框中,并更改設置以滿足您的口味。對我來說,我給了它一個簡單的標題,并增加了3個帖子。

    配置我最近的帖子小部件

    接下來,我想添加一個鏈接到我的聯系人頁面的簡單文本行。為此,我很可能希望使用文本小部件,它接受純文本和HTML。我可以將文本Widget拖到404部分,并添加一個非常小的文本塊:

    Can't find what you're looking for? Visit my <a href="/contact">Contact Page</a> to get in touch right away.

    您還可以使用TextWidget添加一個圖像,以使頁面更加平易近人。在文本小部件中,保留title字段為空,并使用HTML將圖像鏈接起來。

    <img title="404 Page Image" src="http://yoursite.com/images/404.png" alt="404 Not Found" />

    確保將“http://yoursite.com/images/404.png”替換為指向要使用的圖像的鏈接。

    如果您希望添加一些鏈接,類似于GitHub的方法,您可能還需要考慮設置自定義菜單,并將其添加到“自定義菜單”小部件中。

    您決定添加到404頁面的內容取決于您自己,但是無論您要添加什么,都可能有一個可以幫助您的小部件。例如,您可以使用捆綁的優雅主題“關于我”小部件來分享一些關于自己的信息。簡單地連接一個生物圖像,并添加一些關于你是誰的句子。

    添加內容時,只需確保內容簡潔即可。給用戶一些不同的方式來訪問你最重要的內容,也許添加一個品牌形象,然后離開。只要幾句話和幾個鏈接,您就可以確保用戶從錯誤頁面中獲得更多信息。

    我的404頁面看起來好多了,并且有我的訪問者需要的所有信息。

    最后一招

    我給你留下最后的建議給那些想嘗試一下的人。WordPress允許您訪問許多可以在任何頁面上訪問的查詢變量。其中一個變量名為“name”,包含站點URL后面的URL片段。因此,如果用戶在http://yoursite.com/404,中鍵入名稱查詢變量,則返回“404”。這在很多方面對你都是有用的。

    最簡單的例子就是告訴用戶他們想要訪問的頁面,這樣他們就可以檢查它的拼寫錯誤或錯誤。在我們的404.php頁面上,讓我們首先檢索這個查詢變量。在頁面頂部,僅在get_Header函數下,存儲名稱查詢變量。

    <?php $name_var = get_query_var('name');  ?>

    然后,我們可以更改PageNotFindHeader,以包含用戶的此信息。

    <h1><?php esc_html_e('Page /','Divi'); echo $name_var;  esc_html_e('/ Not Found','Divi'); ?></h1>

    現在,舟山企業網站制作用戶將被告知他們試圖立即訪問的鏈接。

    當然,這只是一個想法。對于這個特定的變量,還有很多事情可以做,比如為搜索結果提供服務基于頁面的URL,或者使用它來嘗試猜測頁面可能是什么。當你在404頁面中添加內容時,在你的腦海中保留這一點是值得的,以防出現這樣的情況。

    404頁面遠不是你網站上最重要的頁面,但是如果你對它進行了一點思考,你就可以為你的訪問者提供更好的體驗,并確保他們能夠堅持你的網站,即使他們收到了錯誤。希望這足以讓你開始工作。


    上一篇:舟山企業網站開發:如何使用WordPress創建常見問題頁面下一篇:舟山建站公司:為什么使用Tabs是一個好主意,以及如何在WordPress中創建它們