微信红包牛牛玩法规则: 赤峰網站制作設計:如何將開放圖形元標簽添加到WordPress中

抢庄牛牛怎么玩 www.adfez.icu OpenGraphProtocol是一系列元標記,您可以將其添加到網頁中,以使其成為一個豐富的對象,供社交媒體平臺使用。實際上,這意味著您可以使用基本的HTML標記來添加關于您的帖子的關鍵信息,Facebook、Twitter、LinkedIn和Google+等社交網絡可以使用這些信息來增強站點鏈接的顯示方式。例如,如果你曾經瀏覽過Facebook,并且在你的新聞提要中看到了一個定制的縮略圖、標題和描述,那么你已經看到了開放的圖形標簽。將OpenGraph添加到您自己的站點實際上是相當簡單的。您可以通過向主題添加一個函數,或者使用一個插件來為您完成繁重的任務。在本文中,我們將介紹這兩種方法。

開放圖是如何工作的

赤峰網站制作設計為了使開放圖形正常工作,您需要將幾個元標記添加到節的HTML文檔。這是存儲關于您的網頁的信息的地方,用戶不可見。每個元標記遵循相同的格式;您為“Property”分配一個“Content”值。在您這樣做之后,各種第三方服務,特別是社交媒體平臺,可以使用這些信息以更有意義的方式顯示您的內容。其中一些平臺具有收集這些信息的專有方法,如推特卡,但大多數使用開放圖形作為信息的基線。因此,只要添加一些關于用戶所在頁面的數據,您就可以確保當您的URL被復制并粘貼到一個社交提要中時,它會附帶一個自定義的圖像、描述等等。

赤峰網站制作設計

開放圖的作用

實際上,赤峰網站制作設計有相當多的開放圖形標記,您可以添加到您的頁面頂部。完整的列表可以在開放圖形協議主頁并包括相當深奧的用途,如視頻、音樂、書籍等。但是,對于您的標準博客文章,您可能只想包含一些基本信息,如標題、描述、圖像和URL。在純HTML中,這是開放的圖形標記,可以這樣構造:

<meta property="og:title" content="Article Title"/>
<meta property="og:description" content="Article Description (One or Two sentences)"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="//example.com/link/to/article"/>
<meta property="og:site_name" content="Site Name"/>
<meta property="og:image" content="//example.com/image/src.jpg"/>

添加這幾個標簽將為第三方服務提供關于您的頁面的大量數據,并將確保您的文章的URL看起來很棒,并附有所有讀者需要的信息。

幸運的是,所有這些數據都可以在WordPress中訪問,因此可以將這些標記添加到每個職位的區段自動。您可以手動完成此操作,也可以使用插件進行更高級的用例。

手動添加開放圖形標記

首先,我們赤峰網站制作設計將介紹如何使用幾個函數向WordPress站點添加打開的圖形標記。我們將要檢查的所有代碼都應該添加到Functions.php文件的主題,雖然它也可以放在一個自定義插件。我建議創建一個子主題如果您還沒有,并將此代碼添加到子主題的函數文件中。

我們必須做的第一件事是確保在我們的主題中有一個后備圖像,以防我們的文章沒有提供一個帖子縮略圖。稍后我們將引用這一點,但現在,在主題或子主題的父目錄中創建一個名為“img”的文件夾,并將此圖像保存為“opengram_Image.jpg”。請記住,這個圖像將使用時,當一個帖子沒有一個特色的形象,所以它應該是一些一般性的東西,如你的網站標志。例如,我將使用以下圖像:

現在我們已經設置好了,我們實際上可以開始添加代碼了。打開你的Functions.php文件,然后向下滾動到底部。我們必須添加的第一個函數是告訴第三方服務,文檔中除了純HTML標記之外還有其他標記。這讓開放圖形解析器正確地讀取您的元標記。我們可以使用語言屬性過濾器將此權限添加到我們的html標記中。

function doctype_opengraph($output) {
	return $output . '
	xmlns:og="//opengraphprotocol.org/schema/"
	xmlns:fb="//www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'doctype_opengraph');

這將確保將正確的doctype添加到我們的HTML中。如果沒有這段代碼,大多數平臺都會跳過我們的網頁,我們將要添加的標記永遠不會被解析。下一個函數是,我們將在其中實際添加適當的元數據,以便開放圖形工作。整個函數如下所示:

function fb_opengraph() {
	global $post;

	if(is_single()) {
		if(has_post_thumbnail($post->ID)) {
			$img_src = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'medium');
		} else {
			$img_src = get_stylesheet_directory_uri() . '/img/opengraph_image.jpg';
		}
		if($excerpt = $post->post_excerpt) {
			$excerpt = strip_tags($post->post_excerpt);
			$excerpt = str_replace("", "'", $excerpt);
		} else {
			$excerpt = get_bloginfo('description');
		}
		?>

	<meta property="og:title" content="<?php echo the_title(); ?>"/>
	<meta property="og:description" content="<?php echo $excerpt; ?>"/>
	<meta property="og:type" content="article"/>
	<meta property="og:url" content="<?php echo the_permalink(); ?>"/>
	<meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/>
	<meta property="og:image" content="<?php echo $img_src; ?>"/>

<?php
	} else {
		return;
	}
}
add_action('wp_head', 'fb_opengraph', 5);

