Nerelerdeydim, Yeni Tema, Yeni Yollar

Merhaba arkadaşlar, uzun zamandır yazılarıma ara vermiştim onun yerine YouTube kanalım için Html, CSS, PSD to CSS videoları hazırlıyordum. Şu sıralar ona da ara verdim çünkü yoğun tempoda çalışırken istediğim kalitede içerik üretemiyorum. Ama yeni videoların içeriklerini yarı yarıya hazırladım ve yakın zaman da videoları çekip yüklemeye devam edeceğim.

Uzun zamandır bloguma yazı yazmamın bir sebebi de kullandığım temamdı. Diğer temam(BS Kişisel) işlevsel olarak güzeldi fakat tasarımsal olarak doğruyu söylemek gerekirse vasattı. Ben çoğunlukla arayüz kodlama konusunda kendimi geliştirdiğim için gelen tasarımı kodlamaya odaklı çalışıyordum hep ve hiç tasarımsal olarak düşünmüyordum o temayı yaparken de düşünmemiştim. Ve sonunda bu tema böyle olmaz dedim. Çünkü yazı kısımlarına girdiğim zaman ben bile rahatça okuyamıyordum yazıları beni takip eden insanlar ne yapsın diyerek yeni tema için kollarımı sıvadım. Tabii bu temayı yapmadan önce yani BS Kişisel temasından önce neredeyse 30 tane tema yaptım hem kendimi geliştirmek yeni şeyler denemek ve freelancer hizmet verdiğim müşterilerim için temalar hazırladım. Bu temaları hazırlarken de Dribble, Behance ve ThemeForest dan çokça tasarım inceledim. Tasarım trendlerini araştırdım. Kullanıcılar için az çok hangisinin en rahatı olacağını seçmeye çalıştım. Tabii ki bu tasarım olayının belkide %10 u 🙂 Hala araştırmak, öğrenmek gerek.

Hem tasarımsal hemde kodlama olarak öğrendiklerimi birleştirerek kendimce çok beğendiğim bir WordPress teması hazırladım. Kısaca temanın özelliklerine değineceğim çünkü optimize konusunda yapacağım bir kaç şey ve hazırlamaya devam ettiğim portfolyo sayfam var.

Kısaca temamın özellikleri; 

  • Temada hiç bir kodlama hatası yok HTML ve CSS olarak Valid yapıdadır.
  • Responsive(Mobil Uyumlu)
  • Hızlı ve SEO uyumlu
  • Temaya özel geniş bir yönetim paneli hazırladım her şeyin ayarlanabildiği.

Portfolyo ve 404.php kısmını hallettikten sonra temanın özelliklerini anlattığım bir video hazırlayıp YouTube kanalıma yükleyeceğim.

Bu arada BS Kişisel WordPress temasını paylaşmamı isterseniz yorum atabilirsiniz. Yorumlara göre temayı paylaşacağım.

Artık kişisel yazılara çokça yer vereceğim. Yazımı sonuna kadar okuduğunuz için teşekkür ederim.

Görüşmek üzere..

WpGünlüğü #2 Eklentisiz Önceki Yazı Bölümü

AdsızYazı sayfalarınıza resimdeki gibi bir alan eklemek istiyorsanız fakat bunu eklenti ile yapmak istemiyorsanız bu yazım tam size göre. Yazı sayfalarınıza önceki yazı bölümü eklemek için bir çok eklenti var fakat böyle bir işlem için eklenti kullanmak yerine functions.php dosyasına aşağıda vereceğim kodları eklerseniz eklentisiz bir şekilde yazınızın bir alt paragrafında önceki yazı bölümünü göreceksiniz.

