wordpress tema Archives - gurmezin sci-tech-art

WordPress Excerpt Sadeleştirmesini Kısıtlama

Kas 022014

2.566 views

Bildiğiniz gibi WordPress ana sayfasında yazıları özet halinde (wordpress excerpt mod) göstermek isterseniz, bir çok html yaftası

&lt;a&gt;, &lt;h&gt;, &lt;strong&gt;, vb

1	<a>, <h>, <strong>, vb

etkisiz hale gelir ve özet yazı sade bir görünüm kazanır.
Eğer siz de benim gibi bu uygulamayı biraz abartılı bulanlardansanız, birazdan aktaracağım çözüm sizin de işinize yarayabilir.

Bu çözümün kodlarını hazırlayan kişi Boutros AbiChedid. İlgili kodları 2011 yılında yazmış ve WordPress 3.1.3 sürümüne kadarki testlerini de yapmış. Aynı kodları ben şu anda WordPress 4.0 üzerinde kullanıyorum. Önceki bir kaç sürümde de hiç bir sorun yaşamamıştım.

Excerpt modundaki sadeleştirmeyi yapan orijinal fonksiyon: get_the_excerpt($text) fonksiyonu. Boutros AbiChedid, bu fonksiyonun istenen fonksiyonla yer değiştirmesini sağlıyor. Fonksiyonun içeriğindekileri yorumlamak için fazla uzman olmaya bile gerek yok.

custom_wp_trim_excerpt($text) fonksiyonun içinde yer alan allowed_tags değişkenine, yazı özetinde hangi html işlemlerinin kullanılabileceğini tanımlıyorsunuz.

Özet yazının uzunluğunu $excerpt_word_count değişkeni aracılığıyla değiştirebilirsiniz. Özetler için varsayılan sözcük sayısı 55 kelimedir.

Yazı özetinin sonuna eklenecek işareti de $excerpt_end değişkeniyle tanımlamanız mümkün.

Tüm kod aşağıda yer alıyor:

