Dodaj wsparcie Open Graph do nagłówków stron WordPress w prosty sposób
Objaśnienie
Aby Twoja strona WordPress wyglądała świetnie, gdy jest udostępniana w mediach społecznościowych, możesz dodać meta tagi Open Graph. Tagi te pomagają platformom takim jak Facebook i Twitter wyświetlać Twoje treści z atrakcyjnym podglądem.
Oto, co robi ten kod:
- Podłącza się do akcji wp_head, co oznacza, że dodaje dodatkowe informacje do sekcji nagłówka stron Twojej witryny.
- Sprawdza, czy bieżąca strona to pojedynczy post lub strona, używając is_singular(). Dzięki temu tagi Open Graph są dodawane tylko do pojedynczych postów lub stron, a nie do archiwów czy strony głównej.
- Pobiera tytuł posta, opis, URL oraz obrazek wyróżniający. To kluczowe elementy, które pojawią się w podglądzie w mediach społecznościowych.
- Wyprowadza te szczegóły jako meta tagi Open Graph, które platformy społecznościowe wykorzystują do generowania podglądów.
Jeśli Twój post ma obrazek wyróżniający, również zostanie on uwzględniony, co sprawia, że udostępniane linki są bardziej atrakcyjne wizualnie. Typ jest ustawiony na "article", co jest odpowiednie dla postów blogowych i stron.
Dodając ten kod, poprawiasz sposób, w jaki Twoje treści są wyświetlane podczas udostępniania, co może przyciągnąć więcej kliknięć i zaangażowania.
Kod
<?php
// Hook into 'wp_head' to add Open Graph meta tags
add_action('wp_head', 'wp_dudecom_add_open_graph_meta_tags');
/**
* Adds Open Graph meta tags to the head section of WordPress pages.
*/
function wp_dudecom_add_open_graph_meta_tags() {
if (is_singular()) {
global $post;
// Ensure the post object is available
if (!isset($post)) {
return;
}
// Get the post title
$og_title = get_the_title($post->ID);
// Get the post description
$og_description = get_the_excerpt($post->ID);
// Get the post URL
$og_url = get_permalink($post->ID);
// Get the post featured image
$og_image = '';
if (has_post_thumbnail($post->ID)) {
$og_image_array = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
$og_image = $og_image_array[0];
}
// Output Open Graph meta tags
echo '<meta property="og:title" content="' . esc_attr($og_title) . '" />' . "\n";
echo '<meta property="og:description" content="' . esc_attr($og_description) . '" />' . "\n";
echo '<meta property="og:url" content="' . esc_url($og_url) . '" />' . "\n";
if ($og_image) {
echo '<meta property="og:image" content="' . esc_url($og_image) . '" />' . "\n";
}
echo '<meta property="og:type" content="article" />' . "\n";
echo '<meta property="og:site_name" content="' . esc_attr(get_bloginfo('name')) . '" />' . "\n";
}
}
?>
Instrukcja
Lokalizacja pliku: Dodaj kod do pliku functions.php
swojego motywu lub do pliku własnej wtyczki.
Wymagania wstępne:
- Upewnij się, że masz dostęp do plików motywu WordPress lub pliku własnej wtyczki.
- Wykonaj kopię zapasową swojej strony przed wprowadzeniem zmian w kodzie.
Kroki wdrożenia:
- Uzyskaj dostęp do panelu WordPress i przejdź do Wygląd > Edytor motywu, jeśli edytujesz plik
functions.php
. Alternatywnie, użyj klienta FTP lub menedżera plików swojego hostingu, aby uzyskać dostęp do pliku bezpośrednio. - Znajdź plik
functions.php
w katalogu aktywnego motywu lub otwórz plik własnej wtyczki. - Skopiuj podany fragment kodu.
- Wklej kod na końcu pliku
functions.php
lub pliku własnej wtyczki. - Zapisz zmiany w pliku.
- Odwiedź pojedynczy post lub stronę na swojej stronie i sprawdź źródło strony, aby upewnić się, że tagi meta Open Graph zostały poprawnie dodane w sekcji
<head>
.
Postępując zgodnie z tymi krokami, Twoja strona WordPress będzie teraz zawierać tagi meta Open Graph, co poprawi sposób, w jaki Twoje treści będą się wyświetlać podczas udostępniania na platformach społecznościowych.
Jeśli potrzebujesz pomocy przy wdrożeniu lub bardziej zaawansowanej funkcjonalności, rozważ skorzystanie z usług wp-dude.com.