Dodaj przyciski udostępniania w mediach społecznościowych do WordPressa w prosty sposób
Objaśnienie
Aby dodać przyciski udostępniania w mediach społecznościowych do swojej witryny WordPress, ten kod załatwia sprawę, wykorzystując ikony Font Awesome. Oto jak to działa:
- Ładowanie ikon: Kod najpierw ładuje Font Awesome, który dostarcza ikony dla przycisków mediów społecznościowych.
- Wyświetlanie przycisków: Dodaje przyciski dla Facebooka, Twittera, LinkedIn oraz e-maila na końcu każdego wpisu na blogu. Te przyciski umożliwiają odwiedzającym łatwe udostępnianie Twojej treści.
- Stylizacja: Przyciski są stylizowane, aby wyglądały schludnie i mają efekt najechania, który zmienia ich kolor, co czyni je bardziej interaktywnymi.
Te przyciski będą się pojawiać tylko na stronach poszczególnych wpisów, a nie na stronie głównej ani na stronach archiwalnych. Linki są ustawione tak, aby otwierały się w nowej karcie, co zapewnia, że użytkownicy pozostaną na Twojej stronie podczas udostępniania.
Kod
<?php
// Function to enqueue necessary styles and scripts for social media buttons
function wp_dudecom_enqueue_social_media_scripts() {
// Enqueue Font Awesome for social media icons
wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');
}
add_action('wp_enqueue_scripts', 'wp_dudecom_enqueue_social_media_scripts');
// Function to display social media sharing buttons
function wp_dudecom_display_social_share_buttons($content) {
if (is_single()) {
$social_buttons = '<div class="wp-dudecom-social-share">';
$social_buttons .= '<a href="https://www.facebook.com/sharer/sharer.php?u=' . get_permalink() . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-facebook-f"></i></a>';
$social_buttons .= '<a href="https://twitter.com/intent/tweet?url=' . get_permalink() . '&text=' . get_the_title() . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-twitter"></i></a>';
$social_buttons .= '<a href="https://www.linkedin.com/shareArticle?mini=true&url=' . get_permalink() . '&title=' . get_the_title() . '" target="_blank" rel="noopener noreferrer"><i class="fab fa-linkedin-in"></i></a>';
$social_buttons .= '<a href="mailto:?subject=' . get_the_title() . '&body=' . get_permalink() . '" target="_blank" rel="noopener noreferrer"><i class="fas fa-envelope"></i></a>';
$social_buttons .= '</div>';
$content .= $social_buttons;
}
return $content;
}
add_filter('the_content', 'wp_dudecom_display_social_share_buttons');
// Function to add custom styles for social media buttons
function wp_dudecom_social_share_styles() {
echo '<style>
.wp-dudecom-social-share {
margin-top: 20px;
display: flex;
gap: 10px;
}
.wp-dudecom-social-share a {
text-decoration: none;
color: #333;
font-size: 20px;
transition: color 0.3s;
}
.wp-dudecom-social-share a:hover {
color: #0073aa;
}
</style>';
}
add_action('wp_head', 'wp_dudecom_social_share_styles');
?>Instrukcja
Aby dodać przyciski udostępniania w mediach społecznościowych do swojej strony WordPress, wykonaj następujące kroki:
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 do własnej wtyczki, w której możesz dodać kod PHP.
Kroki implementacji:
- Dostęp do panelu WordPress: Zaloguj się do panelu administracyjnego WordPress.
- Przejdź do Edytora motywu: Przejdź do Wygląd > Edytor motywu. Jeśli wolisz używać wtyczki, przejdź do Wtyczki > Dodaj nową i zainstaluj wtyczkę taką jak "Code Snippets", aby bezpiecznie dodać niestandardowy kod.
- Otwórz functions.php: W Edytorze motywu zlokalizuj i otwórz plik
functions.phpz listy po prawej stronie. Jeśli używasz wtyczki, dodaj nowy fragment kodu. - Wklej kod: Skopiuj podany kod i wklej go na końcu pliku
functions.phplub w nowym fragmencie kodu. - Zapisz zmiany: Kliknij Aktualizuj plik, aby zapisać zmiany. Jeśli używasz wtyczki, zapisz fragment kodu.
- Zweryfikuj implementację: Odwiedź pojedynczy post na swojej stronie, aby upewnić się, że przyciski mediów społecznościowych pojawiają się na końcu treści.
Jeśli napotkasz jakiekolwiek problemy lub potrzebujesz dalszej personalizacji, rozważ skontaktowanie się z wp-dude.com w celu uzyskania profesjonalnej pomocy w zakresie implementacji WordPress i zaawansowanych funkcji.