Uwaga! Wszystkie informacje i solucje zawarte w postach typu DYI mogą z czasem przestać być aktualne. Niektóre publikowane kody źródłowe, będąc zależnymi od używanych konfiguracji platform i sprzętu, mogą nie działać, lub działać nieprawidłowo u niektórych użytkowników. Stosując opisane rozwiązania przyjmujesz do wiadomości i zgadzasz się, że nie ponoszę odpowiedzialności za ich finalne efekty.
Jestem przeciwnikiem modyfikacji natywnego kodu źródłowego WordPress’a. Ten CMS jest modułowy, co oznacza, że najróżniejsze funkcjonalności można dołączać do niego w postaci pluginów, które w razie potrzeby można w każdej chwili wyłączyć zamiast przekopywać się przez tony kodu, żeby znaleźć wcześniej wprowadzone przez siebie poprawki.
Czasem istnieje konieczność zmiany tła wpisu. Choćby w sytuacji, kiedy w danej kategorii chce się np. w atrakcyjny sposób przedstawić portfolio. Zaprojektowałem plugin, który do panelu edycji posta dodaje dodatkową funkcjonalność – pole, w którym można wpisać link do obrazka tła.
Od razu powstał problem braku kontroli nad kolorystyką elementów strony np. linków i tekstu, wymyśliłem więc, że do konceptu dodam jeszcze pole styli, za pośrednictwem którego będę mógł określić jak wyglądają różne elementy na stronie danego wpisu.
Pole linku tła obrazka mogłoby oczywiście być połączone z Biblioteką Mediów WordPress’a, jednak nie chciało mi się programować takiej funkcjonalności zważywszy na fakt, że nie korzystam z BM w ogóle. Dla chcącego jednak nie ma nic trudnego i tę funkcjonalność w razie potrzeby ktoś może sobie dopisać 😉 Tak samo jak style do wyświetlanych w panelu wpisu pól edycji.
<?php
/**
* Plugin Name: Custom Background Image and Styles
* Description: Dodaje możliwość ustawienia tła graficznego oraz własnych stylów dla postów.
* Version: 1.1
* Author: Dariusz Staropiętka
*/
// Dodaj pole do metaboxa w edytorze postów
function custom_background_image_add_meta_box() {
add_meta_box(
'custom_background_image_meta_box',
'Tło Graficzne i Style',
'custom_background_image_meta_box_callback',
'post',
'side'
);
}
add_action('add_meta_boxes', 'custom_background_image_add_meta_box');
// Callback funkcji metaboxa
function custom_background_image_meta_box_callback($post) {
// Wartości pól
$background_image_url = get_post_meta($post->ID, '_custom_background_image', true);
$custom_styles = get_post_meta($post->ID, '_custom_styles', true);
// Pole do wprowadzenia URL do tła
echo '<label for="custom_background_image_field">Wprowadź URL do tła:</label>';
echo '<input type="text" id="custom_background_image_field" name="custom_background_image_field" value="' . esc_attr($background_image_url) . '" size="25" /><br><br>';
// Pole do wprowadzenia własnych stylów
echo '<label for="custom_styles_field">Wprowadź własne style CSS:</label><br>';
echo '<textarea id="custom_styles_field" name="custom_styles_field" rows="5" cols="25">' . esc_textarea($custom_styles) . '</textarea>';
}
// Zapisanie wartości z pola
function custom_background_image_save_postdata($post_id) {
if (array_key_exists('custom_background_image_field', $_POST)) {
update_post_meta(
$post_id,
'_custom_background_image',
sanitize_text_field($_POST['custom_background_image_field'])
);
}
if (array_key_exists('custom_styles_field', $_POST)) {
update_post_meta(
$post_id,
'_custom_styles',
sanitize_textarea_field($_POST['custom_styles_field'])
);
}
}
add_action('save_post', 'custom_background_image_save_postdata');
// Dodanie stylów do front-endu
function custom_background_image_add_custom_css() {
if (is_single()) {
global $post;
$background_image_url = get_post_meta($post->ID, '_custom_background_image', true);
$custom_styles = get_post_meta($post->ID, '_custom_styles', true);
if ($background_image_url || $custom_styles) {
echo '<style>';
// Dodanie tła graficznego
if ($background_image_url) {
echo 'body.single-post::before {
content: "";
position: fixed;
top: 0;
left: 0;
width: 110%;
height: 110%;
background-image: url("' . esc_url($background_image_url) . '");
background-size: cover;
background-position: center;
filter: blur(50px); // Ustawienie poziomu rozmycia tła.
z-index: -1;
opacity: 0.6; /* Ustawienie poziomu przezroczystości tła */
}
.site, .site-content {
position: relative;
z-index: 1;
background: rgba(255, 255, 255, 0.8); /* Transparentne tło dla treści */
padding: 0;
}
body.single-post {background: #000; !important;} /* Kolor tła, które znajduje się pod obrazem tła */
';
}
// Dodanie własnych stylów
if ($custom_styles) {
echo $custom_styles;
}
echo '</style>';
}
}
}
add_action('wp_head', 'custom_background_image_add_custom_css');
?>