Bootstrap'a Dayalı Bir WordPress Duyarlı Teması Nasıl Oluşturulur

Farklı çözünürlüklere, ekran boyutlarına ve işletim sistemlerine sahip bu kadar çok cihazla, duyarlı web siteleri ve uygulamalar, bir markanın çevrimiçi varlığı için temel bir gereklilik haline geldi.

Tüm web trafiğinin %52'sinden fazlası mobil cihazlardan geliyor ve sayı artıyor. Web geliştiricileri, pazarlamacılar ve tasarımcılar, web sitesi duyarlıysa ve herhangi bir çözünürlük ve en boy oranından bağımsız olarak herhangi bir cihazda kolayca görüntülenebiliyor, gezinebiliyor ve gezinebiliyorsa büyük potansiyeli anlıyor.

Duyarlı temalar, bir web sitesinin öğelerinin daha iyi okunabilirlik, kullanıcı deneyimi ve yükleme süresi için ekran boyutlarına ve tarayıcılara göre kendini ayarladığı bir web tasarımı yaklaşımıdır. Geliştiriciler ve tema tasarımcıları, duyarlı web siteleri konseptinden yararlanıyorlar. Birçok marka, web sitelerini duyarlı ve mobil uyumlu hale getirmek için WordPress Developer'ı giderek daha fazla işe alıyor.

Kasım 2013'te Google'ın web spam ekibinin başkanı Matt Cutts, duyarlı tasarımın SERP'lerde sizi olumsuz etkilemeyeceğini açıklayan bir video yayınladı . Ayrıca Google, Google'ın duyarlı web sitelerine nasıl davrandığına ilişkin ayrıntıları içeren mobil uyumlu web sitelerine ilişkin yönergelerini de yayınladı.

Akıllı telefonların ve diğer benzer cihazların yükselişi ile masaüstü ve dizüstü bilgisayarların kullanımı (yavaş) düşüşte. Bu, insanların akıllı telefonlarını haberlerden yerel mağazalara, uçuş sorgularından en son filmlere kadar hemen hemen her şeyi aramak için kullandıkları anlamına geliyor. Bu yükselen trend, çevrimiçi topluluk için büyük bir iş fırsatı sunuyor.

WordPress ve Duyarlı Web

WordPress, İnternet'in önemli bir bölümüne güç sağlayan en popüler CMS'dir. Açık kaynak kodlu geliştiriciler ve tasarımcılardan oluşan güçlü bir topluluktan destek alır. Duyarlı web tasarımının yükselişiyle birlikte, birçok ünlü tema geliştiricisi duyarlı tasarıma geçti ve sıfırdan duyarlı bir WordPress teması oluşturmak için ideal olan Redux Framework, Carrington Core ve Bootstrap gibi anlaşılması kolay çerçeveler tanıttı.

Önyükleme Nedir?

Bootstrap, mobil uyumlu ön uç web geliştirme için kullanılan açık kaynaklı bir çerçevedir. Bu, CSS ve Java Script tabanlı tasarım şablonları aracılığıyla duyarlı WordPress temaları oluşturmak için kullanılabileceği anlamına gelir.

Bootstrap, karmaşık web uygulamaları için geliştirme sürecini basitleştiren bir araç takımıdır. Twitter geliştirici ekibinin buluşudur ve açık kaynak topluluğunun kullanımına sunulmuştur. Çerçeve, LessCSS'de kodlandığı için hafif yapısı nedeniyle popüler oldu.

Web sitenize Bootstrap ekleyerek, butonlar, ızgaralar, tablolar, menü vb. önceden oluşturulmuş öğeleri eklemek için sınıflarını çağırabilirsiniz. Benzer şekilde, karmaşık medya sorguları eklemeden mevcut öğeleri duyarlı hale getirebilirsiniz.

Bir WordPress Önyükleme Teması Oluşturun

Bir WordPress önyükleme teması oluşturmak aslında 8 adımlı bir işlemdir. İyi haber – Bootstrap destekli bir tema oluşturmak çok kolay.

1. Adım: Bootstrap Paketini Açın

1. Her şeyden önce, etki alanınıza WordPress yükleyin.
2. Bootstrap'i indirin ve açın .
3. Bittiğinde, FileZilla gibi bir FTP istemcisi kullanarak bağlanın.
4. Gezin wp-content> temalar.
5. Themes klasöründe yeni bir klasör oluşturun ve BootSTheme olarak adlandırın . Açılmış Bootstrap içeriğini bu klasöre yükleyin.
6. Hemen hemen her WordPress kurulumu aşağıdaki dosyaları içerir:

• altbilgi.php
• başlık.php
• index.php
• stil.css

Şimdi, BootSTheme klasöründe yukarıdaki adlara sahip dört boş dosya oluşturun.

2. Adım: Önyüklemeyi Yapılandırma

BootSTheme klasöründe style.css dosyasını açın ve aşağıdaki kodu yapıştırın.

 /*
Tema Adı: MyTheme
Tema URI'si: https://cloudways.com
Açıklama: Mytheme Bootstrap üzerine kurulu
Sürüm:1.1
Yazar: Ahsan Parwez
Yazar URI'si: https://cloudways.com
*/