function baransomakli_onceki_yazi_tavsiyesi($content) {
if ( !is_single() ) return $content;
$onceki_yazi = get_previous_post(true);
if (!empty( $onceki_yazi )) {
$etiketler = get_the_tags($onceki_yazi->ID);
if ($etiketler) {
$i = 0;
foreach($etiketler as $etiket) {
$e[] = $etiket->name;
$i++;
if ($i == 3) break;
}
if ($i == 1) {
$ilgi = $e[0];
}elseif ($i == 2) {
$ilgi = $e[0] . ' ve '. $e[1];
}elseif ($i == 3) {
$ilgi = $e[0] . ', '. $e[1] . ' ve ' . $e[2];
}
$content .= '<div class="oncekiyazi">Bu yazımızı beğendiyseniz, bu kategoride yer alan <a href="' . get_permalink( $onceki_yazi->ID ) .'" title="'. $onceki_yazi->post_title . '">' . $onceki_yazi->post_title . '</a> başlıklı '.$ilgi. ' konularında bilgi veren bir önceki yazımızı da okumanızı tavsiye ederiz.</div>';
}else{
$content .= '<div class="oncekiyazi">Bu yazımızı beğendiyseniz, bu kategoride yer alan <a href="' . get_permalink( $onceki_yazi->ID ) .'" title="'. $onceki_yazi->post_title . '">' . $onceki_yazi->post_title . '</a> başlıklı bir önceki yazımızı da okumanızı tavsiye ederiz.</div>';
}
}
return $content;
}
add_filter('the_content', 'baransomakli_onceki_yazi_tavsiyesi',99, 1); 

Önceki yazı alanını düzenlemek isterseniz “oncekiyazi” sınıflı divi css ile düzenleyebilirsiniz.

WpGünlüğü #1 İstenmeyen Kategori Yazılarını Anasayfada Gizleme

Uzun zaman önce söylediğim WordPress Günlüğü yazı dizisine başlıyorum. WordPress Günlüğü ile ilgili yazımı buraya tıklayarak okuyabilirsiniz.

Bu yazımda WordPress’te istemediğiniz kategorideki yazıları anasayfanızda ki döngüde göstermemizi anlatacağım. Hemen bunu nerede kullanacağız diyeceğinizi duyar gibiyim. Mesela BSKisisel temamda olduğu gibi son dinlediklerim kategoriniz var ise yazı kısmına sadece videoları ekleyebilirsiniz ya da galeri kategoriniz var ise o kategoriye sadece resim eklersiniz. Bu şekilde kategorilerinize sadece yazı ve resim eklerseniz anasayfada kötü gözükecektir.

Şimdi vereceğim küçük kod satırı ile bu kötü görüntüyü kaldırabilirsiniz. İlk olarak temanızın index.php dosyasına girin aşağıda verdiğim döngü kodunu bulun.

  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> 

Döngüyü bulduktan sonra döngü kodunun üst satırına

 <?php query_posts($query_string . '&cat=-328'); ?> 

328 yazan yeri anasayfada göstermek istemediğiniz kategori ID’sine göre düzenleyiniz. Bu işlemleri yaptıktan sonra göstermek istemediğiniz kategori yazıları anasayfanızda gözükmeyecektir.

WordPress Özel Sayfa Oluşturma

Merhaba dostlar, ilk kez bir yazıma böyle başlıyorum hadi hayırlısı 🙂  Artık wordpress, arayüz geliştirme konularında freelancer işler aldığım için siteme bir portfolyo ve wordpress tema yaptırmak isteyenlerin bakacağı bir sayfa yapacaktım. Bu sayfayı yapmak için de wordpress için özel bir sayfa oluşturmam gerekiyordu. Özel sayfadan kastım portfolyo, iletişim sayfaları oluşturmak isteyen fakat oluşturduğu sayfada sidebar olmasın ya da ek şeyler olsun istiyorsanız benim gibi özel sayfa oluşturmalısınız. Tabii bu sayfayı wordpress panelden eklerden şablon olarak ekleyeceğiz.

Sayfayı oluşturmadan önce ne için kullanacağınızı seçmelisiniz. Ben sayfa yapımını anlatırken örnek olarak portfolyo yapımını kullanacağım. Artık sayfamızı hazırlamaya başlayalım. İlk olarak wordpress tema klasörümüze sayfaismi.php adında bir .php uzantılı bir dosya oluşturuyoruz. Oluşturduğumuz dosyayı Notepad++, Sublime Text gibi bir editör yardımıyla açarak, en başa aşağıda vereceğim kodları yazıyoruz.


<?php
/*
Template Name: Portfolyo
*/
?>

Bu kodları yazdıktan sonra wordpress tema dosyanızda ki page.php dosyasında yazan kodları hiç değiştirmeden kopyalayıp portfolyo.php(oluşturduğumuz dosya) dosyasında ki ?> tagının altına yapıştırıyoruz. Tabii yapacağımız sayfada sidebar olmasını istemediğimiz için

