Окремі CSS для кожного допису? Легко!

Чи хотіли ви коли-небудь блог з таким дизайном, щоб кожний новий допис був оформлений у іншому стилі? При чому, ці стилі ви могли б вибирати у процесі написання статті?

Насправді це дуже легко зробити вже зараз. Просто у вашому WordPress-блозі! І зараз я розповім як 🙂

Для початку напишемо невеличкий шматок коду, що буде встановлювати стилі на сторінку допису. Ось він:

<?php if (is_single()) { ?>
<?php while (have_posts()) : the_post(); ?>
<?php $newcss = get_post_meta($post->ID, 'post-css', true); ?> 
<style type="text/css">
   <?php echo $newcss; ?>
</style>
<?php endwhile; ?>
<?php rewind_posts(); ?>
<?php } ?>

Для більшого розуміння того, що ми пишемо, коротко розглянемо теги, що їх ми застосували тут.

• 
  

  У першій стрічці в операторі if через тег is_single() задано умову виконання нашого коду, а саме: "Якщо будь-яка сторінка з дописом (Post page) буде відображена..". Це означає, що даний код буде діяти лише на одиночній сторінці із дописом.

  
  
• 
  

  У другій стрічці оператор циклу while задає час виконання (по іншому це можна зрозуміти так: "виконувати поки.."), а вордпресівський цикл (великий The Loop) і є тим часом та означає, що код виконуватиметься коли двигунець виводить допис.

  
  
• 
  

  У третій стрічці використовується функція get_post_meta, що повертає значення власного поля, що ми потім введемо. У дужках наведено параметри функції. Перший параметр визначає ID допису, другий додає назву власного поля (у нашому випадку це post-css), третій - у нашому випадку значення true означає, що значення (value) власного поля (custom fields) передаватиметься як єдиний результат (string), а не масивом. У цій же стрічці перемінній newcss присвоюється значення, що отримає функція get_post_meta.

  
  
• 
  

  У п'ятій стрічці відбувається виведення значення перемінної newcss. Значення буде виведена поміж тегів стилів (четверта і шоста стрічки відповідно). Вже можна здогадатись, що потрібно вписувати у поле значення (value) власного поля (custom fields). 😁

  
  
• 
  

  Код у решті стрічок це закінчення циклу WordPress. Ніц цікавого, але все так має бути. ;)

  
  

Вищеописаний код слід встановити одразу після стрічки з оголошенням ваших CSS стилів. Залишилось лише створити власне поле під назвою post-css та його значенням приблизно такого змісту:

body { background:#333333 !important; }

Це лиш приклад стилів. Ви вправі і навіть повинні замінити їх на свої! Все обмежується лише вашою фантазією (головне, щоб не можливостями! 🤪 )!

Натхнення для статті було ось тут. Бажаєте доповнити статтю? Будь-ласка, пишіть свій коментар!

За підтримки:
Размещения серверного и коммутационного оборудования собственного или в аренду. Центр обработки данных.

Фотоомоложение, пилинг, удаление морщин. "Оксфорд Медикал"