Bunlar temel olarak tema hakkında açıklamalar ve ayrıntılar sağlayan yorumlardır. Bu yorumları temanızın ayrıntılarını yansıtacak şekilde değiştirmenizi şiddetle tavsiye ederim.

Adım 3: Kodu Kopyalama

Bu eğitim için Bootstrap paketinde sağlanan tüm CSS ve JS dosyalarını kullanmayacağım. Geliştirme işlemini başlatmak için bootstrap.min.css dosyasındaki kodu kopyalayın ve style.css dosyasına yapıştırın. Bu noktada style.css dosyası şöyle görünmelidir.

Not: Küçültülmüş CSS kodunun tamamını Bootstrap web sitesinden alabilirsiniz.

Adım 4: HTML Şablonu Ayarlama

Çalışmak için temel bir HTML şablonuna ihtiyacım var. İşleri kolaylaştırmak için bu HTML temasını kullanacağım. Öğreticiye devam etmek için indirmenizi tavsiye ederim.

WordPress, varsayılan olarak sırasıyla header.php ve footer.php dosyalarını çağıran yerleşik get_header() ve get_footer() işlevlerine sahiptir.

HTML kodunu yukarıdan ilk kapsayıcı div'e kadar keserek başlayın ve bunu header.php dosyasına yapıştırın. Dosya şöyle görünecektir:

footer.php dosyası kodun geri kalanını içerecektir:

Bu noktada Bootstrap WordPress temasını yükleyip etkinleştirirseniz hiçbir şey görmezsiniz çünkü index.php hiçbir şey içermemektedir.

Üstbilgiyi ve altbilgiyi yüklemek için, bu öğeleri çağırmak için WordPress yerleşik işlevini kullanacağım. Bunun için index.php içine aşağıdaki kodu yapıştırın:

 <?php get_header(); ?>

<?php get_footer(); ?>

Artık üstbilgi ve altbilgi öğeleri web sitemize yüklenecek, ancak herhangi bir stil içermeyen temel bir sayfa elde edeceğiz.

Adım 5: Üst Bilgi ve Alt Bilgiyi Ayarlama

Header.php dosyasında, ben yankı get_stylesheet_uri () (WordPress Codex daha fonksiyonunu okuyun) WordPress işlevini kullanarak Bootstrap stil ithal edecek. Style.css'yi web sitesine aktaracak ve şimdi bir üst menü çubuğu göreceksiniz.

Ayrıca, header.php dosyasının en üstüne aşağıdaki kodu ekleyerek style.css'yi ekleyebilirsiniz.

 <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(). '/style.css' ?>"> 

Ancak hepsi bu kadar değil, sayfamızdaki JavaScript özellikleri yine çalışmayacak ve herhangi bir açılır menü görmeyeceğiz. Bunu etkinleştirmek için, js dosyalarımızı footer.php içindeki URL ile doğrudan içe aktararak içe aktaracağız . Kapanış gövdesi etiketinin önüne aşağıdaki kodu yapıştırın.

 <script src="../wp-content/themes/MyBSTheme/js/bootstrap.min.js"></script>

WordPress, özelleştirmesi ve eklentileri ile bilinir. WordPress'e eklenti kancalarını nereye yerleştireceğini söylemek için <?php wp_head(); ?> ve <?php wp_footer(); ?> header.php ve footer.php dosyalarında. Ayrıca, web sitesinin dinamik başlıklarını ayarlamak için wp_title(); kullanacağız . <title> etiketleri arasında header.php dosyasındaki işlev.

 <title><?php wp_title(' | ',doğru,'doğru'); ></title>

Yukarıdaki kod, yazının başlığını '|' ile ayırarak arayacaktır. site adından daha fazla. Boolean true başlığı gösterecektir. Bunu false olarak ayarlarsanız, yalnızca değeri döndürür ve görüntülemez. 'sağ' , yazı başlığının konumunu ayırıcının sağında tanımlar.

6. Adım: Öne Çıkan Gönderileri Görüntüleme

Ardından, gönderileri dinamik olarak ana sayfaya çağıracağım ( tarafından görüntülendiği gibi ) ve en üstte görüntüleyeceğim (birçok WordPress destekli sitede gördüğümüz öne çıkan gönderilere benzer şekilde).

index.php dosyanızın içine aşağıdaki kodu yazın:

 <?php

query_posts('posts_per_page=1');

while(have_posts()) : the_post(); ?>
<div>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?>&lt;/p>
</div>

<?php bitiş zamanı; wp_reset_query(); ?>

Gördüğünüz gibi, bir süre döngüsü kullanıyorum ve post_per_page kullanarak gönderi sayısını bire ayarladım. Bu satır yalnızca sayfanın en üstünde en son blog gönderisini görüntüler ve döngü kapandıktan sonra query_posts sıfırlanır.