<?php get_sidebar(); ?>

kodunu kaldırıyoruz.
Ben kendi kodladığım SomakliV1 temasıyla yaptım bu işlemleri. portfolyo.php dosyamızın son hali aşağıda ki gibi.

<?php
/*
Template Name: Portfolyo
*/
?>
<?php get_header(); ?>
<div id="genel">
<div id="sol">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div id="icerik">
<div class="sol-baslik" style="width:98.5%;"><span class="iBaslik"><h1><?php the_title(); ?></h1></span> </div>
<div class="yBilgiler" style="width:99%;">
<div class="yYorum"><?php comments_popup_link(__('Yorum Yapılmamış.'),__('1 Yorum Yapılmış.'), __('%'), 'comments', __('X')); ?> </div>
<div class="yYazar">Yazar: <?php the_author(''); ?></div>
<div class="yTarih"><?php the_time('j F Y'); ?></div>
<div class="temizlik"></div>
</div>
<div class="yMakale" style="width:99%;">
<?php the_content(); ?>
<div class="etiket">
Etiketler : <?php the_tags( '', ', ', ''); ?>
<div class="temizlik"></div>
</div>
<div class="temizlik"></div>
<h2 class="yorumlar">Yorumlar</h2>
<?php comments_template(); ?></div>
<div class="temizlik"></div>
</div>
<div class="temizlik"></div>
</div>
<?php endwhile; else: ?>
<p><?php _e('Sonuç Bulunamadı.'); ?></p>
<?php endif; ?>
</div>
<div class="temizlik"></div>
</div>
<?php get_footer(); ?>

sol-baslik, yBilgiler sınıflarına sırasıyla style=”width:98.5%;” ve  style=”width:99%;” özellikleri ekledik. Bunu yapmamızın sebebi sidebarı kaldırdığımız için sol tarafın genişliği az kalacaktı.  style=”width:98.5%;” ve  style=”width:99%;” kodlarını ekleyerek genişliği arttırdık.

Özel sayfa oluşturmak için kod yazma serüvenimiz burada sona eriyor. Şimdi tek yapmamız gereken şey kaldı oda wordpress panelden sayfa eklemek. WordPress panelimize giriş yapıyoruz sonra sayfalar menüsüne girip oradan yeni ekle diyoruz. Sayfamızın başlığını, içeriğini yazdıktan sonra sağ taraftaki sütunda bulunan “Şablon” bölümünden Portfolyo seçeneğini seçiyoruz ve yayımla diyoruz. WordPress temamız için yapmış olduğumuz özel sayfamız artık hazır.

SomakliV1 Seo Uyumlu, Hızlı, Şık Kişisel WordPress Teması

Merhaba arkadaşlar,  twitter üzerinden de sizlere söylediğim SomakliV1 temamı dün tamamen bitirdim. Bu benim ilk wordpress temam olduğu için bazı eksiklikler var. Bu eksiklikleri V2 sürümünde artıya çevireceğim. Temayı hazırlarken sorularımı cevapsız bırakmayan ve yardımını esirgemeyen Burak İşçi’ye teşekkür ederim.

Latest Performance Report for http baransomakli.com GTmetrix

Temayı sevdiğim renkler üzerinden yaptım. Turuncu ağırlıklı bir tema oldu 🙂 Temaya bir yönetim paneli yaptım. Yönetim panelinden, logonuzu ve faviconunuzu  değiştirebiliyorsunuz.

Bu temayı yaparken zaman sıkıntım olduğundan elimden gelenin en iyisini yapmaya çalıştım. İkinci temada SomakliV2 olacak o tema da özellik olarak wordpress in çoğu şeyini kullanmayı planlıyorum şimdiden çalışmalara başladım yakın zaman da SomakliV2’nin arayüzünden görseller paylaşacağım.

SomakliV1 Özellikler


  • Temada hiç bir kodlama hatası yoktur. Html ve CSS olarak validdir.
  • Sadeliğinin yanın da hızlı ve SEO uyumludur.
  • CSS Sprite tekniği kullanılmıştır.
  • Temaya özel yönetim paneli.
  • Sade ve hoş bir tasarım.
  • WordPress Pagenavi eklentisi temaya entegre edilerek hız konusunda tema iyileştirilmiştir.
  • Temayı kullanmaya başladığınız da varsayılan olarak header da logo gelir.
  • Tarayıcı uyumludur.
  • Tema panelinden ayarlanabilir sosyal ağ bileşeni.

 

