Вивчаємо WordPress

537
  • Як виводити статті з категорії WordPress у вигляді мініатюр
  • Створення мініатюри з першої картинки поста
  • Як на сторінках рубрик виводити мініатюри постів
  • Здрастуйте, шановні читачі блогу . Сьогоднішній маленький пост я вирішив присвятити відповіді на питання, який мені вже кілька разів ставили в коментарях і поштою. У мене не так давно в кінці всіх статей з’явився блок з дев’яти (можна задати будь-яку кількість) карток статей, які були опубліковані раніше в тій же рубриці, що і переглядається публікація.

    Вивчаємо WordPress

    Про внутрішню перелінковку і способи її реалізації на цьому блозі я вже писав, тому тут не буду наводити тінь на тин і розповідати, чому Вікіпедія із-за своєї всеосяжної перелінковки (ну, і не тільки) знаходиться в Топі по переважній кількості інформаційних запитів обох пошукових систем.

    Як виводити статті з категорії WordPress у вигляді мініатюр

    Загалом, з великим трудом я спробував пригадати як це реалізовано, бо вже встиг успішно забути (в бутність студентом за одну-три дні міг будь-який предмет, де є логічний зв’язок, за будь-якими наявними матеріалами в голову запхати, а через день після здачі все обнулити). Однак, не суть.

    Отже, описую мій випадок. Функція, яка дозволяла виводити попередні N статей з тієї ж рубрики, у мене працювала вже кілька місяців і була вона взята з цієї сторінки відомого знавця коду WordPress під ніком Kama. Але мені хотілося б дещо акцентувати на цих посиланнях увагу, тому і задумався про додавання превьюшек.

    Якщо б я ілюстрації для блогу завантажував вбудованими в Вордпресс засобами, то крім основного зображення, на хостингу лежали б ще і його мініатюри, із заданими у налаштуваннях розмірами. У цьому випадку їх можна було легко прикрутити до посилань з допомогою функції the_post_thumbnail. З’явилася вона в Вордперессе не так давно, але не всі її ще використовують.

    Крім заголовка і мініатюри можна навіть деякий фрагмент тексту статті додати, як це зробив Шановний Рінате в коментарі 138 на блозі Димокса:

    posts wposts
    LEFT JOIN $wpdb->term_relationships ON (wposts.ID = $wpdb->term_relationships.object_id)
    LEFT JOIN $wpdb->term_taxonomy ON ($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
    WHERE $wpdb->term_taxonomy.taxonomy = ‘category’
    AND $wpdb->term_taxonomy.term_id = ‘$the_category_id’
    AND wposts.post_status = ‘publish’
    AND wposts.post_type = ‘post’
    AND wposts.ID get_results($sql, OBJECT);
    global $post;
    ?>

      Попередні статті з категорії:

    • ID;
      }
      if ( $num

    cat_ID;
    show_previous_posts_from_category($post->ID, $the_cat_id, 5);
    wp_reset_query();
    ?>

    Функція робоча:

    Вивчаємо WordPressВивчаємо WordPress

    На початку коду «return 10» задає число слів, яке буде виводитися в анонсі статті (якщо нічого не плутаю, бо в PHP нуб), в кінці коду ($post->ID, $the_cat_id, 5) цифрою 5 задається число попередніх постів з тієї ж категорії, до якої відноситься дана публікація.

    Все чудово, і я навіть пару днів такий вид тестував на блозі (правда для виведення мініатюр використовувався трохи більш складний спосіб, який описано нижче). Але потім чогось не вставило і я поміняв на те, що Ви спостерігаєте зараз (якщо я знову все не поміняв):

    Вивчаємо WordPressВивчаємо WordPress

    Вийшли своєрідні картки раніше написаних постів з тієї ж категорії, які особливо добре виглядали б на фотоблоге або ресурсі, де зображення превалюють над текстом. Але і для звичайного блогу цей варіант може бути виграшним, хоча, напевно, і не в такій мірі. Якщо перші десять слів з посади не потрібні, то просто видаліть у двох місцях і цей шматок на початку:

    function new_excerpt_length($length) {
    return 10; }

    Так, трохи не забув, все це неподобство потрібно вставляти безпосередньо в те місце шаблон WordPress, де попередні пости і повинні виводитися. Зазвичай, це файл single.php або index.php (якщо синглу немає) з папки з використовуваної вами темою оформлення:

    wp-content/themes/назва темы/single.php

    Якщо хочете, щоб попередні пости з цієї ж категорії показувалися відразу після тексту статті, то знайдіть в коді single.php або index.php місце:

    І ліпіть наведений трохи вище величезний шматок коду відразу за ним. ВАЖЛИВО. Все має запрацювати, але все одно спочатку зробіть на всякий пожежний резервну копію файлів вашої теми і не користуйтеся можливостями WordPress редагування файлів шаблону, бо при роботі, наприклад, у зв’язці Файлзилы і Нотепад++ у вас завжди буде можливість зробити відкат при невдачі або помилку.

    Створення мініатюри з першої картинки поста

    Використання функції « the_post_thumbnail» це оптимальний варіант, який я не реалізував (насправді реалізував за допомогою згаданого трохи нижче плагіна Auto Post Thumbnail і результуючий код наведений в самому низу статті) тому, що файли ілюстрацій для статей кидаю відразу на хостинг через кращий ФТП менеджер, а в текст статті вставляю шаблон, в якому потім міняю назву файлу картинки і його опис в атрибути Alt і Title тега Img:

    Вивчаємо WordPress

    Звик я це робити ще до того, як WordPress став підтримувати мініатюри і, отже, навіть якщо б я перейшов на новий спосіб додавання графіки на блог, то частина статей все одно залишилася б без мініатюр.

    Було два варіанти подальшого розвитку подій: або шукати спосіб автоматичного створення мініатюр для всіх статей (начебто я його навіть знайшов, але якщо хто знає випробуваний варіант, то киньте посилання, пліз), або якимось чином висмикувати перше зображення з усіх постів і робити з нього превьюшку потрібного розміру.

    P. S. Спосіб автоматичного створення мініатюр знайдений — це плагін Auto Post Thumbnail. Після установки заходьте в його налаштування і тиснете на кнопку для створення мініатюрних зображень різних розмірів, за основу яких буде братися перша картинка посту.

    Вивчаємо WordPressВивчаємо WordPress

    Півгодини очікування і мініатюри для всіх статей блогу будуть створені автоматично. Лепота.

    Чомусь у мене думка (пошук) спочатку пішла по другому руслу і саме цей варіант і був реалізований, а згодом замінений на класичну функцію роботи з мініатюрами the_post_thumbnail (array (200,200).

    Сталося це тому, що описаний тут варіант мав один істотний недолік (якщо я не помиляюся) — функцією витягується повнорозмірне зображення з посади, яке потім засобами мови стильової розмітки CSS зменшується до потрібного розміру мініатюри (з допомогою height і width).

    Якщо для блогу це критично, але не сильно, бо перші картинки мають не дуже велику вагу (в середньому 30 кіло), то для фотоблога це буде серйозною проблемою.

    Власне, про спосіб висмикування першої картинки з будь-якої посади в WordPress. Досить буде в файл вашої теми оформлення під назвою functions.php (в будь-якому місці, але після закінчення якої-небудь іншої функції, а не її середині) додати таку функцію catch_that_image:

    function catch_that_image() {
    global $post, $posts;
    $first_img = «;
    ob_start();
    ob_end_clean();
    $output = preg_match_all(‘//i’, $post->post_content, $matches);
    $first_img = $matches [1] [0];
    if(empty($first_img)){ //Defines a default image
    $first_img = «/files/no-image.gif.jpg»;
    }
    return $first_img;
    }

    Додаєте, а потім трохи змінюєте наведений трохи вище величезний код функції show_previous_posts_from_category, т. к. нам тепер замість стандартної функції the_post_thumbnail потрібно буде використовувати додану catch_that_image.

    У мене вийшло приблизно так в PHP коді (він вставляється в single.php або index.php вашої теми з описаного трохи вище принципом):

    posts wposts
    LEFT JOIN $wpdb->term_relationships ON (wposts.ID = $wpdb->term_relationships.object_id)
    LEFT JOIN $wpdb->term_taxonomy ON ($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
    WHERE $wpdb->term_taxonomy.taxonomy = ‘category’
    AND $wpdb->term_taxonomy.term_id = ‘$the_category_id’
    AND wposts.post_status = ‘publish’
    AND wposts.post_type = ‘post’
    AND wposts.ID get_results($sql, OBJECT);
    global $post;
    ?>
    Попередні статті з категорії:

  • ID;
    }
    if ( $num

  • cat_ID;
    show_previous_posts_from_category($post->ID, $the_cat_id, 9);
    wp_reset_query();
    ?>

    Дев’ятка в передостанньому рядку означає число постів, які будуть відображатися, а головна фішка криється в цій ділянці коду:

    Можливо, що зроблено за нубски (CSS як шахи, в яких я знаю як ходити, але це не дозволяє мені грати хоч скільки-небудь пристойно), але працює. Гіперпосилання має Href у вигляді посилання на потрібний пост (з тієї ж рубрики) і вона покриває відразу два блоки:

  • Перший з порожнім контейнером Div, фоном для якого виступає выдернутое з допомогою функції catch_that_image перше зображення з цього посту (він задається CSS властивості background), яке з допомогою властивостей width:200px і height: 150px зменшується до потрібних розмірів мені, а за допомогою background-size: 100% не відображається його верхня ліва частина, а зменшена копія.
  • Другий контейнер Div за допомогою функції trim_title_chars (110, ‘…’) дозволяє відобразити трохи нижче цього фонового зображення заголовок поста, в якому відображаються тільки перші 110 символів, бо мої тайтли дуже довгі (читайте про мета теги title, description і keywords) і вносять сумбур в стрункі ряди карток постів. Якщо обрізати не треба, то можете вставляти традиційну функцію the_title ().
  • Ну і зрозуміло, що все, що можна було винести в класи, я виніс, тому буде не зайвим їх тут навести (живуть вони в окремому файлі стилів style.css в папці з темою оформлення):

    .rle {border:1px solid #ccc;margin:0px 3px 6px 3px !important;float:left;list-style-type:none;height:280px;}
    .fhjk {color:#333;padding:0 0px 0 20px;margin:10px 0 0 0;width:200px;}
    .rle a:hover {text-decoration:none !important;}
    li.rle:hover {background-color:#eee !important;}

    Знову ж таки, нубский стиль, але працює. З допомогою border задається суцільна рамочка в один піксел шириною, а з допомогою Padding та margin — внутрішні і зовнішні відступи (код добре аналізувати з допомогою Фаербага або його вбудованих у всі браузери аналогів).

    Float змушує картки постів плавати і притискатися до лівого краю, але не забувайте, що інші блоки коду не помічають плаваючі елементи, тому під запобігання їх прилипання знизу слід вказати в CSS властивості нижнього (наступного після них) блогу властивість Clear:both для можливості завдання відступів від нього до плаваючих вгорі блоків карток попередніх постів. Цікаво, я б сам зрозумів, що написав, не пиши це власноруч. Сумніваюся, але пояснювати докладніше лінь. Вибачте.

    Останні два рядки змушують не відображати підкреслення посилань при наведенні на них миші (читайте про селектор hover і text-decoration) і задають сіренький фон при наведенні на картку курсору, що додає, на мій погляд, певну жвавість. List-style-type прибирає нумерацію у використовуваного мною Html списку (OL і LI).Тупо, нерозумно, але цікаво.

    P. S. Якщо у вас мініатюри вже є, або ж ви їх створили для всіх постів автоматично з допомогою згаданого трохи вище плагіна Auto Post Thumbnail, то можете використовувати більш простий і легкий у плані навантаження на сервер спосіб:

    posts wposts
    LEFT JOIN $wpdb->term_relationships ON (wposts.ID = $wpdb->term_relationships.object_id)
    LEFT JOIN $wpdb->term_taxonomy ON ($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)
    WHERE $wpdb->term_taxonomy.taxonomy = ‘category’
    AND $wpdb->term_taxonomy.term_id = ‘$the_category_id’
    AND wposts.post_status = ‘publish’
    AND wposts.post_type = ‘post’
    AND wposts.ID get_results($sql, OBJECT);
    global $post;
    ?>
    Найцікавіше і найкорисніше з категорії :


  • ID;
    }
    if ( $num


  • cat_ID;
    show_previous_posts_from_category($post->ID, $the_cat_id, 6);
    wp_reset_query();
    ?>

    Як на сторінках рубрик виводити мініатюри постів

    Ну і ще трохи про те, як організувати висновок постів на сторінках категорій (рубрик), міток (тегів) або тимчасових архівів WordPress у вигляді мініатюр (превьюшек) і заголовків цих статей. Власне, зробити теж саме, що ми тільки що зробили, але при цьому ще залишивши пагінацію (нумерацію сторінок — читайте про пагінацію з WP-PageNavi). Складного тут нічого немає. Якщо у вас в темі вже є файл archive.php, то його потрібно буде лише трохи підкоригувати, прибравши з нього:

    або

    До речі, перший варіант виводить анонс статті до тега More, а другий тільки 50 (по-моєму) перших слів. Хоча, кількість слів можна варіювати, дописавши в functions.php наступний код:

    function new_excerpt_length($length) {
    return 55;
    }
    add_filter(‘excerpt_length’, ‘new_excerpt_length’);

    Але не суть. Отже, видаляємо обумовлену конструкції, а також стоїть трохи вище частину, де виводиться заголовок статті:

    І замість них вставляємо вже згаданий трохи вище фрагмент:

    Але не все так просто. Потрібно потрапити всередину циклу і правильно розпорядитися з вже наявними блоками. Я, як уже казав, не сильний в ПХП, але шляхом порівняно нетривалих ітерацій зміг отримати потрібний мені результат. Робив я це для іншого проекту, в шаблоні якого файлу archive.php не було і я його створив на базі має файлу index.php. Пояснювати суть досить довго, тому наведу обидва файлу, а ви зможете порівняти і зробити за аналогією у себе так само.

    Був ось такий index.php:

    Архіви

    Архіви по місяцях

    Архіви по роках

    Рубрика:

    Мітка:

    ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

      Мітки ‘, ‘, ‘, ‘

      ‘);?>Рубрика:


    Вивчаємо WordPress

    З нього шляхом видалення зайвого і додавання потрібного вийшов такий ось файл archive.php:

    Архіви

    Архіви по місяцях

    Архіви по роках

    Рубрика:

    Мітка:

    ID == $do_not_duplicate ) continue; update_post_caches($posts); ?>

  • Вивчаємо WordPress

    Ось, власне, і все. Ах, так. Мені не сподобалося, що на сторінках рубрик і міток відображається стільки ж постів, що і на головній. Мені хотілося більше. Зробити це виявилося не складно — досить замінити конструкцію на:

    Де і вказати потрібну кількість статей, що відображається на сторінках архівів. Всі.

    Удачі вам! До зустрічей на сторінках блогу