Jumbotron sınıfı, bootstrap.min.css dosyasında tanımlanır. <h2> etiketlerini ve the_permalink(); kullanarak öne çıkan gönderileri biçimlendirmek için kullanacağım. işlev. Köprü, yazı başlığında oluşturulur ve the_permalink(); işlev, tüm gönderinin URL'sine bağlantılar. Gönderinin bir alıntısını göstermek için, başka bir yerleşik WordPress işlevi olan the_excerpt(); kullandım.

7. Adım: Kategorilerinizi Listeleme

Şimdi ana sayfanın solundaki kategorileri listeleyeceğim. Bootstrap sınıfları ve WordPress işlevi wp_list_categories(); ile stillendirilmiş birkaç div örneği oluşturacağım . .

Aşağıdaki kodu index.php içine yapıştırın:

 <div class="panel panel-varsayılan panel gövdesi">
<div>
<div>

<ul>
<?php wp_list_categories('orderby=name&title_li='); ?>
</ul>

</div>
</div>
</div>

Bu, kategorileri güzel bir vurgulu efektle ada göre listeleyecektir.

8. Adım: En Son Gönderileri ve Yazarları Görüntüleyin

Son olarak, ana sayfada en son blog yazılarını göstereceğiz. Başka bir div etiketi başlatacağız ve bu div altında, öne çıkan gönderide kullandığımız benzer while döngüsü tekniğini kullanacağız, ancak bunu query_posts(); ile sınırlamayacağız . .

 <div>

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

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p><?php the_excerpt(); ?></p>
<p> tarafından gönderildi <?php the_author(); ?>

<?php bitiş zamanı; wp_reset_query(); ?>

</div>

WordPress işlevleri the_author() ; ve gönderinin yazarının kullanıcı adını alın. Her gönderide yazarın adını dinamik olarak görüntülemek için kullanabiliriz.

Her şeyi başarıyla tamamladığınızda karşınıza yukarıdaki resimde gördüğünüz gibi bir sayfa çıkacaktır.

Mevcut Bir WordPress Temasına Önyükleme Ekleme

Duyarlı olmayan bir WordPress teması kullanıyorsanız, onu mobil uyumlu hale getirmek için Bootstrap ekleyebilirsiniz. WordPress ve Bootstrap'ı iki farklı şekilde kullanabilirsiniz.

CDN Kullanarak Bootstrap Ekleme

Bootstrap öğelerini, yalnızca CDN'sini header.php dosyanıza ekleyerek kullanmaya başlayabilirsiniz.

Not: Bu yöntem uyumluluk sorunlarına neden olabilir, bu nedenle aşağıdaki kodu eklemeden önce tam bir yedek aldığınızdan emin olun.

 <!-- En son derlenmiş ve küçültülmüş CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- En son derlenmiş ve küçültülmüş JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Header.php dosyasına FTP kullanarak veya bir eklenti kullanarak erişebilirsiniz. Yukarıdaki kod, daha iyi performans sunan CSS ve JS dosyalarının küçültülmüş sürümlerini içerir.

Functions.php içine Bootstrap ekleme

Bu yöntemde Bootstrap kitaplığını indirmeniz gerekiyor. Bootstrap.min.css dosyasını ve Bootstrap-theme.min.css dosyasını tema CSS klasörünüze yükleyin ve Bootstrap.js dosyasını WordPress temanızın “js” adlı tema klasörüne yükleyin.

Şimdi, bu komut dosyalarını kuyruğa almak için function.php dosyanıza erişin.

Functions.php dosyanızın içine aşağıdaki kodu ekleyin.

 function reg_scripts() {
    wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() .'/css/bootstrap.min.css');
    wp_enqueue_style('bootstrapthemestyle', get_template_directory_uri() .'/css/bootstrap-theme.min.css');
    wp_enqueue_script('bootstrap-script', get_template_directory_uri() .'/js/bootstrap.min.js', dizi(), true);
}
add_action('wp_enqueue_scripts', 'reg_scripts');

Ayrıca yükleme kısmını atlayabilir ve bu şekilde doğrudan önyükleme CDN'sini kuyruğa alabilirsiniz.

 function my_scripts_enqueue() {
    wp_register_script('bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', dizi('jquery'), NULL, true);
    wp_register_style( 'bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', false, NULL, 'all');

    wp_enqueue_script('bootstrap-js');
    wp_enqueue_style('bootstrap-css');
}
add_action('wp_enqueue_scripts', 'my_scripts_enqueue');

Dosyayı kaydedin ve sunucuya geri yükleyin.

Sıradaki ne?

Bu öğretici, temel olarak bir HTML şablonundan temel bir WordPress teması oluşturmaya ve Bootstrap 3.x kullanarak onu duyarlı hale getirmeye odaklanmıştır. Sonraki gönderilerde single.php, front-page.php, function.php gibi daha fazla sayfa yapacağım. Ayrıca function.php dosyasından stil sayfalarının ve JavaScript'lerin nasıl içe aktarılacağını da açıklayacağım.

Herhangi bir yardıma ihtiyacınız olursa, aşağıya bir yorum gönderin, size geri döneceğim.