{"id":3481,"date":"2019-06-28T02:28:26","date_gmt":"2019-06-27T23:28:26","guid":{"rendered":"https:\/\/sitecenneti.com\/wordpress\/?p=3481"},"modified":"2019-07-05T14:05:04","modified_gmt":"2019-07-05T11:05:04","slug":"4-14-ortam-dosyalari-resim-image","status":"publish","type":"post","link":"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/4-14-ortam-dosyalari-resim-image\/","title":{"rendered":"4.14 Ortam Dosyalar\u0131 \u2013 Resim (Image)"},"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=\"#Temaya_Resim_Dosyasi_Yukleme\"><span class=\"toc_number toc_depth_1\">1<\/span> Temaya Resim Dosyas\u0131 Y\u00fckleme<\/a><ul><li><a href=\"#I-Ortam_Menusu_Ile_Resim_Dosyasi_Yukleme\"><span class=\"toc_number toc_depth_2\">1.1<\/span> I-Ortam Men\u00fcs\u00fc \u0130le Resim Dosyas\u0131 Y\u00fckleme<\/a><\/li><li><a href=\"#II-Blok_Editor_Ile_Resim_Dosyasi_Yukleme\"><span class=\"toc_number toc_depth_2\">1.2<\/span> II-Blok Edit\u00f6r \u0130le Resim Dosyas\u0131 Y\u00fckleme<\/a><\/li><\/ul><\/li><li><a href=\"#Sablon_Dosyalarina_Resim_Ekleme\"><span class=\"toc_number toc_depth_1\">2<\/span> \u015eablon Dosyalar\u0131na Resim Ekleme<\/a><ul><li><a href=\"#I-_URL_Degeri_Ile_Resim_Ekleme\"><span class=\"toc_number toc_depth_2\">2.1<\/span> I- URL De\u011feri \u0130le Resim Ekleme<\/a><\/li><li><a href=\"#II-_Wp_get_attachment_image_Fonksiyonu_Ile_Resim_Ekleme\"><span class=\"toc_number toc_depth_2\">2.2<\/span> II- Wp_get_attachment_image() Fonksiyonu \u0130le Resim Ekleme<\/a><\/li><li><a href=\"#III-_Wp_get_attachment_image_src_Fonksiyonu_Ile_Resim_Ekleme\"><span class=\"toc_number toc_depth_2\">2.3<\/span> III-  Wp_get_attachment_image_src() Fonksiyonu \u0130le Resim Ekleme<\/a><\/li><\/ul><\/li><li><a href=\"#Resimleri_Hizalama\"><span class=\"toc_number toc_depth_1\">3<\/span> Resimleri Hizalama<\/a><ul><li><a href=\"#Ornek-1\"><span class=\"toc_number toc_depth_2\">3.1<\/span> \u00d6rnek-1<\/a><\/li><\/ul><\/li><li><a href=\"#Resimlere_Meta_Bilgileri_Ekleme\"><span class=\"toc_number toc_depth_1\">4<\/span> Resimlere Meta Bilgileri Ekleme<\/a><\/li><li><a href=\"#Resimlere_Alt_Yazi_Ekleme\"><span class=\"toc_number toc_depth_1\">5<\/span> Resimlere Alt Yaz\u0131 Ekleme<\/a><ul><li><a href=\"#I-_Meta_Bilgileri_Ile\"><span class=\"toc_number toc_depth_2\">5.1<\/span> I- Meta Bilgileri \u0130le<\/a><\/li><li><a href=\"#II-_Blok_Editor_Ile\"><span class=\"toc_number toc_depth_2\">5.2<\/span> II- Blok Edit\u00f6r \u0130le<\/a><\/li><li><a href=\"#III-_8220Caption8221_Kisa_Kodu_Ile\"><span class=\"toc_number toc_depth_2\">5.3<\/span> III- &#8220;Caption&#8221; K\u0131sa Kodu \u0130le<\/a><\/li><li><a href=\"#Caption_Kisa_Kodunun_Ayarlari\"><span class=\"toc_number toc_depth_2\">5.4<\/span> Caption K\u0131sa Kodunun Ayarlar\u0131<\/a><ul><li><a href=\"#width\"><span class=\"toc_number toc_depth_3\">5.4.1<\/span> width<\/a><\/li><li><a href=\"#id\"><span class=\"toc_number toc_depth_3\">5.4.2<\/span> id<\/a><\/li><li><a href=\"#class\"><span class=\"toc_number toc_depth_3\">5.4.3<\/span> class<\/a><\/li><li><a href=\"#align\"><span class=\"toc_number toc_depth_3\">5.4.4<\/span> align<\/a><\/li><\/ul><\/li><\/ul><\/li><\/ul><\/div>\n\n<p>WordPress, \u015fu uzant\u0131lar\u0131 ta\u015f\u0131yan resim dosyalar\u0131n\u0131 destekler: <\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>jpg<\/strong><\/li><li><strong>jpeg<\/strong><\/li><li><strong>png<\/strong><\/li><li><strong>gif<\/strong><\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Temaya_Resim_Dosyasi_Yukleme\">Temaya Resim Dosyas\u0131 Y\u00fckleme<\/span><\/h2>\n\n\n\n<p>WordPress temas\u0131na, bir resim dosyas\u0131 y\u00fcklemenin 2 yolu vard\u0131r. Bu yollar \u015funlard\u0131r:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"I-Ortam_Menusu_Ile_Resim_Dosyasi_Yukleme\">I-Ortam Men\u00fcs\u00fc \u0130le Resim Dosyas\u0131 Y\u00fckleme<\/span><\/h3>\n\n\n\n<p>\u0130lki, y\u00f6netim panelinde bulunan&nbsp;<strong>Ortam-&gt;Yeni ekle<\/strong>&nbsp;men\u00fcs\u00fc ile eklemektir:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"262\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari-1024x262.png\" alt=\"WordPress y\u00f6netim panelinden resim dosyas\u0131 y\u00fckleme\" class=\"wp-image-3062\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari-1024x262.png 1024w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari-300x77.png 300w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari-768x196.png 768w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari.png 1347w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>WordPress &#8211; Resim Dosyas\u0131 Y\u00fckleme<\/figcaption><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"II-Blok_Editor_Ile_Resim_Dosyasi_Yukleme\">II-Blok Edit\u00f6r \u0130le Resim Dosyas\u0131 Y\u00fckleme<\/span><\/h3>\n\n\n\n<p>\u0130kinci y\u00f6ntem ise blok edit\u00f6r yard\u0131m\u0131 ile bir i\u00e7erik d\u00fczenlenirken o i\u00e7erik i\u00e7in bir ses dosyas\u0131 eklemektir. Bunun i\u00e7in, edit\u00f6rde:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Ortak bloklar-> Resim<\/strong>\u00a0men\u00fcs\u00fc bulunur ve bu men\u00fcye t\u0131klan\u0131r.<\/li><li>Ya da, &#8220;<em>Blok ara<\/em>&#8221; k\u0131sm\u0131na &#8220;<em>resim<\/em>&#8221; yaz\u0131larak resim blo\u011fu bulunur ve t\u0131klan\u0131r.<\/li><\/ul>\n\n\n\n<p>A\u015fa\u011f\u0131daki resim bu men\u00fcy\u00fc g\u00f6stermektedir:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"976\" height=\"447\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari-2-1.png\" alt=\"WordPress blok edit\u00f6rde resim blo\u011funun se\u00e7imi\" class=\"wp-image-3065\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari-2-1.png 976w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari-2-1-300x137.png 300w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari-2-1-768x352.png 768w\" sizes=\"auto, (max-width: 976px) 100vw, 976px\" \/><figcaption>WordPress &#8211; Resim Blo\u011funun Se\u00e7imi<\/figcaption><\/figure>\n\n\n\n<p>\u201c<strong>Resim<\/strong>\u201d men\u00fcs\u00fc bize, a\u015fa\u011f\u0131da g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, resim dosyas\u0131 y\u00fckleyen\/ekleyen bir blok getirir. Bu blokta g\u00f6rd\u00fc\u011f\u00fcm\u00fcz \u201c<strong>Y\u00fckle<\/strong>\u201d butonu ile bir resim dosyas\u0131 y\u00fckleyebiliriz.<br><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"755\" height=\"248\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari-3.png\" alt=\"WordPress blok edit\u00f6r ile resim dosyas\u0131 y\u00fckleme\" class=\"wp-image-3066\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari-3.png 755w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-ordam-medya-dosyalari-3-300x99.png 300w\" sizes=\"auto, (max-width: 755px) 100vw, 755px\" \/><figcaption>WordPress &#8211; Resim Dosyas\u0131 Blo\u011fu<\/figcaption><\/figure>\n\n\n\n<p>Resim dosyas\u0131 blo\u011fu ile, y\u00fckleme i\u015fleminin yan\u0131s\u0131ra, \u201c<strong>Ortam k\u00fct\u00fcphanesi<\/strong>\u201d botununu kullanarak, k\u00fct\u00fcphaneye gidebilir ve daha \u00f6nce y\u00fcklenmi\u015f resim dosyalar\u0131n\u0131 ekleyebilir, \u201c<strong>Adresten ekle<\/strong>\u201d butonunu ile de, <em>URL<\/em> adreslerini kullanarak, ba\u015fka sitelerden resim dosyalar\u0131 ekleyebilirsiniz.<\/p>\n\n\n\n<p class=\"sc-dikkat\">Bu iki se\u00e7ene\u011fin d\u0131\u015f\u0131nda, tema dosyalar\u0131n\u0131za veya WordPress k\u00fct\u00fcphanesine resim y\u00fcklemek i\u00e7in, bir FTP program\u0131 kullanabilirsiniz. Bu y\u00f6ntem tavsiye edilen bir y\u00f6ntem de\u011fildir, \u00e7\u00fcnk\u00fc bu y\u00f6ntem ile y\u00fcklenen ortam dosyalar\u0131, web sitenizin veritaban\u0131nda g\u00f6r\u00fcnmez.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Sablon_Dosyalarina_Resim_Ekleme\">\u015eablon Dosyalar\u0131na Resim Ekleme<\/span><\/h2>\n\n\n\n<p>\u015eablon dosyalar\u0131m\u0131zda, resim kullanmak olduk\u00e7a s\u0131k kar\u015f\u0131la\u015faca\u011f\u0131m\u0131z bir durumdur. Bir \u015fablon dosyas\u0131na, dinamik olarak ya da statik olarak resim eklemenin bir \u00e7ok yolu vard\u0131r. Bu yollardan en \u00f6nemli olanlar\u0131 a\u015fa\u011f\u0131da a\u00e7\u0131klanm\u0131\u015ft\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"I-_URL_Degeri_Ile_Resim_Ekleme\">I- URL De\u011feri \u0130le Resim Ekleme<\/span><\/h3>\n\n\n\n<p>WordPress temalar\u0131n\u0131n \u015fablon dosyalar\u0131nda, bir resim kullanman\u0131n en basit yolu, resmin <em>URL<\/em> de\u011feri ile birlikte (<code>src=\"URL\"<\/code>), HTML <code>img<\/code> eleman\u0131n\u0131, yal\u0131n haliyle kullanmakt\u0131r. A\u015fa\u011f\u0131da bu kullan\u0131m\u0131n \u00f6rne\u011fi verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img alt=\"\" src=\"https:\/\/sitecenneti.com\/wp-content\/uploads\/2019\/07\/turuncu-iris.jpg\" \/><\/code><\/pre>\n\n\n\n<p>Bir resmin <em>URL<\/em> de\u011ferini bulman\u0131n yollar\u0131ndan biri, y\u00f6netim panelinden, <strong>Ortam-&gt;K\u00fct\u00fcphane<\/strong> men\u00fcs\u00fcne giderek, <em>URL<\/em>&#8216;si gereken resme t\u0131klamakt\u0131r. A\u00e7\u0131lan pencerede, resim hakk\u0131nda \u00e7e\u015fitli bilgiler ile birlikte, resmin <em>URL<\/em> de\u011feri de g\u00f6r\u00fclecektir:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"563\" height=\"566\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-resim-dosyalari-1.jpg\" alt=\"\" class=\"wp-image-3492\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-resim-dosyalari-1.jpg 563w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-resim-dosyalari-1-150x150.jpg 150w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-resim-dosyalari-1-298x300.jpg 298w\" sizes=\"auto, (max-width: 563px) 100vw, 563px\" \/><figcaption>WordPress &#8211; Resim Dosyalar\u0131n\u0131n URL De\u011ferleri<\/figcaption><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"II-_Wp_get_attachment_image_Fonksiyonu_Ile_Resim_Ekleme\">II- Wp_get_attachment_image() Fonksiyonu \u0130le Resim Ekleme<\/span><\/h3>\n\n\n\n<p>\u015eablon dosyalar\u0131na, ortam galerisinden resim getirmenin bir di\u011fer yolu, <a rel=\"noreferrer noopener\" aria-label=\"wp_get_attachment_image() (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/wp_get_attachment_image\/\" target=\"_blank\">wp_get_attachment_image()<\/a> fonksiyonudur.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/wp_get_attachment_image\/\" target=\"_blank\">Wp_get_attachment_image()<\/a> fonksiyonunu, resimleri haz\u0131r bir HTML <code>img <\/code>eleman\u0131 olarak getirir.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/wp_get_attachment_image\/\" target=\"_blank\">Wp_get_attachment_image()<\/a> fonksiyonunu, d\u00f6ng\u00fc i\u00e7inde ve a\u015fa\u011f\u0131daki gibi kullanabiliriz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php echo wp_get_attachment_image( get_the_ID(), 'thumbnail' ); ?><\/code><\/pre>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/wp_get_attachment_image\/\" target=\"_blank\">Wp_get_attachment_image()<\/a> fonksiyonunu yukar\u0131daki gibi kullan\u0131rsak, resim g\u00f6stermek i\u00e7in, \u015f\u00f6yle bir HTML eleman\u0131 olu\u015fturacakt\u0131r:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img\n     width=\"150\"\n     height=\"150\"\n     src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/2016\/11\/sample-150x150.jpg\"\n     class=\"attachment-thumbnail size-thumbnail\" alt=\"\"\n\/><\/code><\/pre>\n\n\n\n<p>Fonksiyonu, d\u00f6ng\u00fc d\u0131\u015f\u0131nda, <em>ID<\/em> de\u011feri 1827 (temsili) olan bir resim i\u00e7in, \u00f6zel boyutlar belirterek, \u015fu \u015fekilde kullanabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php echo wp_get_attachment_image( 1827, Array(640, 480) ); ?><\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"III-_Wp_get_attachment_image_src_Fonksiyonu_Ile_Resim_Ekleme\">III-  Wp_get_attachment_image_src() Fonksiyonu \u0130le Resim Ekleme<\/span><\/h3>\n\n\n\n<p><a rel=\"noreferrer noopener\" aria-label=\"Wp_get_attachment_image_src() (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/wp_get_attachment_image_src\/\" target=\"_blank\">Wp_get_attachment_image_src()<\/a> fonksiyonu; ID de\u011ferini ve boyutlar\u0131n\u0131 belirtti\u011fimiz resmin URL adersini, geni\u015flik ve y\u00fckseklik de\u011ferlerini getirir. Fonksiyonun getirdi\u011fi bu bilgiler ile, resimlere ait HTML elemanlar\u0131n\u0131 biz olu\u015ftururuz.<\/p>\n\n\n\n<p><a rel=\"noreferrer noopener\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/wp_get_attachment_image_src\/\" target=\"_blank\">Wp_get_attachment_image_src()<\/a> &nbsp;fonksiyonunu, a\u015fa\u011f\u0131daki gibi kullan\u0131rsak, bize ID de\u011feri belirtilen resim ile ilgili bilgileri i\u00e7eren bir dizi getirecektir. Bu bilgiler, fonksiyonun varsay\u0131lan boyut de\u011feri olan <em>&#8216;thumbnail&#8217;<\/em> boyutu ile ilgili bilgiler olacakt\u0131r.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php $resim_bilgileri = wp_get_attachment_image_src( 1827 );  ?><\/code><\/pre>\n\n\n\n<p><code>$resim_bilgileri<\/code>&nbsp;de\u011fi\u015fkeninin ta\u015f\u0131d\u0131\u011f\u0131 diziyi g\u00f6rmek i\u00e7in,&nbsp;<code>var_dump( $resim_bilgileri )<\/code>&nbsp;fonksiyonu kullan\u0131rsak, kar\u015f\u0131m\u0131za \u015f\u00f6yle bir dizi \u00e7\u0131kar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>array(4) {\n     [0]=> string(76) \"https:\/\/sitecenneti.com\/wp-content\/uploads\/2019\/06\/Hydrangeas-150x150.jpg\"\n     [1]=> int(150)\n     [2]=> int(150)\n     [3]=> bool(true)\n} <\/code><\/pre>\n\n\n\n<p>Fonksiyonu, \u00f6zel boyut de\u011ferleri i\u00e7in kullanmak istersek de \u015f\u00f6yle kullanabiliriz:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php $resim_bilgileri = wp_get_attachment_image_src( 1827, array('300', '300') );  ?><\/code><\/pre>\n\n\n\n<p><code>$resim_bilgileri<\/code>&nbsp;de\u011fi\u015fkeninin ta\u015f\u0131d\u0131\u011f\u0131 diziyi g\u00f6rmek i\u00e7in,&nbsp;<code>var_dump( $resim_bilgileri )<\/code>&nbsp;fonksiyonu kullan\u0131rsak, kar\u015f\u0131m\u0131za \u015f\u00f6yle bir dizi \u00e7\u0131kar:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>array(4) {\n     [0]=> string(68) \"https:\/\/sitecenneti.com\/wp-content\/uploads\/2019\/06\/Hydrangeas.jpg\"\n     [1]=> int(300)\n     [2]=> int(225)\n     [3]=> bool(false)\n}<\/code><\/pre>\n\n\n\n<p>Ayn\u0131 fonksiyonu,&nbsp;<a rel=\"noreferrer noopener\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-7-wordpress-dongusu-loop\/\" target=\"_blank\">WordPress d\u00f6ng\u00fcs\u00fc<\/a>&nbsp;i\u00e7inde kullanmak istersek \u015f\u00f6yle kullan\u0131r\u0131z:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php echo wp_get_attachment_image_src( get_the_ID(), array('300', '300') ) );  ?><\/code><\/pre>\n\n\n\n<p>Fonkisyonun getirdi\u011fi bilgiler ile, bir resim eleman\u0131 olu\u015fturman\u0131n yayg\u0131n yolu da \u015f\u00f6yldir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n$resim_bilgileri = wp_get_attachment_image_src( 1827 );\nif ( $resim_bilgileri ) : ?>\n    &lt;img\n\tsrc=\"&lt;?php echo $resim_bilgileri[0]; ?>\"\n\twidth=\"&lt;?php echo $resim_bilgileri[1]; ?>\"\n\theight=\"&lt;?php echo $resim_bilgileri[2]; ?>\"\n\t\/>\n&lt;?php endif; ?><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Resimleri_Hizalama\">Resimleri Hizalama<\/span><\/h2>\n\n\n\n<p>Ekledi\u011finiz resimleri sa\u011fa, sola veya merkeze hizalamak i\u00e7in, WordPress standartlar\u0131na uygun olacak \u015fekilde, a\u015fa\u011f\u0131daki CSS s\u0131n\u0131flar\u0131n\u0131 kullanabilirsiniz:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>alignright<\/strong>: Resmi sa\u011fa hizalar.<\/li><li><strong>alignleft<\/strong>: Resmi sola hizalar.<\/li><li><strong>aligncenter<\/strong>: Resmi merkeze hizalar.<\/li><li><strong>alignnone<\/strong>: Hizalama olmaz.<\/li><\/ul>\n\n\n\n<p>Bu CSS s\u0131n\u0131flar\u0131n\u0131n \u00e7al\u0131\u015fabilmesi i\u00e7in, teman\u0131z\u0131n <a rel=\"noreferrer noopener\" aria-label=\"temel stil dosyas\u0131nda (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-2-temel-stil-dosyasi-style-css\/\" target=\"_blank\">temel stil dosyas\u0131nda<\/a> veya kulland\u0131\u011f\u0131n\u0131z ba\u015fka bir stil dosyas\u0131 varsa onda, bu s\u0131n\u0131flar\u0131n kodlanm\u0131\u015f olmas\u0131 gerekmektedir. Bu CSS s\u0131n\u0131flar\u0131,WordPress&#8217;in b\u00fct\u00fcn <a rel=\"noreferrer noopener\" aria-label=\"twenty temalar\u0131n\u0131n (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/1-5-wordpress-temasi-kodlama-ornekleri\/\" target=\"_blank\">twenty temalar\u0131nda<\/a> standart olarak kullan\u0131l\u0131r. Siz bu s\u0131n\u0131flar\u0131n CSS kodlar\u0131n\u0131 olu\u015fturmak i\u00e7in, <a rel=\"noreferrer noopener\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/1-5-wordpress-temasi-kodlama-ornekleri\/\" target=\"_blank\">twenty temalar\u0131n\u0131n<\/a> stil dosyalar\u0131ndan kopya \u00e7ekebilirsiniz.<\/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\u0131daki kod, <em>1827<\/em> (temsili) <em>ID<\/em> numaral\u0131 resmi, k\u00fc\u00e7\u00fck boyutta (<code>'thumbnail'<\/code>) ve sola hizalayarak g\u00f6sterir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php\n\necho wp_get_attachment_image( 1827, \"thumbnail\", \"\", array( \"class\" => \"alignleft\" ) );\n\n?><\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Resimlere_Meta_Bilgileri_Ekleme\">Resimlere Meta Bilgileri Ekleme<\/span><\/h2>\n\n\n\n<p>Y\u00fckledi\u011fimiz resimlerin, <em>ba\u015fl\u0131k<\/em>, <em>alt yaz\u0131<\/em>, <em>a\u00e7\u0131klama<\/em>, <em>alternatif metin<\/em> gibi bilgilerine meta bilgileri denir.<\/p>\n\n\n\n<p>Bir resmin meta bilgilerini girmek i\u00e7in y\u00f6netim panelinden <strong>Ortam-&gt;K\u00fct\u00fcphane<\/strong> sayfas\u0131na gidip resme t\u0131klamak gerekir. Resme t\u0131kland\u0131\u011f\u0131nda \u015f\u00f6yle bir sayfa a\u00e7\u0131lacakt\u0131r:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"522\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-resim-meta-data-1024x522.jpg\" alt=\"\" class=\"wp-image-3548\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-resim-meta-data-1024x522.jpg 1024w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-resim-meta-data-300x153.jpg 300w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-resim-meta-data-768x391.jpg 768w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-resim-meta-data.jpg 1219w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption>WordPress &#8211; Resim Meta Bilgileri<\/figcaption><\/figure>\n\n\n\n<p>Resmin sa\u011f taraf\u0131ndaki alan (k\u0131rm\u0131z\u0131 \u00e7er\u00e7eveli alan), resim i\u00e7in meta bilgileri girebilece\u011fimiz ya da bu bilgileri g\u00fcncelleyebilece\u011fimiz aland\u0131r.<\/p>\n\n\n\n<p>Resimde, k\u0131rm\u0131z\u0131 \u00e7er\u00e7eveli alan\u0131n hemen alt\u0131nda g\u00f6rd\u00fc\u011f\u00fcm\u00fcz &#8220;<strong>Daha fazla detay d\u00fczenle<\/strong>&#8221; linkine t\u0131klad\u0131\u011f\u0131m\u0131zda, \u015f\u00f6yle bir sayfa ile kar\u015f\u0131la\u015f\u0131r\u0131z:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"929\" height=\"1024\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordPress-resim-image-meta-data-929x1024.jpg\" alt=\"\" class=\"wp-image-3549\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordPress-resim-image-meta-data-929x1024.jpg 929w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordPress-resim-image-meta-data-272x300.jpg 272w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordPress-resim-image-meta-data-768x847.jpg 768w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordPress-resim-image-meta-data.jpg 1103w\" sizes=\"auto, (max-width: 929px) 100vw, 929px\" \/><figcaption>WordPress &#8211; Resim Dosyas\u0131n \u0130\u00e7in Daha Fazla Detay D\u00fczenle<\/figcaption><\/figure>\n\n\n\n<p>A\u00e7\u0131lan sayfa, resimde de g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi &#8220;<strong>Ortam\u0131 d\u00fczenle<\/strong>&#8221; sayfas\u0131d\u0131r. Bu sayfa ile de, resim dosyas\u0131na ait meta bilgileri d\u00fczenleyebilirsiniz.<\/p>\n\n\n\n<p>Yukar\u0131daki sayfalarda, resim dosyas\u0131 i\u00e7in girilen meta bilgilerini, <a rel=\"noreferrer noopener\" aria-label=\"\u015fablon dosyalar\u0131m\u0131zda (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-tema-yapimi\/2-1-sablon-template-dosyalari\/\" target=\"_blank\">\u015fablon dosyalar\u0131m\u0131za<\/a> \u00e7a\u011f\u0131rmak i\u00e7in <a rel=\"noreferrer noopener\" aria-label=\"wp_get_attachment_metadata() (yeni sekmede a\u00e7\u0131l\u0131r)\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/wp_get_attachment_metadata\/\" target=\"_blank\">wp_get_attachment_metadata()<\/a> fonksiyonunu kullanabiliriz.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span id=\"Resimlere_Alt_Yazi_Ekleme\">Resimlere Alt Yaz\u0131 Ekleme<\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"I-_Meta_Bilgileri_Ile\">I- Meta Bilgileri \u0130le<\/span><\/h3>\n\n\n\n<p>Yukar\u0131daki ba\u015fl\u0131kta da bahsedildi\u011fi gibi, resimlerin meta bilgilerinden biri de alt yaz\u0131lard\u0131r. Yani resimlere meta bilgileri eklerken alt yaz\u0131 da ekleyebiliyoruz. Bu y\u00f6ntem ile eklenen alt yaz\u0131y\u0131, resim ile birlikte \u015fablon dosyalar\u0131na \u00e7ekmek i\u00e7in, <a rel=\"noreferrer noopener\" href=\"https:\/\/sitecenneti.com\/wordpress\/wordpress-fonksiyonlari\/wp_get_attachment_metadata\/\" target=\"_blank\">wp_get_attachment_metadata()<\/a> fonksiyonu kullan\u0131labilir.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"II-_Blok_Editor_Ile\">II- Blok Edit\u00f6r \u0130le<\/span><\/h3>\n\n\n\n<p>Resimlere alt yaz\u0131 eklemenin bir ba\u015fka yolu da, blok edit\u00f6rd\u00fcr. Blok edit\u00f6r\u00fcn resim bloklar\u0131, resimleri alt yaz\u0131 k\u0131s\u0131mlar\u0131 ile birlikte getirir. Resmin daha \u00f6nce k\u00fct\u00fcphaneden girdi\u011fimiz bir alt yaz\u0131s\u0131 var ise bu alt yaz\u0131 ile gelir yoksa alt yaz\u0131 k\u0131sm\u0131 bo\u015f gelir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da, blok edit\u00f6r ile eklenen bir resmin alt yaz\u0131 k\u0131sm\u0131 g\u00f6sterilmektedir:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img loading=\"lazy\" decoding=\"async\" width=\"718\" height=\"346\" src=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-resimler-altyaz\u0131.jpg\" alt=\"\" class=\"wp-image-3555\" srcset=\"https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-resimler-altyaz\u0131.jpg 718w, https:\/\/sitecenneti.com\/wordpress\/wp-content\/uploads\/sites\/15\/2019\/06\/wordpress-resimler-altyaz\u0131-300x145.jpg 300w\" sizes=\"auto, (max-width: 718px) 100vw, 718px\" \/><figcaption>WordPress &#8211; Resimlere Alt Yaz\u0131 Ekleme<\/figcaption><\/figure><\/div>\n\n\n\n<p>Resim alt yaz\u0131s\u0131 ile birlikte geldi ise, \u00fczerlerine t\u0131klayarak bu alt yaz\u0131y\u0131 de\u011fi\u015ftirebiliriz fakat bu de\u011fi\u015fiklik, resmin k\u00fct\u00fcphaneden eklenen alt yaz\u0131 metas\u0131n\u0131 g\u00fcncellemez. Yani, ayn\u0131 resmi tekrar \u00e7a\u011f\u0131r\u0131rsak, k\u00fct\u00fcphanedeki alt yaz\u0131s\u0131 ile gelecektir.<\/p>\n\n\n\n<p>Edit\u00f6r ile eklenmi\u015f ve <em>ID<\/em> de\u011fer <em>811<\/em> (temsili) olan bir resim, alt yaz\u0131 i\u00e7ermiyorsa, blok edit\u00f6r bu resmi temam\u0131zda g\u00f6stermek i\u00e7in, \u015fu \u015fekilde bir HTML kodu olu\u015fturur:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;figure class=\"wp-block-image\">\n\t&lt;img\n\t\tsrc=\"https:\/\/sitecenneti.com\/wp-content\/uploads\/2012\/06\/ornek-resim.jpg\" \n\t\talt=\"\"\n\t\tclass=\"wp-image-811\"\n\t\tsrcset=\"https:\/\/sitecenneti.com\/wp-content\/uploads\/2012\/06\/ornek-resim.jpg 640w, https:\/\/sitecenneti.com\/wp-content\/uploads\/2012\/06\/ornek-resim-300x225.jpg 300w\"\n\t\tsizes=\"(max-width: 640px) 100vw, 640px\">\n&lt;\/figure>\t<\/code><\/pre>\n\n\n\n<p>Blok edit\u00f6r ile eklenmi\u015f ayn\u0131 resim, alt yaz\u0131l\u0131 ise, edit\u00f6r taraf\u0131ndan \u015fu \u015fekilde bir HTML kodu olu\u015fturulur:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;figure class=\"wp-block-image\">\n\t&lt;img\n\t\tsrc=\"https:\/\/sitecenneti.com\/wp-content\/uploads\/2012\/06\/ornek-resim.jpg\" \n\t\talt=\"\"\n\t\tclass=\"wp-image-811\"\n\t\tsrcset=\"https:\/\/sitecenneti.com\/wp-content\/uploads\/2012\/06\/ornek-resim.jpg 640w, https:\/\/sitecenneti.com\/wp-content\/uploads\/2012\/06\/ornek-resim-300x225.jpg 300w\"\n\t\tsizes=\"(max-width: 640px) 100vw, 640px\">\n       &lt;figcaption>Burada resmin alt yaz\u0131s\u0131 var\u2026&lt;\/figcaption>\n&lt;\/figure><\/code><\/pre>\n\n\n\n<p>Blok edit\u00f6r ile eklenmi\u015f bir resim, ortaya hizalanm\u0131\u015fsa (<code>\"aligncenter\"<\/code>) ve alt yaz\u0131l\u0131 ise \u015f\u00f6yle bir HTML ile g\u00f6sterilir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"wp-block-image\">\n    &lt;figure class=\"aligncenter\">\n\t&lt;img\n\t\tsrc=\"https:\/\/sitecenneti.com\/wp-content\/uploads\/2012\/06\/ornek-resim.jpg\" \n\t\talt=\"\"\n\t\tclass=\"wp-image-811\"\n\t\tsrcset=\"https:\/\/sitecenneti.com\/wp-content\/uploads\/2012\/06\/ornek-resim.jpg 640w, https:\/\/sitecenneti.com\/wp-content\/uploads\/2012\/06\/ornek-resim-300x225.jpg 300w\"\n\t\tsizes=\"(max-width: 640px) 100vw, 640px\">\n       &lt;figcaption>Burada resmin alt yaz\u0131s\u0131 var\u2026&lt;\/figcaption>\n    &lt;\/figure>\n&lt;\/div><\/code><\/pre>\n\n\n\n<p>WordPress&#8217;in \u00fcretti\u011fi bu HTML yap\u0131lar\u0131, resimlere ve alt yaz\u0131lar\u0131na, CSS uygulamak i\u00e7in yeterlidir. Teman\u0131zda, resimler ve alt yaz\u0131lar\u0131 i\u00e7in kullanaca\u011f\u0131n\u0131z stil tamamen sizin CSS yetene\u011finize b\u0131rak\u0131lm\u0131\u015ft\u0131r.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"III-_8220Caption8221_Kisa_Kodu_Ile\">III- &#8220;Caption&#8221; K\u0131sa Kodu \u0130le<\/span><\/h3>\n\n\n\n<p><code>caption<\/code> k\u0131sa kodu ile, ister blok edit\u00f6r\u00fcn k\u0131sa kod blo\u011fu ile i\u00e7eriklerimize, istersek de \u015fablon dosyalar\u0131m\u0131za alt yaz\u0131l\u0131 resimler ekleyebiliriz.<\/p>\n\n\n\n<p class=\"sc-dikkat\">!!! A\u015fa\u011f\u0131da verilen k\u0131sa kod \u00f6rneklerinin do\u011fru \u00e7al\u0131\u015fmas\u0131 i\u00e7in, kodlardaki <strong>kaption<\/strong> ifadesinin <strong>caption<\/strong> ifadesi ile yer de\u011fi\u015ftirmesi gerekmektedir.<\/p>\n\n\n\n<p>WordPress blok edit\u00f6r\u00fcn\u00fcn, <em>k\u0131sa kod blo\u011fu<\/em> ile <code>caption<\/code> k\u0131sa kodunun genel kullan\u0131m mant\u0131\u011f\u0131 \u015f\u00f6yledir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>[kaption]&lt;resim> Alt yaz\u0131s\u0131[\/kaption]<\/code><\/pre>\n\n\n\n<p>WordPress blok edit\u00f6r\u00fcn\u00fcn, <em>k\u0131sa kod blo\u011fu<\/em> ile <code>caption<\/code> k\u0131sa kodunun genel kullan\u0131m\u0131 \u015fu \u015fekildedir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>[kaption id=\"altyazi_id\" class=\"altyazi-sinifi\" align=\"alignnone\" width=\"400\"]\n    &lt;img src=\"https:\/\/sitecenneti.com\/wp-content\/uploads\/2019\/06\/balonlar.jpg\" alt=\"Balonlar resmi\" \/>\n    Alt yaz\u0131 metni burada yer al\u0131r.\n[\/kaption]<\/code><\/pre>\n\n\n\n<p><code>Caption<\/code> k\u0131sa kodunu, \u015fablon dosyalar\u0131n\u0131zda kullanmak isterseniz, <code>img_caption_shortcode()<\/code> fonkisyonundan yard\u0131m istemek zorundas\u0131n\u0131z demektir.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da, <code>img_caption_shortcode()<\/code> fonksiyonu yard\u0131m\u0131 ile, yukar\u0131da verilen <code>caption<\/code> k\u0131sa kodunun e\u015fiti verilmi\u015ftir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;?php \n$url = '&lt;img src=\"https:\/\/sitecenneti.com\/wp-content\/uploads\/2019\/06\/balonlar.jpg\" alt=\"Balonlar resmi\" \/>';\n$argumanlar = array(\n\t\"id\" => \"altyazi_id\",\n\t\"align\" => \"alignnone\",\n\t\"caption\" => \"Alt yaz\u0131 metni burada yer al\u0131r.\",\n\t\"class\" => \"altyazi-sinifi\",\n\t\"width\" => \"400\",\n);\n\necho img_caption_shortcode($argumanlar , $url);\n?><\/code><\/pre>\n\n\n\n<p>Yukar\u0131da verilen her iki k\u0131sa kod da, teman\u0131zda \u015fu \u015fekilde bir HTML kodu \u00fcretir:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;figure id=\"altyazi_id\" aria-describedby=\"caption-altyazi-id\" style=\"width: 399px\" class=\"wp-caption alignnone altyazi-sinifi\">\n\t&lt;img src=\"http:\/\/localhost\/benimsitem\/wp-content\/uploads\/2019\/06\/balonlar-3-1.jpg\" alt=\"Balonlar resmi\">\n\t&lt;figcaption id=\"caption-altyazi-id\" class=\"wp-caption-text\">&lt;br>\n\t\tAlt yaz\u0131 metni burada yer al\u0131r.&lt;br>\n\t&lt;\/figcaption>\n&lt;\/figure><\/code><\/pre>\n\n\n\n<p>Yukar\u0131daki HTML yap\u0131s\u0131nda, <code>wp-caption<\/code> ve <code>wp-caption-text<\/code> s\u0131n\u0131flar\u0131 her zaman \u00fcretilen sabit s\u0131n\u0131flard\u0131r. Bu s\u0131n\u0131flar\u0131 kullanarak, b\u00fct\u00fcn alt yaz\u0131l\u0131 \u00e7\u0131kt\u0131lar\u0131m\u0131zda ge\u00e7erli olacak bir CSS uygulamak isteyebiliriz.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span id=\"Caption_Kisa_Kodunun_Ayarlari\">Caption K\u0131sa Kodunun Ayarlar\u0131<\/span><\/h3>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"width\">width<\/span><\/h4>\n\n\n\n<p>(<em>Zorunludur<\/em>.) <code>Caption<\/code> k\u0131sa kodunun \u00fcretti\u011fi HTML eleman\u0131n pixel cinsinden geni\u015fli\u011fidir. En k\u00fc\u00e7\u00fck de\u011feri 1&#8217;dir. Caption k\u0131sa kodunda, <strong>width<\/strong> \u00f6zelli\u011fi belirtilmezse, \u00fcretilmesi gereken HTML \u00fcretilmeyecektir (<code>&lt;figure&gt;<\/code> ve <code>&lt;figcaption&gt;<\/code> elemanlar\u0131 \u00fcretilmez). Varsay\u0131lan de\u011feri yoktur.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"id\">id<\/span><\/h4>\n\n\n\n<p><code>Caption<\/code> k\u0131sa kodunun \u00fcretti\u011fi ana HTML eleman\u0131na (<code>figure<\/code>) ait <em>id<\/em> de\u011feridir. Bu <em>id<\/em> de\u011ferini kullanarak, o elemana \u00f6zel CSS uygulayabilirsiniz. Varsay\u0131lan de\u011feri yoktur.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"class\">class<\/span><\/h4>\n\n\n\n<p><code>Caption<\/code> k\u0131sa kodunun \u00fcretti\u011fi HTML eleman\u0131na (<code>figure<\/code>) ait <em>class<\/em> de\u011feridir. Bu <em>class<\/em> de\u011ferini kullanarak, CSS uygulayabilirsiniz. Varsay\u0131lan de\u011feri yoktur.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><span id=\"align\">align<\/span><\/h4>\n\n\n\n<p><code>Caption<\/code> k\u0131sa kodunun \u00fcretti\u011fi HTML eleman\u0131n\u0131n, sayfada hizalanmas\u0131 gereken y\u00f6n\u00fc belirler.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>alignnone<\/code> : Hizalama olmaz.<\/li><li><code>aligncenter<\/code> : Merkeze hizalar.<\/li><li><code>alignright<\/code> : Sa\u011fa hizalar.<\/li><li><code>alignleft<\/code> : Sola hizalar.<\/li><\/ul>\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>WordPress temalar\u0131na, bir \u00e7e\u015fit ortam dosyas\u0131 olan resim dosyalar\u0131 ekleme i\u015flemi geni\u015f bir \u015fekilde anlat\u0131lm\u0131\u015ft\u0131r.<\/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":[154,150,149],"class_list":["post-3481","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tema-yapimi","tag-caption-kisakodu","tag-ortam-dosyalari","tag-resim-dosyalari"],"_links":{"self":[{"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/3481","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=3481"}],"version-history":[{"count":0,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/posts\/3481\/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=3481"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/categories?post=3481"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sitecenneti.com\/wordpress\/wp-json\/wp\/v2\/tags?post=3481"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}