ev borcu WordPress sitesi
Eklenti Olmadan WordPress'te Yapışkan Yazı Kaydırıcısı Nasıl Eklenir
WordPress'te yeniyseniz ve ilk profesyonel web sitenizi kurma sürecindeyseniz, kesinlikle bu makaleyi okumak istersiniz. Bu makale, eklenti olmadan yapışkan bir gönderi kaydırıcısının nasıl kurulacağıyla ilgilidir.
Tabii ki, sizin veya bu konuda herhangi birinin sorması gereken ilk şey, eklentileri aynı şekilde kullanabildiğimiz için neden manuel olarak yapmakla uğraşalım ki.
Pekala, çoğu eklenti çoğu zaman sorunsuz çalışır, ancak çoğu 3. taraf eklentileri olduğundan, onlara her zaman tam olarak güvenemezsiniz.
Bunu manuel olarak yapmak her zaman iyi bir fikirdir, ancak önemli olan şu ki, HTML, CSS3, PHP vb. konularda çok bilgili olmanız gerekir. Kodlamada iyiyseniz, kesinlikle kendi yapışkan yazı kaydırıcınızı kurabilirsiniz. yapışkan yazılarınız mükemmel.
Aşağıda yazılan talimatları mektuba göre takip edin ve yapışkan yazı kaydırıcılarınızı hiç vakit kaybetmeden hazır hale getirebilmelisiniz.
Eklediğiniz değişikliklerin WordPress'i güncellediğinizde kaybolabileceğini unutmayın, bu nedenle, değişikliklerinizi gerçekleştirirken her zaman kaydetmeye dikkat edin.
Yapışkan gönderiler yerine yapışkan gönderi kaydırıcısını tercih etmek isteyebileceğiniz nedenlerden biri, WordPress'teki mevcut sürümün en son gönderilerden çok fazla dikkat çekmesidir.
Bu nedenle, mevcut sürümü kullanmak yerine yapışkan gönderilerinizi kaydırıcı olarak öne çıkarmak iyi bir fikirdir ve bunu yaparak, kullanıcılarınızın web sitenizdeki etiketli gönderilerden çeşitli gönderilere göz atmasını kolaylaştırmış olursunuz. en son olanlara yapışkan yazı ile.
Video öğretici
Eklentisiz WordPress'te Yapışkan Yazı Kaydırıcısı Ekleme Adımı
MooTools ve noobSlide
Bu yazının amacı için öncelikle noobslide kullanıyor olurdum, ancak aşağıda listelenen kodlar diğer kaydırıcılarla bağlantılı olarak da kullanılabilir.
Ve noobslide kullanacağımız için MetoolsJavascript kütüphanesini dahil etmeniz gerekecek. Şablonunuzdaki function.php dosyasına gidin ve hemen aşağıda listelenen kodları ekleyin, bu kadar.
function register_custom_js() {
wp_register_script( 'mootools', 'http://ajax.googleapis.com/ajax/libs/mootools/1.3.0/mootools-yui-compressed.js', '1.3.0');
wp_register_script('noobslide', get_bloginfo('template_directory') .'/_class.noobSlide.packed.js', dizi('mootools'));
}
add_action('init', 'register_custom_js');
function enqueue_noobslide() {
if ( is_home() ) { // kaydırıcımız yalnızca ana sayfada görünür, bu nedenle komut dosyasını yalnızca ana sayfaya yükleyin
wp_enqueue_script('noobslide');
}
}
add_action('wp_print_scripts', 'enqueue_noobslide');
küçük resimler
Ve küçük resimleri kullanacağımız için, aynısı gelmiyorsa, aynısını temanıza eklemek isteyebilirsiniz. Sadece aşağıda listelenen kodları takip edin ve bu hile yapmalıdır.
function custom_theme_setup() {
add_theme_support('post_thumbnails');
}
add_action('after_setup_theme', 'custom_theme_setup');
Özel daha fazla oku bağlantısı
WordPress sitenizin zaten iyi bir "daha fazla oku" bağlantısıyla geldiğini kabul ediyoruz, ancak bu basit ve fazla kullanılmış, bu nedenle kendi özel "daha fazlasını okuyun" CTA'nızı oluşturmayı düşünebilirsiniz.
Bu, web siteleriniz için daha fazla çekiş ve daha fazla tıklama ile sonuçlanmalıdır. Sadece aşağıda listelenen kodu takip edin. Yapmanız gereken ilk şey, functions.php dosyasına gitmek ve bu satırı aynı yerden almaktır.
//add_filter('get_the_excerpt', 'twentyten_custom_excerpt_more');
Şimdi, kendi özel daha fazla oku 'bağlantınızı' oluşturmak için aşağıdaki kodları yerine eklemeniz gerekiyor.
function custom_excerpt_with_more( $alıntı ) {
if ( has_excerpt() && ! is_attachment() ) {
küresel $yazı;
$alıntı döndürür. '<p class="slider-more"><a>ID ) . '">Okumaya devam et</a></p>';
}
$alıntıyı döndür;
}
add_filter('get_the_excerpt', 'custom_excerpt_with_more');
function custom_excerpt_more( $daha fazla) {
küresel $yazı;
'<p class="slider-more"><a>ID ) döndürün. '">Okumaya devam et</a></p>';
}
add_filter('excerpt_more', 'custom_excerpt_more');
Ve lütfen custom_excerpt_with_more() işlevinin otomatik olarak kabul edilen alıntılar veya daha fazla oku etiketli kullanıcı tanımlı alıntılar için olduğunu unutmayın.
CSS ve JavaScript
Ve şimdi, CSS ve Javascript'i function.php sayfasına eklediğimiz tüm önemli kısma geldik; Yapışkan gönderi kaydırıcısının çalışır durumda olmasını istiyorsanız bu adım çok önemlidir. Sadece aşağıdaki kodları takip edin ve kopyalayın, aynısını function.php dosyanıza yapıştırın.
işlev custom_slider_css_js() {
if ( is_home() ) { // sadece ana sayfada
#slider{border:1px solid #ccc;width:640px;position:relative;overflow:hidden;height:213px;margin-bottom:20px;}
#mask{konum:mutlak;yükseklik:213px;}
.items{float:left;height:213px;width:640px;position:relative;}
.items .wp-post-image {float:left;}
.info{width:320px;float:left;font-family:Arial, Helvetica, sans-serif;}
#content .info h2{font-size:20px;font-weight:bold;color:#1c3f95;margin:10px 10px 15px 10px;}
#content .info p{font-size:11px;color:#1c3f95;line-height:16px;margin:10px;}
.info a{font-size:10px;padding:5px 7px;background:#e1e1e1;text-decoration:none;text-transform:uppercase;font-weight:bold;color:#1c3f95;}
.info a:hover{color:#ffffff;background:#1c3f95;}
#slider .handle{position:absolute;bottom:0;right:5px;line-height:10px;text-align:center;font-size:25px;font-weight:bold;}
.handle a{color:#ccc;height:20px;width:20px;display:inline-block;imleç:işaretçi;}
.handle .active{color:#1c3f95;}
.handle a:hover{color:#1c9f65;}
/**/
}
}
add_action(#039;wp_head#039;, #039;custom_slider_css_js#039; );
WordPress tema değişikliği
Şimdi, kaydırıcının kodlarını içerecek şekilde WordPress temasını değiştireceğiz. Döngü dosyasına veya bu durumda loop.php olarak etiketlenen dosyaya gitmemiz gerekiyor.
Temanızın dosyasını bulun ve aynı dosyayı bulduktan sonra, imlecinizi döngü alanının hemen üzerine getirin ve aşağıda gösterildiği gibi kaydırıcınızın kodlarını girin.
$yapışkan ) );
have_posts()): $say = 0; ?>
<div>
<div>
have_posts() ): $slider->the_post(); $say++; ?>
<div class="items">
<div class="bilgi">
<h2></h2>
</div>
</div>
</div>
<div class="handle">
0; $say--):
<a>&boğa;</a>
</div>
</div>
Şimdi, neredeyse bitirdik – tek yapmanız gereken, yapışkan gönderi kaydırıcınızın çalışıp çalışmadığını görmek için web sitenize göz atmak.
Ek değişiklikler yapmak istiyorsanız, bunu kolaylıkla yapabilirsiniz – tek yapmanız gereken gerekli kodu girmek ve bu kadar olmalı. Yapmamız gereken bir şey daha var ve o da normal yapışkan yazılardan kurtulmak.
Yapışkan bir gönderi kaydırıcısı oluşturmanın arkasındaki fikir, web sitenizde listelenen en son gönderilerden dikkat çekmemesiydi.
İşte tam da bu yüzden eski varyantı hemen kaldırmamız gerekiyor, sadece aşağıda listelenen kodları takip edin ve şimdilik bunu yapması gerekiyor.
$yapışkan ) ); have_posts()): $say = 0; ?> <div> <div> have_posts() ): $slider->the_post(); $say++; ?> <div class="items"> <div class="bilgi"> <h2></h2> </div> </div> </div> <div class="handle"> 0; $say--): ?> <a>&boğa;</a> </div> </div> sorgu, dizi( 'post__not_in' => $yapışkan ) ); query_posts( $args );
Artık WordPress'te tamamen işlevsel Yapışkan gönderi kaydırıcınızın keyfini çıkarabilmelisiniz; Bu kaydırıcı yerindeyken, ana sayfanız çok daha az dağınık görünecek ve kesinlikle tüm doğru nedenlerle öne çıkacaktır.
Benzer değişiklikleri diğer temalar ve kaydırıcılarla da yapabileceğinizi unutmayın. Bu kaydırıcının bir sonucu olarak, çevrimiçi olarak her zamankinden daha fazla çekiş elde edebilmelisiniz, bu da daha fazla trafiğe ve daha iyi SEO'ya yol açacaktır.