SomakliV1 ve Yönetim Panelinden Görüntüler

kisiselasdicsayfav1  paneladmin


Zaten bu yazıyı okurken temada sitemde aktif olacak. Ve bu temayı ücretsiz indirebileceksiniz 🙂 Sizden tek ricam footerdaki ismimi ve linkimi kaldırmamanız. İkinci temam da istediğiniz özellikleri, SomakliV1 hakkında ki önerilerinizi, düşüncelerinizi veya bu temada gördüğünüz hataları yorum olarak belirtirseniz sevinirim.

DEMO

İNDİR

WordPress Öne Çıkarılan Görsel

Merhabalar dostlar, az önce WordPress’e bir tema entegre ediyordum index.php de uğraşırken öne çıkarılan görsel eklemeye geldi sıra, bende bu olayı blogumda anlatayım dedim.

Öne Çıkarılan Görsel Nasıl Ekleriz?

İlk önce index.php’yi açıyoruz ve öne çıkarılan görseli nerede göstermek istiyorsanız size vereceğim kodları oraya ekliyorsunuz.


<a href="<?php the_permalink(); ?>">

<?php if (has_post_thumbnail() ) { the_post_thumbnail(); } else { ?>

<img src="<?php bloginfo("template_url"); ?> /static/images/yoksa.png" alt="Yazı Resmi" class="makale-resim" >

<?php } ?>

</a>

Kodumuzu başarıyla ekledikten sonra functions.php’ye fonksiyonlar eklememiz gerekiyor. Size verdiğim kodları functions.php de <?php ?> tagları arasına ekliyorsunuz. Ve başarıyla temanıza öne çıkarılan görsel eklemiş oluyorsunuz.


add_theme_support( 'post-thumbnails' );

set_post_thumbnail_size( 120, 120 );

set_post_thumbnail_size kodunda parantez içinde olan 120, 120 sırasıyla genişlik ve yüksekliktir.

WordPress Profilinize Fotoğrafı Ekleme

Biliyorsunuz ki wordpress tabanlı sitelerde seçtiğiniz profil fotoğrafıyla yorum yapabiliyorsunuz. Hem bir profiliniz olmuş oluyor, hemde boş bir avatardan da kurtulmuş oluyorsunuz.

Şimdi nasıl wordpress profilimize fotoğraf ekleyeceğimizi göreceğiz. Bu olay cidden çok basit. WordPress‘in kendi web sitesinden bir profil oluşturuyoruz ve Gravatar‘ın web sitesine wordpress.com’dan oluşturduğumuz hesabımız ile giriş yapıyoruz. Gerekli alanları kendimize göre dolduruyoruz. Otomatikman wordpress.com’a kayıt olduğumuz mail adresi ile aktif oluyor.  Wordpress tabanlı bir web sitede yorum yaparken mail adresi yerine kayıt olduğunuz adresi yazarsanız başarılı bir şekilde yorumunuz da profil fotoğrafınız bulunacaktır.

Kendi blogunuz da profil fotoğrafınızın aktif olmasını istiyorsanız WordPress Admin Paneline girerek Kullanıcılar menüsünden profiliniz sekmesine girerek e-posta alanını WordPress.com’a kayıt olduğunuz e-posta adresinizi yazarsanız aktif olacaktır.

Şu Sıralar Ne Yapıyorum?

Merhaba arkadaşlar, şu ana kadar hiçbir yazıma böyle başlamamıştım. Zaten bu yazımda birden çok ilke imza atacağız. İlk kişisel yazım olacak diyebilirim hakkımda yazımdan sonra 🙂  Blog kişisel blog fakat hiç kişisel yazı yok. Artık daha sık kişisel yazılar gelecek.

Fark ettiyseniz en son nerdeyse 2 ay önce SEO Yöntemleri adlı bir yazı yazmıştım. Ve 2 aydır blogumda aktif değilim bu benim için büyük bir eksi oldu ama en yakın zamanda toparlayacağıma inanıyorum.