/******************************************************************************
* @Author:BoutrosAbiChedid 
* @Date: June 20, 2011
* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/
* @Description: Preserves HTML formating to the automatically generated Excerpt.
* Also Code modifies the default excerpt_length and excerpt_more filters.
* @Tested: Up to WordPress version 3.1.3
*******************************************************************************/
function custom_wp_trim_excerpt($text) {
$raw_excerpt = $text;
if ( '' == $text ) {
 //Retrieve the post content. 
 $text = get_the_content('');
 
 //Delete all shortcode tags from the content. 
 $text = strip_shortcodes( $text );
 
 $text = apply_filters('the_content', $text);
 $text = str_replace(']]&gt;', ']]&gt;', $text);

/******************************************************************************

* @Author:BoutrosAbiChedid

* @Date: June 20, 2011

* @Websites: http://bacsoftwareconsulting.com/ ; http://blueoliveonline.com/

* @Description: Preserves HTML formating to the automatically generated Excerpt.

* Also Code modifies the default excerpt_length and excerpt_more filters.

* @Tested: Up to WordPress version 3.1.3

*******************************************************************************/

function custom_wp_trim_excerpt($text) {

$raw_excerpt = $text;

if ( '' == $text ) {

//Retrieve the post content.

$text = get_the_content('');

//Delete all shortcode tags from the content.

$text = strip_shortcodes( $text );

$text = apply_filters('the_content', $text);

$text = str_replace(']]>', ']]>', $text);

$allowed_tags = '&lt;p&gt;,&lt;br&gt;,&lt;a&gt;,&lt;h1&gt;,&lt;strong&gt;,&lt;b&gt;'; /*** MODIFY THIS. Add the allowed HTML tags separated by a comma.***/

1	$allowed_tags = '<p>,<br>,<a>,<h1>,<strong>,<b>'; /* MODIFY THIS. Add the allowed HTML tags separated by a comma.*/

$text = strip_tags($text, $allowed_tags);
 $excerpt_word_count = 79; /*** MODIFY THIS. change the excerpt word count to any integer you like.***/
 $excerpt_length = apply_filters('excerpt_length', $excerpt_word_count);

 $excerpt_end = '[...]'; /*** MODIFY THIS. change the excerpt endind to something else.***/
 $excerpt_more = apply_filters('excerpt_more', ' ' . $excerpt_end);

$text = strip_tags($text, $allowed_tags);

$excerpt_word_count = 79; /*** MODIFY THIS. change the excerpt word count to any integer you like.***/

$excerpt_length = apply_filters('excerpt_length', $excerpt_word_count);

$excerpt_end = '[...]'; /*** MODIFY THIS. change the excerpt endind to something else.***/

$excerpt_more = apply_filters('excerpt_more', ' ' . $excerpt_end);

$words = preg_split("/[nrt ]+/", $text, $excerpt_length + 1, PREG_SPLIT_NO_EMPTY);
 if ( count($words) &gt; $excerpt_length ) {
 array_pop($words);
 $text = implode(' ', $words);
 $text = $text . $excerpt_more;
 } else {
 $text = implode(' ', $words);
 }
 }
 return apply_filters('wp_trim_excerpt', $text, $raw_excerpt);
 }
 remove_filter('get_the_excerpt', 'wp_trim_excerpt');
 add_filter('get_the_excerpt', 'custom_wp_trim_excerpt');

$words = preg_split("/[nrt ]+/", $text, $excerpt_length + 1, PREG_SPLIT_NO_EMPTY);

if ( count($words) > $excerpt_length ) {

array_pop($words);

$text = implode(' ', $words);

$text = $text . $excerpt_more;

} else {

$text = implode(' ', $words);

}

return apply_filters('wp_trim_excerpt', $text, $raw_excerpt);

}

remove_filter('get_the_excerpt', 'wp_trim_excerpt');

add_filter('get_the_excerpt', 'custom_wp_trim_excerpt');

Yukarıdaki kodun son iki satırında orijinal kod fonksiyon listesinden siliniyor ve onun yerine yeni fonksiyon atanıyor.

Aşağıdaki ilk resimde özet yazının orijinal hali yer alıyor. Tamamiyle sade ve gösterişsiz (biraz da kullanışsız ):

Aşağıdaki resimde ise yukarıdaki kod uygulandıktan sonra aynı özet yazının yeni görünümü yer alıyor. Uygulama sonrasında özet içindeki linkler artık aktif.

İsterseniz yukarıdaki kodu aynen yavru temanızın functions.php dosyasına ekleyebilir, ya da isterseniz izin vereceğiniz özellikleri arzunuza göre değiştirdikten sonra kopyalarsınız. Seçim size kalmış!

Umarım işinize yarar.

Beni izlemeyi unutmayın!

ahmet aksoy

Ana Sayfada Thumbnail Görüntüleme

wordpress, wordpress tema Yanıt yok »

Kas 022014

2.244 views

Twenty Fourteen teması thumbnail (küçük resim) için hazır bir çözüm sunmuyor bize.

Daha önce temamızın anasayfasında yazıların özet olarak görünmesini (excerpt mod) sağlamıştık. Ancak bu özetlerin yanında küçük resimler görünmüyor.

http://www.dognmonkey.com/techs/twenty-fourteen-theme-customization.html adresindeki makalenin yazarı bu soruna nasıl çözüm bulacağımızı anlatıyor.

1- Bu çözüm için öncelikle get_the_image.php dosyasına ihtiyaç var. Zip dosyasını indirip açın ve içindeki kod dosyasını yavru tema klasörünüze kopyalayın.

2- İkinci aşamada yavru tema klasörünüzdeki functions.php dosyasına aşağıdaki kodları ekleyin:

if (!function_exists(‘get_the_image’)) {
 require_once “get-the-image.php”;
 }

function custom_excerpt_length( $length ) {
 return 50;
 }

add_filter( ‘excerpt_length’, ‘custom_excerpt_length’, 999 );

if (!function_exists(‘get_the_image’)) {

require_once “get-the-image.php”;

}

function custom_excerpt_length( $length ) {

return 50;

}

add_filter( ‘excerpt_length’, ‘custom_excerpt_length’, 999 );

3- Üçüncü aşamada content.php dosyasına aşağıdaki kodları ekliyorsunuz. Orijinal metinde sadece is_search() sorgulanıyor. Siz isterseniz verdiğimiz koddaki tüm seçenekleri aktif olarak kullanabilir, ya da sadece is_home() fonksiyonunu eklemekle yetinebilirsiniz: Tamamen size kalmış.

&lt;?php if ( is_search()||is_author()||is_tag()|| is_archive()||is_home() ) : // Only display Excerpts for Search ?&gt; 
&lt;div <span class='tooltipsall tooltipsincontent classtoolTips24'>class</span>=”entry-summary”&gt; &lt;?php get_the_image( array( ‘size’ =&gt; ‘main’, ‘width’ =&gt; 200, ‘height’ =&gt; 114, ‘before’ =&gt; ‘&lt;div <span class='tooltipsall tooltipsincontent classtoolTips24'>class</span>=”cover”&gt;’, ‘after’ =&gt; ‘&lt;/div&gt;’ ) ); ?&gt; 
&lt;?php the_excerpt(); ?&gt; 
&lt;/div&gt;&lt;!– .entry-summary –&gt; 
&lt;?php else : ?&gt;

<?php if ( is_search()||is_author()||is_tag()|| is_archive()||is_home() ) : // Only display Excerpts for Search ?>

<div class=”entry-summary”> <?php get_the_image( array( ‘size’ => ‘main’, ‘width’ => 200, ‘height’ => 114, ‘before’ => ‘<div class=”cover”>’, ‘after’ => ‘</div>’ ) ); ?>

<?php the_excerpt(); ?>

</div><!– .entry-summary –>

<?php else : ?>

Bu üç aşamayı uyguladığınız zaman yazınıza eklenmiş bir resim varsa ve onun thumbnail görüntüsünü de oluşturmuşsanız (Force Regenerate Thumbnail veya Smush It gibi bir eklenti, eksik thumbnail görüntülerinizi tamamlamanızı sağlar) küçük resim (thumbnail) özet yazınızın üst tarafında yerini alacaktır.

Fakat ben küçük resmin sol tarafta olmasını ve yazıların da hemen onun sağ yanından başlamasını istiyorum.

Yukarıda linkini verdiğim yazıda bu ayrıntıya hiç girilmemiş. Onları da ben ekleyeyim:

content.php dosyasına eklediğimiz kodu incelersek, resmimizin içine yerleştiği div kodunun “cover” sınıfı ile ilişkilendirildiğini görüyoruz. Ancak “cover” sınıfı hiç bir yerde tanımlı değil. Biz de yazılarımızın resmin sağ tarafında kalmasını sağlayacak css kodunu yavru temamızın style.css dosyasına ekliyoruz.

.cover {
 text-align: left;
 margin-right: 10px;
 float:left;
}

.cover {

text-align: left;

margin-right: 10px;

float:left;

}

“cover” sınıf tanımında div alanının sola dayalı olmasını, sağ tarafında 10 piksellik bir boşluk bulunmasını ve çevreleyen metne göre sol tarafta yer almasını belirtiyoruz.

Artık ana sayfadaki yazı özetlerimizin sol tarafında, küçük resimlerimiz de (thumbnail) yerini almış durumda.

Yukarıdaki açıklamaların yetersiz kaldığı sorun veya sorularınız varsa, aşağıdaki yorum alanını kullanarak bana aktarabilirsiniz. Sizi en kısa zamanda yanıtlayacağımdan emin olun!

Beni izlemeyi unutmayın!

ahmet aksoy

WordPress 2014 Temasında Değişiklik Yapma

wordpress tema Yanıt yok »

Eki 202014

2.530 views

WordPress 2014 Temasında Değişiklik Yapma

Sitemizde kullandığımız 2014 (twenty fourteen) temasında bir çok yerde gereksiz yere başlıklar büyük harfe (uppercase) dönüştürülmüş.

Bunu düzeltmek için gereken değişiklikler sadece style.css üzerinden yapılabiliyor.

Aşağıda, yavru tema (child theme) style.css dosyasına eklenecek satırları vereceğim. Ama siz de bu tarz değişiklikler yapmak istediğinizde önce gidip ana temanın style.css dosyasında ayrıntılı bir inceleme yapın. Bazı elemanların isimleri yeterli açıklamayı sağlıyor olsa da, bazı durumlarda daha hassas bir araştırma, hatta çok sayıda deneme-yanılma gerektirebilir.

Bu yazıda ele aldığımız sorunu yaratan tek bir kod var:

text-transform: uppercase;

Bu kod, dahil olduğu sınıfa ait yazıyı tamamen büyük harfe çeviriyor. Onu etkisiz hale getirmenin yolu ise

text-transform: none;

şeklinde. Bu durumda ilgili yazı/başlık nasıl girilmişse, aynen gösterilecek demektir.

Ana temanın style.css dosyasındaki “text-transform: uppercase;” satırlarını tek tek bulup, değiştirilmesi gerekip gerekmediğine karar vermeniz gerekiyor. Ben, aşağıdaki örnekte yanal banttaki harf büyütmelere dokunmadım. Onun dışındaki tüm dönüşümleri iptal ettim.

Aşağıdaki satırlar, yavru temanın style.css dosyasına eklediğim satırlar.

.site-navigation a {
text-transform: none;
}
.entry-title {
text-transform: none;
}
.entry-meta {
text-transform: none;
}
.cat-links {
text-transform: none;
}
.entry-meta .tag-links a {
text-transform: none;
}
.entry-content th,
.comment-content th {
text-transform: none;
}
.entry-content .edit-link {
text-transform: none;
}
.page-links {
text-transform: none;
}
.post-navigation .meta-nav {
text-transform: none;
}
.paging-navigation .page-numbers {
text-transform: none;
}
.comment-reply-title,
.comments-title {
text-transform: none;
}
.comment-list .reply,
.comment-metadata {
text-transform: none;
}
.no-comments {
text-transform: none;
}
.comment-navigation {
text-transform: none;
}
.widget .widget-title {
text-transform: uppercase;
}
.widget_calendar caption {
text-transform: uppercase;
}
.widget_twentyfourteen_ephemera .post-format-archive-link {
text-transform: uppercase;
}
.content-sidebar .widget .widget-title {
text-transform: uppercase;
}
.featured-content .entry-title {
text-transform: none;
}
@media screen and (min-width: 783px) {
.primary-navigation {
text-transform: none
}
}

Yavru tema uygulaması sayesinde ana temada hiç bir değişiklik yapmıyoruz. Eğer ana temada WordPress taarfından herhangi bir değişiklik yapılırsa, gerekli değişikliği ana temaya uygulamak bizim yaptığımız değişkliklere bir zarar vermeyecektir.

Eğer ana tema dosyalarında değişiklik yapma alışkanlığınız varsa, bir an önce bundan vazgeçip, yavru tema uygulamasına geçmenizi öneriyorum. Güvende olacaksınız!

ahmet aksoy