讓我們走過去。在定義了一個全局$POST對象之后,為了能夠訪問POST信息,我們首先執行一個條件檢查,以確保我們在POST頁面上。這樣,打開的圖形標記將只添加到單個POST頁面中,在該頁面中可以訪問適當的數據。

if(has_post_thumbnail($post->ID)) {
			$img_src = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'medium');
		} else {
			$img_src = get_stylesheet_directory_uri() . '/img/opengraph_image.jpg';
		}

在代碼的這一節中,我們檢查帖子是否有可從POST中提取的縮略圖(特征圖像)。如果沒有,我們將$img_src變量設置為上面保存的默認映像。

if($excerpt = $post->post_excerpt) {
			$excerpt = strip_tags($post->post_excerpt);
			$excerpt = str_replace("", "'", $excerpt);
		} else {
			$excerpt = get_bloginfo('description');

就像我們赤峰網站制作設計檢查上面有特色的圖片一樣,我們檢查帖子是否包括節選。如果是這樣的話,我們將確保它以純文本的形式返回。如果找不到摘錄,“否則”語句將$Excerpt變量設置為我們站點的一般描述。這樣,無論如何都可以包括一個描述。

最后,我們實際上添加了一個接一個的開放圖形標簽。

	<meta property="og:title" content="<?php echo the_title(); ?>"/>
	<meta property="og:description" content="<?php echo $excerpt; ?>"/>
	<meta property="og:type" content="article"/>
	<meta property="og:url" content="<?php echo the_permalink(); ?>"/>
	<meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/>
	<meta property="og:image" content="<?php echo $img_src; ?>"/>

每個標記都為社交平臺提供了更多關于正在訪問的頁面的信息,大多數信息可以使用WordPressAPI來填充。我們可以使用文章的標題作為標題屬性,摘錄作為我們的描述,Permalink作為我們的URL。我們將類型定義為文章,并使用get_bloginfo作為site_name屬性。對于圖像屬性,我們使用上面找到的圖像源,如果有,則使用POST縮略圖,如果沒有,則使用默認圖像。

add_action('wp_head', 'fb_opengraph', 5);

最后一步是使用可濕性粉劑頭操作將所有這些標記實際添加到我們的貼子頁的HTML部分。

一旦您添加了這些函數,打開圖的基本版本將開始在您的單個POST頁面上工作,盡管這段代碼可以被修改以在不同的POST類型中添加更具體的標記。但至少,你可以確保當一個讀者將你的博客文章復制并粘貼到他們的狀態或新聞提要中時,你的鏈接將與文章和網站的詳細圖片、標題和描述一起列出。

一個開放的圖表文章發布

當然,開放圖形標簽有更復雜的用途,設置起來有點困難。如果您想要訪問這些功能,最好使用一個插件,它可以為您做到這一點。

Yoast的WordPress SEO

WordPress SEO由Yoast是一個全面和完整的插件,做了很多,不只是簡單地添加適當的元標簽到您的網頁。它可以作為一個完整的SEO解決方案,并幫助您的網站提高其搜索排名,允許您自定義關于您的網站的所有元數據,并密切關注重要的信息,應該包括在帖子。

建立開放圖

赤峰網站制作設計在這里提到它,只是因為你可能已經在使用它,或者在你的網站上需要它。如果是這樣的話,那么您根本不需要擔心OpenGrapht,因為插件可以自動為您添加這個插件。如果安裝了插件,可以轉到SEO->社會并確保在Facebook選項卡上選中“AddOpenGraphmetadata”復選框。該插件還包括Twitter和Google+的元數據,所有這些數據都是自動添加的,并針對其使用的POST類型進行了定制。

WordPress SEO還允許你將你的Facebook帳戶連接到你的WordPress站點,這樣你就可以使用FacebookInsight管理員來跟蹤你的帖子的社交分析。另外,WordPress SEO還允許你上傳一個默認的圖片,在你的網站主頁上,或者在不包含有特色圖片的帖子上。

Facebook插件

Facebook團隊實際上有一個正式的插件,可以在所有頁面上添加打開的圖形標簽。簡單地通過安裝和激活插件,這些元標簽將自動添加到您的整個網站,包括帖子,頁面,自定義帖子類型和您的主頁。此外,這個插件可以用來添加諸如“喜歡”和“跟隨”按鈕之類的東西,也可以用來將WordPress網站連接到Facebook開發應用程序。

這個插件的開放圖形標記的實現是相當簡單的,并且沒有像默認圖像和豐富的媒體帖子這樣的特性。然而,對于你的普通博客來說,它增加了你所需要的一切。

WP Facebook開放圖形協議

WP Facebook開放圖形協議可能是最強大的插件列出。沒有太多的選項,也沒有太多的配置,大部分工作都是在幕后完成的。如果您正在運行頁面,它允許您使用Facebook用戶名或應用程序ID將WordPress站點連接到Facebook。然后,您可以選擇默認的回退圖像。就設置而言就是這樣。

只有幾個選擇

但是在后端,這個插件只致力于完善開放的圖形標記,從而考慮了許多不同的場景。例如,如果一個帖子沒有特征圖像,它將搜索文章中的身體圖像。只有在找不到它時,它才會使用您提供的回退圖像。插件也是兼容幾乎每個SEO插件,以及主題框架,如論文和創世紀。所以不管你在使用什么,WP Facebook開放圖形協議都應該工作得很好。如果您正在尋找一個完整的解決方案處理開放圖元數據,而這是要檢查的元數據。

最后思想





二維碼