Bu yazımda şu anda neler yaptığımı anlatacağım. Çoğunuz biliyorsunuz ki ben arayüz geliştirme ve WordPress konusunda kendimi geliştiriyorum. Yazın maalesef bir – bir buçuk ay kadar bu işlerden uzak kalmak zorunda kaldım. Biliyorsunuz ki HTML – CSS tamamen pratik işidir. Ara verdiğim için pratikliğim gitti. Ben de yeniden başlayayım dedim ve CSS eğitimlerini tekrardan izlemeye ve örnekler yapmaya başladım. Çoktan bitirdim ve tekrardan arayüz dökmeye başladım. Hatta şuanda 4 tane arayüzün kodlamasını bitirdim ve WordPress tema haline getireceğim. Tabii ki HTML – CSS ile yetinmiyorum şu an da Javascript ve jQuery’i üzerinde çalışmalar da yapıyorum.

2 aydır blogum ile ilgilenmeyince blogumda daha da aktif olmaya karar verdim. Bunu da, Html – CSS, Javascript, jQuery, PHP ve WordPress ile ilgili araştırdıklarımı, eğitimleri izlerken edindiğim bilgileri, arayüz kodlarken yaptıklarımı ve karşılaştığım sorunların çözümlerini sizlerle notlar ve ipuçları şeklinde paylaşacağım. Bu fikrin benim için daha zaman ayırabileceğim ve takipçilerim için daha yararlı olacağına inandığım bir şey olduğunu düşünüyorum.

Yazımı okuduğunuz için teşekkür ederim. Bu konuda blogum için sizin de fikirlerinize ihtiyacım var yorum olarak fikirlerinizi benim ile paylaşırsanız sevinirim. 

 

WordPress Öğrenmek & Kefşetmek

Bu makalemizde WordPress Admin Panelini açıklamalar ile keşfedeceğiz.Yönetim Paneli

WP yönetim paneline tarayıcınıza siteadi.com/wp-admin yazarak ulaşabilirsiniz.

Yazılar

Web sitemizde yer alan yazıları güncellemek ve yeni yazılar eklemek için kullanacağımız bölümdür.

Ortam

Web sitemizde yer alan resimlerin bulunduğu kısımdır. Burada resim ekleyebilir ve sitemizde yer alan mevcut resimleri görebilir, silebilir, düzenlemeler yapabiliriz.  Sunucu veya hostumuza yüklediğimiz tüm resimler wp-content/uploads klasörü içerisinde bulunur.

Bağlantılar

Bu bölüm takip ettiğimiz sitelerin adreslerini belirtmek için kullanabileceğimiz kullanışlı bir kısımdır.  Bölümde yer alan özellikler sayesinde sitemizde istediğimiz alanlara bağlantılar verebiliriz.

Sayfalar

Sitemize yeni sayfalar ekleyip mevcut sayfaları düzenleyebilmemize imkan sağlayan bir bölümdür.

Yorumlar

Sitemizi ziyaret edenlerin yaptığı yorumlara ulaşabileceğimiz alandır. Bu alanda, yorumları onaylayabilir, silebilir, düzenleyebilir, bekleyen yorumlara müdahale edebiliriz.

Görünüm

Bu alana kısaca görsel tasarım alanı diyebiliriz. Tema dosyaları, menüler, bileşenler, eklentiler ve temaları bu bölümde yönetebilir, çeşitli müdahalelerde bulunabiliriz.

Eklentiler

Yüklü eklentileri görebileceğimiz ve eklenti yükleyebileceğimiz alandır. Burada, eklentileri aktif ve pasif yapabiliriz.

Kullanıcılar

Sitemize üye olan userleri/kullanıcıları görebileceğimiz üyelere görev verebileceğimiz bir alandır. Burada, üye ekleyebilir ve silebiliriz.

Araçlar

Bazı işlerimizi kolaylaştırabileceğimiz araçların bulunduğu alandır. Dışa ve İçeri aktarma gibi özellikleri bulunduğu kısımdır. Bir siteden diğer siteye içeriklerimizi aktarmaya ve almaya yardımcı olur.

Ayarlar

 

Sitemizin temel ayarlarının bulunduğu kısımdır.  Site başlığı, slogan, tarih saat biçimi ve benzeri genel ayarların bulunduğu bölümdür.