{"id":3675,"date":"2019-07-03T02:14:38","date_gmt":"2019-07-02T23:14:38","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=3675"},"modified":"2019-07-03T14:28:47","modified_gmt":"2019-07-03T11:28:47","slug":"the_post_thumbnail","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/the_post_thumbnail\/","title":{"rendered":"The_post_thumbnail()"},"content":{"rendered":"<div id=\"toc_container\" class=\"toc_transparent no_bullets\"><p class=\"toc_title\">BU DERS\u0130N BA\u015eLIKLARI<\/p><ul class=\"toc_list\"><li><a href=\"#Aciklamasi\"><span class=\"toc_number toc_depth_1\">1<\/span> A\u00e7\u0131klamas\u0131:<\/a><\/li><li><a href=\"#Parametreleri\"><span class=\"toc_number toc_depth_1\">2<\/span> Parametreleri:<\/a><ul><li><a href=\"#boyutlar\"><span class=\"toc_number toc_depth_2\">2.1<\/span> $boyutlar<\/a><\/li><li><a href=\"#attr\"><span class=\"toc_number toc_depth_2\">2.2<\/span> $attr<\/a><\/li><\/ul><\/li><li><a href=\"#Dondurdugu_deger\"><span class=\"toc_number toc_depth_1\">3<\/span> D\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011fer:<\/a><\/li><li><a href=\"#Kaynak_kodu\"><span class=\"toc_number toc_depth_1\">4<\/span> Kaynak kodu:<\/a><\/li><li><a href=\"#Kullanimi\"><span class=\"toc_number toc_depth_1\">5<\/span> Kullan\u0131m\u0131:<\/a><ul><li><a href=\"#Ornek-1\"><span class=\"toc_number toc_depth_2\">5.1<\/span> \u00d6rnek-1<\/a><\/li><li><a href=\"#Ornek-2\"><span class=\"toc_number toc_depth_2\">5.2<\/span> \u00d6rnek-2<\/a><\/li><li><a href=\"#Ornek-3\"><span class=\"toc_number toc_depth_2\">5.3<\/span> \u00d6rnek-3<\/a><\/li><li><a href=\"#Ornek-4\"><span class=\"toc_number toc_depth_2\">5.4<\/span> \u00d6rnek-4<\/a><\/li><li><a href=\"#Ornek-5\"><span class=\"toc_number toc_depth_2\">5.5<\/span> \u00d6rnek-5<\/a><\/li><li><a href=\"#Ornek-6\"><span class=\"toc_number toc_depth_2\">5.6<\/span> \u00d6rnek-6<\/a><\/li><li><a href=\"#Ornek-7\"><span class=\"toc_number toc_depth_2\">5.7<\/span> \u00d6rnek-7<\/a><\/li><\/ul><\/li><\/ul><\/div>\n\n<pre class=\"wp-block-code\"><code>the_post_thumbnail( string|array $boyutlar = 'post-thumbnail', string|array $attr = '' )\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Aciklamasi\">A\u00e7\u0131klamas\u0131:<\/span><\/h2>\n\n\n\n<p>Yaz\u0131lar veya sayfalar i\u00e7in y\u00fcklenmi\u015f olan \u00f6ne \u00e7\u0131kan g\u00f6rselleri \u00e7a\u011f\u0131rmak ve ekrana bast\u0131rmak i\u00e7in kullan\u0131lan fonksiyondur. Asl\u0131nda <code>get_the_post_thumbnail()<\/code> fonksiyonundan t\u00fcretilmi\u015ftir.<\/p>\n\n\n\n<p>\u00d6ne \u00e7\u0131kan g\u00f6rseller i\u00e7in daha detayl\u0131 bilgiyi,&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/4-5-one-cikan-gorsel-ozelligi-ekleme\/\" target=\"_blank\">\u00d6ne \u00c7\u0131kan G\u00f6rsel \u00d6zelli\u011fi Ekleme<\/a>&nbsp;adl\u0131 dersimizde bulabilirsiniz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Parametreleri\">Parametreleri:<\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"boyutlar\">$boyutlar<\/span><\/h3>\n\n\n\n<p>(<em>string<\/em>|<em>array<\/em>) \u00d6ne \u00e7\u0131kan g\u00f6rselin boyutlar\u0131n\u0131 belirten bir isimdir ya da pixel cinsinden, s\u0131ras\u0131yla geni\u015flik ve y\u00fckseklik de\u011ferlerini belirten bir dizidir.<\/p>\n\n\n\n<p>Varsay\u0131lan de\u011feri <code>'post-thumbnail'<\/code> olarak ayarlanm\u0131\u015ft\u0131r. Bu de\u011fer, \u00f6ne \u00e7\u0131kan g\u00f6rseller i\u00e7in, <a rel=\"noreferrer noopener\" aria-label=\"set_post_thumbnail_size() (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/set_post_thumbnail_size\/\" target=\"_blank\">set_post_thumbnail_size()<\/a> fonksiyonu ile olu\u015fturulan en ve boy de\u011ferleridir.<\/p>\n\n\n\n<p>Varsay\u0131lan de\u011ferinden farkl\u0131 bir de\u011fer kullanmak isterseniz, WordPress kurulumu ile birlikte gelen ve isimleri a\u015fa\u011f\u0131da verilen resim boyutlar\u0131ndan birini kullanabilirsiniz:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>K\u00fc\u00e7\u00fck resim boyutu (<code>'thumbnail'<\/code>) \u2013&nbsp;<em>Geni\u015flik: 150px<\/em>,&nbsp;<em>Y\u00fckseklik:150px<\/em><\/li><li>Orta boyut (<code>'medium'<\/code>) \u2013&nbsp;<em>Geni\u015flik: 300px<\/em>&nbsp;,&nbsp;<em>Y\u00fckseklik: 300px<\/em><\/li><li>Orta-b\u00fcy\u00fck boyutu (<code>'medium_large'<\/code>) \u2013&nbsp;<em>Geni\u015flik: 768px<\/em>,&nbsp;<em>Y\u00fckseklik: esnek<\/em><\/li><li>B\u00fcy\u00fck boyut (<code>'large'<\/code>) \u2013&nbsp;<em>Geni\u015flik: 1024px<\/em>,&nbsp;<em>Y\u00fckseklik: 1024px<\/em><\/li><li>Ger\u00e7ek boyut (<code>'full'<\/code>) \u2013 Orijinal geni\u015flik ve y\u00fckseklik de\u011ferleri<\/li><\/ul>\n\n\n\n<p>Yukar\u0131da verilen resim boyutlar\u0131 hakk\u0131nda daha detayl\u0131 bilgi i\u00e7in <a rel=\"noreferrer noopener\" aria-label=\"ortam ayarlar\u0131 (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/wp_get_attachment_metadata\/#Ortam_Ayarlari\" target=\"_blank\">ortam ayarlar\u0131<\/a> ba\u015fl\u0131\u011f\u0131m\u0131z\u0131 okuyabilirsiniz.<\/p>\n\n\n\n<p>Daha farkl\u0131 bir boyut kullanmak isterseniz, haz\u0131r bir WordPress fonksiyonu olan <a rel=\"noreferrer noopener\" aria-label=\"add_image_size() (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/add_image_size\/\" target=\"_blank\">add_image_size()<\/a> fonksiyonunu kullanabilirsiniz. Bu fonksiyon ile, bir isim vererek yeni bir en-boy de\u011ferleri olu\u015fturabilirsiniz. Daha sonra, verdi\u011finiz o ismi bu parametrede kullanarak, \u00f6ne \u00e7\u0131kan g\u00f6rseli, bu en-boy de\u011ferlerine g\u00f6re \u00e7a\u011f\u0131rabilirsiniz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"attr\">$attr<\/span><\/h3>\n\n\n\n<p>(<em>string<\/em>|<em>array<\/em>) \u00d6ne \u00e7\u0131kan g\u00f6rsel i\u00e7in, <code>the_post_thumbnail()<\/code> fonksiyonunun olu\u015fturaca\u011f\u0131 <code>&lt;img&gt;<\/code> elaman\u0131na, <code>title<\/code>, <code>class<\/code> gibi HTML \u00f6zellikleri ekleyen parametredir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Dondurdugu_deger\">D\u00f6nd\u00fcrd\u00fc\u011f\u00fc de\u011fer:<\/span><\/h2>\n\n\n\n<p><code>The_post_thumbnail()<\/code> fonksiyonu, \u00f6ne \u00e7\u0131kan g\u00f6rsel i\u00e7in bir HTML kodu olu\u015fturur ve bunu ekrana bast\u0131r\u0131r.<\/p>\n\n\n\n<p><code>The_post_thumbnail()<\/code> fonksiyonunu \u015fu \u015fekilde kulland\u0131\u011f\u0131m\u0131z\u0131 farzedelim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>the_post_thumbnail('thumbnail');<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kullan\u0131m\u0131 ile, fonksiyonu \u015fu HTML kodunu \u00fcretir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img\n\tsrc=\"https:\/\/sitecenneti.com\/wp-content\/uploads\/2013\/03\/ornek-resim-150x150.jpg\"\n\tclass=\"attachment-thumbnail size-thumbnail wp-post-image\"\n\talt=\"\"\n\twidth=\"150\"\n\theight=\"150\"\n><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Kaynak_kodu\">Kaynak kodu:<\/span><\/h2>\n\n\n\n<p>Dizini: <strong>wp-includes\/post-thumbnail-template.php<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function the_post_thumbnail( $size = 'post-thumbnail', $attr = '' ) {\n    echo get_the_post_thumbnail( null, $size, $attr );\n}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Kullanimi\">Kullan\u0131m\u0131:<\/span><\/h2>\n\n\n\n<p>Bu fonksiyon, <a rel=\"noreferrer noopener\" aria-label=\"WordPress d\u00f6ng\u00fcs\u00fc (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-7-wordpress-dongusu-loop\/\" target=\"_blank\">WordPress d\u00f6ng\u00fcs\u00fc<\/a> i\u00e7inde kullan\u0131lmal\u0131d\u0131r.<\/p>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Ornek-1\">\u00d6rnek-1<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131da, <code>the_post_thumbanil()<\/code> fonksiyonunun, WordPress kurulumu ile birlikte gelen, farkl\u0131 boyutlar ile kullan\u0131m \u00f6rnekleri verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/WordPress ile gelen boyut isimleri ve \nthe_post_thumbnail( 'thumbnail' );     \/\/ Thumbnail (150 x 150 hard k\u0131rpma)\nthe_post_thumbnail( 'medium' );        \/\/ Medium resolution (300 x 300 max height 300px)\nthe_post_thumbnail( 'medium_large' );  \/\/ Medium Large (WP 4.4 ile) boyutlar (768px geni\u015flik x esnek y\u00fckseklik)\nthe_post_thumbnail( 'large' );         \/\/ Large boyutlarda (1024 x 1024 max height 1024px)\nthe_post_thumbnail( 'full' );          \/\/ Full boyutlarda (original size uploaded)\n \n\/\/ WooCommerce ile gelen boyutlar\nthe_post_thumbnail( 'shop_thumbnail' ); \/\/ Shop thumbnail (180 x 180 hard kar\u0131pma)\nthe_post_thumbnail( 'shop_catalog' );   \/\/ Shop catalog (300 x 300 hard kar\u0131pma)\nthe_post_thumbnail( 'shop_single' );    \/\/ Shop single (600 x 600 hard kar\u0131pma)<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Ornek-2\">\u00d6rnek-2<\/span><\/h3>\n\n\n\n<p><code>The_post_thumbnail()<\/code> fonksiyonunun, ikinci parametresi ile birlikte kullan\u0131m\u0131na bir \u00f6rnek:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>the_post_thumbnail('thumbnail', ['class' => 'img-responsive responsive--full', 'title' => '\u00d6ne \u00e7\u0131kan g\u00f6rsel']);<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kod, \u015fu HTML kodunu \u00fcretir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img\n\tsrc=\"https:\/\/sitecenneti.com\/wp-content\/uploads\/2013\/03\/ornek-resim-150x150.jpg\"\n\tclass=\"img-responsive responsive--full wp-post-image\"\n\talt=\"\"\n        title = \"\u00d6ne \u00e7\u0131kan g\u00f6rsel\"\n\twidth=\"150\"\n\theight=\"150\"\n><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Ornek-3\">\u00d6rnek-3<\/span><\/h3>\n\n\n\n<p>\u00d6ne \u00e7\u0131kan g\u00f6rseli, i\u00e7eri\u011fine g\u00f6t\u00fcren bir link olarak bast\u0131rabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php if ( has_post_thumbnail() ) : ?>\n    &lt;a href=\"&lt;?php the_permalink(); ?>\" title=\"&lt;?php the_title_attribute(); ?>\">\n        &lt;?php the_post_thumbnail(); ?>\n    &lt;\/a>\n&lt;?php endif; ?><\/code><\/pre>\n\n\n\n<p>Ayn\u0131 i\u015fi, temam\u0131z\u0131n <code>functions.php<\/code> dosyas\u0131nda yaparak, temam\u0131zdaki b\u00fct\u00fcn \u00f6ne \u00e7\u0131kan g\u00f6rsellerin, bir link halinde bast\u0131r\u0131lmas\u0131n\u0131 sa\u011flayabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**\n * B\u00fct\u00fcn \u00f6ne \u00e7\u0131kan g\u00f6rselleri, i\u00e7eriklerine g\u00f6t\u00fcren bir link yapar.\n *\n * @param string $html          \u0130\u00e7erik thumbnail HTML.\n * @param int    $post_id       \u0130\u00e7erik ID.\n * @param int    $post_image_id \u0130\u00e7erik resmi ID.\n * @return string Filtered post image HTML.\n *\/\nfunction ilktemam_one_cikan_resim_html( $html, $post_id, $post_image_id ) {\n    $html = '&lt;a href=\"' . get_permalink( $post_id ) . '\" alt=\"' . esc_attr( get_the_title( $post_id ) ) . '\">' . $html . '&lt;\/a>';\n    return $html;\n}\nadd_filter( 'post_thumbnail_html', 'ilktemam_one_cikan_resim_html', 10, 3 );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Ornek-4\">\u00d6rnek-4<\/span><\/h3>\n\n\n\n<p>\u00d6zel bir geni\u015flik ve y\u00fckseklik de\u011feri ile, \u00f6ne \u00e7\u0131kan g\u00f6rseli \u00e7a\u011f\u0131r\u0131yoruz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>the_post_thumbnail( array(200, 100) );  \/\/ width:200px; height:100px<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Ornek-5\">\u00d6rnek-5<\/span><\/h3>\n\n\n\n<p><code>The_post_thumbnail()<\/code> fonksiyonunun \u00fcretti\u011fi <code>&lt;img&gt;<\/code> elman\u0131 i\u00e7erisinde bulunan <code>width<\/code> ve <code>height<\/code> \u00f6zelliklerini kald\u0131rmak istiyorsak, <code>functions.php<\/code> dosyam\u0131za \u015fu kodu ekleyebiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/\n\/\/ \u00f6ne \u00e7\u0131kan g\u00f6rsellerden width &amp; height \u00f6zelliklerini kald\u0131r\u0131r\n\/\/\nfunction ilktemam_img_attr_iptal ($html)\n{\n    return preg_replace('\/(width|height)=\"\\d+\"\\s\/', \"\", $html);\n}\n \nadd_filter( 'post_thumbnail_html', 'ilktemam_img_attr_iptal' );<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Ornek-6\">\u00d6rnek-6<\/span><\/h3>\n\n\n\n<p><code>The_post_thumbnail()<\/code> fonksiyonunun ikinci parametresi ile birlikte kullan\u0131m\u0131na bir \u00f6rnek daha:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$attr = array(\n    'class' => \"resmin-css-sinifi\",\n    'alt'   => \"Resim i\u00e7in alternatif bir text\"\n);\n\nthe_post_thumbnail('medium', $attr);<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Ornek-7\">\u00d6rnek-7<\/span><\/h3>\n\n\n\n<p><code>The_post_thumbnail()<\/code> fonksiyonunun, <em>media query<\/em> ile birlikte kullan\u0131m\u0131na bir \u00f6rnek:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>the_post_thumbnail( 'large', array( 'sizes' => '(max-width:320px) 145px, (max-width:425px) 220px, 500px' ) );<\/code><\/pre>\n\n\n\n\t<br \/>\n\t<div class=\"stcnnt-yazi-ici-reklam\">\n\t<span aria-hidden=\"true\" class=\"sc-reklam-basligi text-muted\" style=\"display:block;text-align:center;\">bu bir reklamd\u0131r:<\/span>\n\t<p aria-hidden=\"true\" class=\"shadow-lg m-0 p-0\">\n\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t<ins class=\"adsbygoogle\"\n\t\t\t style=\"display:block; text-align:center;\"\n\t\t\t data-ad-layout=\"in-article\"\n\t\t\t data-ad-format=\"fluid\"\n\t\t\t data-ad-client=\"ca-pub-6366953309324763\"\n\t\t\t data-ad-slot=\"2001829037\"><\/ins>\n\t\t<script>\n\t\t\t (adsbygoogle = window.adsbygoogle || []).push({});\n\t\t<\/script>\n\t<\/p>\n\t<\/div>\n\t\n","protected":false},"excerpt":{"rendered":"<p>Haz\u0131r bir WordPress fonksiyonu olan th_post_thumbnail() fonksiyonu, \u00f6rnekler ile zenginle\u015ftirilerek a\u00e7\u0131klanm\u0131\u015ft\u0131r.<\/p>\n","protected":false},"author":1,"featured_media":3103,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[161,100],"class_list":["post-3675","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-fonksiyonlari","tag-the-post-thumbnail","tag-the_post_thumbnail"],"_links":{"self":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/3675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/comments?post=3675"}],"version-history":[{"count":0,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/3675\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media\/3103"}],"wp:attachment":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media?parent=3675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}