{"id":2477,"date":"2019-05-22T13:17:46","date_gmt":"2019-05-22T10:17:46","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=2477"},"modified":"2021-09-26T23:53:25","modified_gmt":"2021-09-26T20:53:25","slug":"4-5-one-cikan-gorsel-ozelligi-ekleme","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/4-5-one-cikan-gorsel-ozelligi-ekleme\/","title":{"rendered":"4.5 \u00d6ne \u00c7\u0131kan G\u00f6rsel \u00d6zelli\u011fi Ekleme"},"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=\"#One_Cikan_Gorsel_Ozelligini_Etkinlestirme\"><span class=\"toc_number toc_depth_1\">1<\/span> \u00d6ne \u00c7\u0131kan G\u00f6rsel \u00d6zelli\u011fini Etkinle\u015ftirme<\/a><\/li><li><a href=\"#One_Cikan_Gorseli_Sablon_Dosyalarindan_Cagirma\"><span class=\"toc_number toc_depth_1\">2<\/span> \u00d6ne \u00c7\u0131kan G\u00f6rseli \u015eablon Dosyalar\u0131ndan \u00c7a\u011f\u0131rma<\/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=\"#Ozel_Resim_Boyutlari_Tanimlama\"><span class=\"toc_number toc_depth_1\">3<\/span> \u00d6zel Resim Boyutlar\u0131 Tan\u0131mlama<\/a><\/li><li><a href=\"#One_Cikan_Gorselin_Boyutlarini_Ayarlamak\"><span class=\"toc_number toc_depth_1\">4<\/span> \u00d6ne \u00c7\u0131kan G\u00f6rselin Boyutlar\u0131n\u0131 Ayarlamak<\/a><ul><li><a href=\"#One_cikan_gorseli_yeniden_boyutlandirmak\"><span class=\"toc_number toc_depth_2\">4.1<\/span> \u00d6ne \u00e7\u0131kan g\u00f6rseli yeniden boyutland\u0131rmak:<\/a><\/li><li><a href=\"#One_cikan_gorseli_kirparak\"><span class=\"toc_number toc_depth_2\">4.2<\/span> \u00d6ne \u00e7\u0131kan g\u00f6rseli k\u0131rparak:<\/a><\/li><\/ul><\/li><li><a href=\"#One_Cikan_Gorsele_Stil_Vermek\"><span class=\"toc_number toc_depth_1\">5<\/span> \u00d6ne \u00c7\u0131kan G\u00f6rsele Stil Vermek<\/a><\/li><li><a href=\"#One_Cikan_Gorsel_Ile_Ilgili_Fonksiyonlar\"><span class=\"toc_number toc_depth_1\">6<\/span> \u00d6ne \u00c7\u0131kan G\u00f6rsel \u0130le \u0130lgili Fonksiyonlar<\/a><\/li><li><a href=\"#Sablon_Dosyalarinda_One_Cikan_Gorsel_Kullanimi_Icin_Ornekler\"><span class=\"toc_number toc_depth_1\">7<\/span> \u015eablon Dosyalar\u0131nda \u00d6ne \u00c7\u0131kan G\u00f6rsel Kullan\u0131m\u0131 \u0130\u00e7in \u00d6rnekler<\/a><ul><li><a href=\"#One_Cikan_Gorseli_Gostermenin_Genel_Yolu\"><span class=\"toc_number toc_depth_2\">7.1<\/span> \u00d6ne \u00c7\u0131kan G\u00f6rseli G\u00f6stermenin Genel Yolu<\/a><\/li><li><a href=\"#One_Cikan_Gorsele_Baglanti_Verme_Ornekleri\"><span class=\"toc_number toc_depth_2\">7.2<\/span> \u00d6ne \u00c7\u0131kan G\u00f6rsele Ba\u011flant\u0131 Verme \u00d6rnekleri<\/a><ul><li><a href=\"#Ornek-1\"><span class=\"toc_number toc_depth_3\">7.2.1<\/span> \u00d6rnek-1<\/a><\/li><li><a href=\"#Ornek-2\"><span class=\"toc_number toc_depth_3\">7.2.2<\/span> \u00d6rnek-2<\/a><\/li><li><a href=\"#Ornek-3\"><span class=\"toc_number toc_depth_3\">7.2.3<\/span> \u00d6rnek-3<\/a><\/li><li><a href=\"#Ornek-4\"><span class=\"toc_number toc_depth_3\">7.2.4<\/span>  \u00d6rnek-4<\/a><\/li><li><a href=\"#Ornek-5\"><span class=\"toc_number toc_depth_3\">7.2.5<\/span> \u00d6rnek-5<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/div>\n\n<p>Bazen bir resim, bin kelimeden daha etkili olabilir. Bu y\u00fczden, web sitemizdeki i\u00e7erikler i\u00e7in, uygun resimler kullanmak \u00f6nemlidir. Bir i\u00e7eri\u011fi temsil eden, ve i\u00e7eri\u011fin vitrini olarak kullan\u0131lan resme WordPress dilinde &#8220;<strong>\u00f6ne \u00e7\u0131kan g\u00f6rsel<\/strong>&#8221; denir.<\/p>\n\n\n\n<p>\u00d6ne \u00e7\u0131kan g\u00f6rsel, orijinal ad\u0131yla &#8220;featured image&#8221; veya &#8220;post thumbnail&#8221;, <a rel=\"noreferrer noopener\" aria-label=\"yaz\u0131 veya sayfa tipindeki i\u00e7erikler (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-3-icerik-tipleri-post-types\/\" target=\"_blank\">yaz\u0131 veya sayfa tipindeki i\u00e7erikler<\/a> i\u00e7in kullan\u0131lan vitrin resmidir. \u00d6ne \u00e7\u0131kan g\u00f6rseller; ar\u015fivlerde, yaz\u0131lar\u0131n \u00f6zeti ile birlikte g\u00f6sterilen, genellikle, yaz\u0131 i\u00e7in bir link g\u00f6revi g\u00f6ren resimlerdir. Bu resimler, tek yaz\u0131 sayfalar\u0131nda, genellikle, yaz\u0131n\u0131n \u00fcst\u00fcne konulan ve yaz\u0131 hakk\u0131nda bir fikir veren resimlerdir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"One_Cikan_Gorsel_Ozelligini_Etkinlestirme\">\u00d6ne \u00c7\u0131kan G\u00f6rsel \u00d6zelli\u011fini Etkinle\u015ftirme<\/span><\/h2>\n\n\n\n<p>Bir WordPress temas\u0131n\u0131n, \u00f6ne \u00e7\u0131kan g\u00f6rsel \u00f6zelli\u011fine sahip olabilmesi i\u00e7in, teman\u0131n <code>functions.php<\/code> dosyas\u0131na \u015fu kodun eklenmesi yeterlidir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_setup() {\n     add_theme_support( 'post-thumbnails' );\n}\nadd_action( 'after_setup_theme', 'ilktemam_setup' );<\/code><\/pre>\n\n\n\n<p>Bu kod eklendikten sonra, y\u00f6netim panelinden, bir sayfa veya yaz\u0131 eklerken, sayfan\u0131n sa\u011f kenar\u0131nda bulunan, <strong>Ayarlar-&gt;Belge<\/strong> men\u00fcs\u00fcnde, &#8220;<strong>\u00d6ne \u00e7\u0131kan g\u00f6rsel<\/strong>&#8221; ad\u0131nda bir b\u00f6l\u00fcm olu\u015facakt\u0131r. Bu b\u00f6l\u00fcm ile, yaz\u0131 ve sayfalar\u0131m\u0131za, \u00f6ne \u00e7\u0131kan g\u00f6rseller eklemeniz m\u00fcmk\u00fcn olacakt\u0131r:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"280\" height=\"471\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/05\/wordpress-one-cikan-gorsel-ozelligi.png\" alt=\"\" class=\"wp-image-2478\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/05\/wordpress-one-cikan-gorsel-ozelligi.png 280w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/05\/wordpress-one-cikan-gorsel-ozelligi-178x300.png 178w\" sizes=\"auto, (max-width: 280px) 100vw, 280px\" \/><figcaption>WordPress Temas\u0131na \u00d6nce \u00c7\u0131kan G\u00f6rsel \u00d6zelli\u011fi Ekleme<\/figcaption><\/figure><\/div>\n\n\n\n<p>Bu a\u015famadan sonra, y\u00f6netim panelinden, bir i\u00e7erik i\u00e7in vitrin resmi y\u00fcklemek istedi\u011fimizde, &#8220;<strong>\u00d6ne \u00e7\u0131kan g\u00f6rsel belirle<\/strong>&#8221; butonuna t\u0131klamam\u0131z ve ortam y\u00fckleyicisini veya k\u00fct\u00fcphaneyi kullanmam\u0131z yeterli olacakt\u0131r.<\/p>\n\n\n\n<p>Bir resim y\u00fcklendi\u011finde, bu b\u00f6l\u00fcm \u015f\u00f6yle g\u00f6r\u00fcnecektir:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"227\" height=\"277\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/07\/wordpress-thumbnail-.jpg\" alt=\"\" class=\"wp-image-3667\"\/><figcaption>WordPress &#8211; \u00d6ne \u00c7\u0131kan G\u00f6rsel Ekleme<\/figcaption><\/figure><\/div>\n\n\n\n<p>\u0130\u00e7eri\u011fimiz i\u00e7in bir \u00f6ne \u00e7\u0131kan g\u00f6rsel ekledik fakat bunu y\u00f6netim panelinden yapt\u0131k. Bu g\u00f6rselin, temam\u0131zda g\u00f6r\u00fcnmesi i\u00e7in, \u015fablon dosyalar\u0131m\u0131z taraf\u0131ndan \u00e7a\u011f\u0131r\u0131lmas\u0131 gerekmektedir.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"One_Cikan_Gorseli_Sablon_Dosyalarindan_Cagirma\">\u00d6ne \u00c7\u0131kan G\u00f6rseli \u015eablon Dosyalar\u0131ndan \u00c7a\u011f\u0131rma<\/span><\/h2>\n\n\n\n<p><em>\u00d6ne \u00e7\u0131kan g\u00f6rseller<\/em>, genellikle, yaz\u0131 veya sayfalara ait <a rel=\"noreferrer noopener\" aria-label=\"\u015fablon dosyalar\u0131nda (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-1-sablon-template-dosyalari\/\" target=\"_blank\">\u015fablon dosyalar\u0131nda<\/a> ve <a rel=\"noreferrer noopener\" aria-label=\" (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-7-wordpress-dongusu-loop\/\" target=\"_blank\">d\u00f6ng\u00fc<\/a> i\u00e7erisinde \u00e7a\u011f\u0131r\u0131l\u0131rlar. <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\u00e7erisinde, bir yaz\u0131ya ya da sayfaya ait \u00f6ne \u00e7\u0131kan g\u00f6rseli \u00e7a\u011f\u0131rmak i\u00e7in kullan\u0131lan fonksiyon \u015fudur:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>the_post_thumbnail( $boyutlar, $attr );<\/code><\/pre>\n\n\n\n<p>G\u00f6r\u00fcld\u00fc\u011f\u00fc gibi bu fonksiyon, <code>$boyutlar<\/code> ve <code>$attr<\/code> ad\u0131nda iki parametre i\u00e7ermektedir. Bu parametreler zorunlu de\u011fildir. \u00c7a\u011f\u0131rd\u0131\u011f\u0131n\u0131z, g\u00f6rsel ile ilgili baz\u0131 d\u00fczenlemeler yapmak isterseniz bu parametreleri kullanabilirsiniz. Parametreler \u015fu \u015fekilde kullan\u0131l\u0131r:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"boyutlar\"><strong>$boyutlar<\/strong><\/span><\/h3>\n\n\n\n<p>\u00d6ne \u00e7\u0131kan g\u00f6rsele, s\u0131ras\u0131yla, bir geni\u015flik ve y\u00fckseklik de\u011feri vermek i\u00e7in kullan\u0131lan bir dizidir veya \u00f6nceden tan\u0131mlanm\u0131\u015f bir g\u00f6rsel boyutuna ait bir isimdir. (WordPress, y\u00f6netim panelinde, <strong>Ayarlar-&gt;Ortam<\/strong> sayfas\u0131ndan ayarlanabilen ve  <code>\u201cthumbnail\u201d<\/code>, <code>\u201cmedium\u201d<\/code>, <code>\u201clarge\u201d<\/code> ve <code>\u201cfull\u201d<\/code> olarak adland\u0131r\u0131lm\u0131\u015f resim boyutlar\u0131 ile birlikte gelir.)<\/p>\n\n\n\n<p><code>$boyutlar<\/code> parametresinin \u00f6rnek kullan\u0131mlar\u0131:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>the_post_thumbnail(); \/\/ Without parameter -&gt;; Thumbnail\nthe_post_thumbnail( 'thumbnail' ); \/\/ Thumbnail (varsay\u0131lan 150px x 150px max)\nthe_post_thumbnail( 'medium' ); \/\/ Medium boyutlar\u0131 (varsay\u0131lan 300px x 300px max)\nthe_post_thumbnail( 'large' ); \/\/ Large boyutlar\u0131 (varsay\u0131lan 1024px x 1024px max)\nthe_post_thumbnail( 'full' ); \/\/ Resmin orijinal boyutlar\u0131 (unmodified)\nthe_post_thumbnail( array( 100, 100 ) ); \/\/ Verilen boyutlar (height, width)<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"attr\">$attr<\/span><\/h3>\n\n\n\n<p>Resim eleman\u0131na, <em>class<\/em>, <em>alt <\/em>gibi HTML \u00f6zellikleri eklemek i\u00e7in kullan\u0131l\u0131r. A\u015fa\u011f\u0131da, bu parametrenin \u00f6rnek bir kullan\u0131m\u0131 verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$attr = array(\n    'src'   =&gt; $src,\n    'class' =&gt; \"css-klasinin-adi\",\n    'alt'   =&gt; \"Alternatif textiniz\"\n);<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Ozel_Resim_Boyutlari_Tanimlama\">\u00d6zel Resim Boyutlar\u0131 Tan\u0131mlama<\/span><\/h2>\n\n\n\n<p>WordPress, <a href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/add_image_size\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"add_image_size() (yeni sekmede a\u00e7\u0131l\u0131r)\">add_image_size()<\/a> fonksiyonu ile, belli bir isim vererek, resim boyutlar\u0131 tan\u0131mlaman\u0131za izin verir. Mesela, kategorilere ait \u00f6ne \u00e7\u0131kan g\u00f6rsellerin, 300 pixel geni\u015fli\u011finde 600 pixel y\u00fcksekli\u011finde g\u00f6sterilmesini isteyelim. Bu, de\u011ferleri de &#8220;<em>kategori-resimleri<\/em>&#8221; ad\u0131yla kaydedelim. Bunun i\u00e7in a\u015fa\u011f\u0131daki kodu kullanmam\u0131z yeterlidir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function ilktemam_setup() {\n     \/\/ 300 pixel geni\u015flik ve 600 pixel y\u00fckseklik tan\u0131mlad\u0131k ve ad\u0131na da kategori-resimleri dedik\n     add_image_size( 'kategori-resimleri', 300, 600);\n}\nadd_action( 'after_setup_theme', 'ilktemam_setup' );<\/code><\/pre>\n\n\n\n<p>Tan\u0131mlad\u0131\u011f\u0131m\u0131z bu boyutlar\u0131 kullanmak i\u00e7in ise, a\u015fa\u011f\u0131daki kodu yazmam\u0131z yeterlidir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>the_post_thumbnail( 'kategori-resimleri' );<\/code><\/pre>\n\n\n\n<p class=\"sc-dikkat\">\u00d6ne \u00e7\u0131kan g\u00f6rseller i\u00e7in boyut tan\u0131mlarken, geni\u015flik ya da y\u00fckseklik de\u011ferini serbest b\u0131rakmak istiyorsan\u0131z, serbest kalmas\u0131n\u0131 istedi\u011finiz de\u011fer i\u00e7in 9999 say\u0131s\u0131n\u0131 atayabilirsiniz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"One_Cikan_Gorselin_Boyutlarini_Ayarlamak\">\u00d6ne \u00c7\u0131kan G\u00f6rselin Boyutlar\u0131n\u0131 Ayarlamak<\/span><\/h2>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-6366953309324763\" data-ad-slot=\"9738116384\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<p><\/p>\n\n\n\n<p>Teman\u0131z\u0131n <code>functions.php<\/code> dosyas\u0131nda, <a href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/set_post_thumbnail_size\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"set_post_thumbnail_size() (yeni sekmede a\u00e7\u0131l\u0131r)\">set_post_thumbnail_size()<\/a> fonksiyonu ile, \u00f6ne \u00e7\u0131kan g\u00f6rseller i\u00e7in varsay\u0131lan geni\u015flik ve y\u00fckseklik de\u011ferleri ayarlayabilirsiniz. Bunu iki \u015fekilde yapabilirsiniz:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"One_cikan_gorseli_yeniden_boyutlandirmak\">\u00d6ne \u00e7\u0131kan g\u00f6rseli yeniden boyutland\u0131rmak:<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kullan\u0131m, \u00f6ne \u00e7\u0131kar g\u00f6rselleri, fonksiyonda belirtti\u011finiz en boy oran\u0131na g\u00f6re tekrar boyutland\u0131r\u0131r. Bunu yaparken, g\u00f6rselin oran\u0131n\u0131 bozmaz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>set_post_thumbnail_size( 50, 50 ); \/\/ 50 pixel geni\u015fli\u011finde, 50 pixel y\u00fcksekli\u011finde, yeniden boyutland\u0131rma modu<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"One_cikan_gorseli_kirparak\">\u00d6ne \u00e7\u0131kan g\u00f6rseli k\u0131rparak:<\/span><\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kullan\u0131m, \u00f6ne \u00e7\u0131kar g\u00f6rselleri, fonksiyonda belirtti\u011finiz en boy oran\u0131na g\u00f6re k\u0131rpar. K\u0131rpma i\u015flemini, resmin d\u00f6rt bir taraf\u0131ndan da yapar.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>set_post_thumbnail_size( 50, 50, true ); \/\/ 50 pixel geni\u015fli\u011finde, 50 pixel y\u00fcksekli\u011finde, k\u0131rpma modu<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"One_Cikan_Gorsele_Stil_Vermek\">\u00d6ne \u00c7\u0131kan G\u00f6rsele Stil Vermek<\/span><\/h2>\n\n\n\n<p>\u00d6ne \u00e7\u0131kan g\u00f6rsellere varsay\u0131lan olarak <code>\"wp-post-image\"<\/code> ad\u0131nda bir CSS s\u0131n\u0131f\u0131 atan\u0131r. Bunun yan\u0131nda, bu g\u00f6rseller i\u00e7in bir boyutland\u0131rma ismi kullan\u0131ld\u0131 ise, bu isim de, g\u00f6rsele CSS s\u0131n\u0131f\u0131 olarak atan\u0131r. A\u015fa\u011fadaki CSS se\u00e7icileri ile, \u00f6ne \u00e7\u0131kar g\u00f6rsellere stil verilebilir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>img.wp-post-image\nimg.attachment-thumbnail\nimg.attachment-medium\nimg.attachment-large\nimg.attachment-full<\/code><\/pre>\n\n\n\n<p>\u00d6ne \u00e7\u0131kan g\u00f6rseller i\u00e7in, kendi CSS s\u0131n\u0131flar\u0131n\u0131 da olu\u015fturabilirsiniz. Bunun i\u00e7in, <code>the_post_thumbnail()<\/code> fonksiyonunun ikinci parametresini kullanabilirsiniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>the_post_thumbnail( 'thumbnail', array( 'class' =&gt; 'sola-hizala' ) );<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"One_Cikan_Gorsel_Ile_Ilgili_Fonksiyonlar\">\u00d6ne \u00c7\u0131kan G\u00f6rsel \u0130le \u0130lgili Fonksiyonlar<\/span><\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><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> \u2013 Yeni bir resim boyutu kaydeder.<\/li><li><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>&nbsp;\u2013 \u00d6ne \u00e7\u0131kan g\u00f6rsel i\u00e7in yeni bir resim boyutu kaydeder.<\/li><li><a rel=\"noreferrer noopener\" aria-label=\"has_post_thumbnail() (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/set_post_thumbnail_size\/\" target=\"_blank\">has_post_thumbnail()<\/a>&nbsp;\u2013 \u0130\u00e7eri\u011fin bir \u00f6ne \u00e7\u0131kan g\u00f6rselinin olup olmad\u0131\u011fn\u0131 kontrol eder.<\/li><li><a rel=\"noreferrer noopener\" aria-label=\"the_post_thumbnail() (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/the_post_thumbnail\/\" target=\"_blank\">the_post_thumbnail()<\/a>&nbsp;\u2013 \u00d6ne \u00e7\u0131kan g\u00f6rsel yay\u0131nlar.<\/li><li><a rel=\"noreferrer noopener\" aria-label=\"get_the_post_thumbnail() (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/get_the_post_thumbnail\/\" target=\"_blank\">get_the_post_thumbnail()<\/a>&nbsp;\u2013 \u00d6ne \u00e7\u0131kan g\u00f6rseli getirir.<\/li><li><a rel=\"noreferrer noopener\" aria-label=\"get_post_thumbnail_id() (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/get_post_thumbnail_id\/\" target=\"_blank\">get_post_thumbnail_id()<\/a>&nbsp;\u2013 \u00d6ne \u00e7\u0131kan g\u00f6rselin ID de\u011ferini getirir.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Sablon_Dosyalarinda_One_Cikan_Gorsel_Kullanimi_Icin_Ornekler\">\u015eablon Dosyalar\u0131nda \u00d6ne \u00c7\u0131kan G\u00f6rsel Kullan\u0131m\u0131 \u0130\u00e7in \u00d6rnekler<\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"One_Cikan_Gorseli_Gostermenin_Genel_Yolu\">\u00d6ne \u00c7\u0131kan G\u00f6rseli G\u00f6stermenin Genel Yolu<\/span><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u00d6nce i\u00e7erik i\u00e7in bir \u00f6ne \u00e7\u0131kan g\u00f6rsel kullan\u0131lm\u0131\u015f m\u0131 kontrol et.\nif ( has_post_thumbnail() ) {\n    the_post_thumbnail();\n}<\/code><\/pre>\n\n\n\n<p>\u00d6ne \u00e7\u0131kan g\u00f6rseli bir de\u011fi\u015fkene atamak i\u00e7in <code>get_the_post_thumbnail()<\/code> fonksiyonu kullan\u0131l\u0131r. A\u015fa\u011f\u0131daki \u00f6rne\u011fe dikkat edelim:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ \u00d6nce i\u00e7erik i\u00e7in bir \u00f6ne \u00e7\u0131kan g\u00f6rsel kullan\u0131lm\u0131\u015f m\u0131 kontrol et.\nif ( has_post_thumbnail() ) {\n    $one_cikan_gorsel= get_the_post_thumbnail();\n}<\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki kodda, <a href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/get_the_post_thumbnail\/\" target=\"_blank\" rel=\"noreferrer noopener\" aria-label=\"get_the_post_thumbnail() (yeni sekmede a\u00e7\u0131l\u0131r)\">get_the_post_thumbnail()<\/a> fonksiyonu   <code>$one_cikan_gorsel<\/code> de\u011fi\u015fkenine \u015fu HTML kodlar\u0131n\u0131 y\u00fcklemi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img\n     src=\"http:\/\/localhost\/benimsitem\/wp-content\/uploads\/2019\/05\/resim_adi.jpg\"\n     class=\"attachment-post-thumbnail size-post-thumbnail wp-post-image\"\n     alt=\"\"\n     srcset=\"http:\/\/localhost\/benimsitem\/wp-content\/uploads\/2019\/05\/resim_adi.jpg 225w, http:\/\/localhost\/benimsitem\/wp-content\/uploads\/2019\/05\/resim_adi-150x150.jpg 150w\"\n     sizes=\"(max-width: 225px) 100vw, 225px\"\n     width=\"225\"\n     height=\"225\"\n&gt;<\/code><\/pre>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-6366953309324763\" data-ad-slot=\"9738116384\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"One_Cikan_Gorsele_Baglanti_Verme_Ornekleri\">\u00d6ne \u00c7\u0131kan G\u00f6rsele Ba\u011flant\u0131 Verme \u00d6rnekleri<\/span><\/h3>\n\n\n\n<p class=\"sc-dikkat\">A\u015fa\u011f\u0131daki verilen <em>\u00d6rnek-1<\/em> ve <em>\u00d6rnek-2<\/em> kodlar\u0131n\u0131 ayn\u0131 temada kullanmaman\u0131z \u00f6nerilir.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Ornek-1\">\u00d6rnek-1<\/span><\/h4>\n\n\n\n<p>\u00d6ne \u00e7\u0131kan g\u00f6rsele, i\u00e7eri\u011fe g\u00f6t\u00fcren bir ba\u011flant\u0131 verilebilir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php if ( has_post_thumbnail()) : ?&gt;\n    &lt;a href=\"&lt;?php the_permalink(); ?&gt;\" alt=\"&lt;?php the_title_attribute(); ?&gt;\"&gt;\n        &lt;?php the_post_thumbnail(); ?&gt;\n    &lt;\/a&gt;\n&lt;?php endif; ?&gt;<\/code><\/pre>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-6366953309324763\" data-ad-slot=\"9738116384\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Ornek-2\">\u00d6rnek-2<\/span><\/h4>\n\n\n\n<p>B\u00fct\u00fcn \u00f6ne \u00e7\u0131kan g\u00f6rsellere, i\u00e7eriklerine g\u00f6t\u00fcren bir ba\u011flant\u0131 vermek i\u00e7in, teman\u0131z\u0131n <code>functions.php<\/code> dosyas\u0131na, \u015fu kodlar\u0131 ekleyebilirsiniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_filter( 'post_thumbnail_html', 'benim_one_cikan_gorsel_html_kodum', 10, 3 );\n \nfunction benim_one_cikan_gorsel_html_kodum( $html, $post_id, $post_image_id ) {\n \n  $html = '&lt;a href=\"' . get_permalink( $post_id ) . '\"&gt;' . $html . '&lt;\/a&gt;';\n  return $html;\n \n}<\/code><\/pre>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-6366953309324763\" data-ad-slot=\"9738116384\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Ornek-3\">\u00d6rnek-3<\/span><\/h4>\n\n\n\n<p>Bu \u00f6rnek, \u00f6ne \u00e7\u0131kan g\u00f6rsel i\u00e7in, WordPress ile birlikte gelen bir boyutland\u0131rma olan &#8220;large&#8221; boyutlar\u0131n\u0131 kullan\u0131r ve i\u00e7eri\u011fine ba\u011flant\u0131 verir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>if ( has_post_thumbnail()) {\n   $large_image_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'large');\n   echo '&lt;a href=\"' . $large_image_url&#91;0]; . '\"&gt;';\n   the_post_thumbnail('thumbnail');\n   echo '&lt;\/a&gt;';\n}<\/code><\/pre>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-6366953309324763\" data-ad-slot=\"9738116384\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Ornek-4\"> \u00d6rnek-4<\/span><\/h4>\n\n\n\n<p><code>The_post_thumbnail()<\/code> fonksiyonunun, HTML \u00f6zellikleri ekleyen ikinci parametresi, \u015fu \u015fekilde de kullan\u0131labilir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>the_post_thumbnail('post-thumbnail', &#91;'class' =&gt; 'img-responsive responsive--full', 'title' =&gt; 'Feature image']);<\/code><\/pre>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-6366953309324763\" data-ad-slot=\"9738116384\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"Ornek-5\">\u00d6rnek-5<\/span><\/h4>\n\n\n\n<p>\u00d6ne \u00e7\u0131kan g\u00f6rsel i\u00e7in, WordPress&#8217;in \u00fcretti\u011fi HTML yap\u0131s\u0131ndan geni\u015flik ve y\u00fckseklik de\u011ferlerini silmek istiyorsan\u0131z, teman\u0131z\u0131n <code>functions.php<\/code> dosyas\u0131nda, a\u015fa\u011f\u0131daki kodu kullanabilirsiniz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/\n\/\/ Resimlerden width &amp; height attribute \u00f6zelliklerini siler\n\/\/\nfunction resmin_genislik_ve_yukseklik_ozelliklerini_sil($html)\n{\n    return preg_replace('\/(width|height)=\"\\d+\"\\s\/', \"\", $html);\n}\n \nadd_filter( 'post_thumbnail_html', 'resmin_genislik_ve_yukseklik_ozelliklerini_sil' );<\/code><\/pre>\n\n\n\n<script async=\"\" src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n<ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-6366953309324763\" data-ad-slot=\"9738116384\"><\/ins>\n<script>\n     (adsbygoogle = window.adsbygoogle || []).push({});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>WordPress temalar\u0131n\u0131n, en \u00e7ok kullan\u0131lan \u00f6zelliklerinden biri \u00f6ne \u00e7\u0131kan g\u00f6rsel \u00f6zelli\u011fidir. Temaya, \u00f6ne \u00e7\u0131kan g\u00f6rsel \u00f6zelli\u011fi eklemek i\u00e7in bilmeniz gerekenler, \u00f6rnek kodlar ile birlikte verilmi\u015ftir. \u00d6\u011frenmek i\u00e7in t\u0131klay\u0131n. <\/p>\n","protected":false},"author":1,"featured_media":25,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[99,100],"class_list":["post-2477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tema-yapimi","tag-one-cikan-gorsel","tag-the_post_thumbnail"],"_links":{"self":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/2477","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=2477"}],"version-history":[{"count":0,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/2477\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media\/25"}],"wp:attachment":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/media?parent=2477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=2477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=2477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}