Wordpress Temaya Bootstrap 4 Ekleme

Wordpress Temaya Bootstrap 4 Ekleme

Bootstrap 4, css3 ile yazılmış bir tasarım kütüphanesidir. Temada değişiklik gerçekleştirmek istiyorsanız, esneklik ve kolay anlaşılır olması açısından Bootstrap 4’ü temanıza dahil ederek kolayca temayı düzenleyebilirsiniz.

1# Aşağıdaki CDN kodunu temanızın header.php dosyasında <head> ve </head> tagları arasına yerleştirin.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

2# Şuan Bootstrap 4’ün css dosyasını temaya entegre ettik. Şimdi oldukça uyumlu olarak kullanabileceğiniz bootstrap js ve Jquery kütüphanesini temaya entegre edelim. Sayfanızda hız kaybı oluşturmaması açısından Javascript kodlarını footer.php dosyasına </body> tagından önce ekliyoruz.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Burada fazladan poper dosyasının linkide mevcut. Bu ne işe yarar kısaca ondan da bahsedelim ve içeriği bitirelim. Tooltip gibi popup açılan içeriği sitemizde kullanmak istiyorsak popper.js mutlaka projemizde olmalı. Artık temanızın istediğiniz yerinde Bootstrap 4 navbar, buton, grid yapısını kullanabilirsiniz.

Neler Yapabilirim ?

Kendinize has temayı kolayca yazabilirsiniz. İhtiyacınız olan bütün bilgi ve döküman burada yer almaktadır. Örnek olması açısından kısaca bir sidebara sahip basit bir tasarım yazacak olursak;

<div class="container">
<header>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>
</header>
<div class="row">
<div class="col-lg-8 col-sm-8">
Ana içerik alanı
</div>
<div class="col-lg-4 col-sm-4">
Sidebar Alanı
</div>
</div>
</div>

Basitçe full responsive tasarımlar yapılabilir. Grid sistemi 12 ‘dir yani container ve container-fluid div classlarını row ile 12 eşit parçaya bölebilir, alanı buna göre düzenleyebilirsiniz.


Wordpress kategorisinde 03 Şubat 2020 - 11:10:14 tarihinde yayınlanmıştır.

Kazım USLU Hakkında

PHP,MYSQL,CSS,JS,JQUERY yazılım dillerine hakim, Şu sıralar PYHTON ve LINUX üzerine araştırma geliştirme yapan, sunucu optimizasyonu ile uğraşan, boş zamanlarında Wordpress geliştirmeleri üzerine çalışmalar yapıyorum..

Yorumlar (0)

Bu yazıya henüz bir yorum yapılmamış, hemen bir tane yapmak ister misin ?

Yorum Yapın

Utarif Yemek Tarifleri Scripti

Yemek Tarifleri paylaşım scriptine uygun fiyatla sahip olmak ister misin ?
DEMO - ÖZELLİKLER

Utvlite Wordpress Canlı TV Teması

UTV Canlı TV Scripti Artık WordPress’te. Oldukça uygun fiyatlı tuttuğum bu temayı satın almadan önce incelemeye ne dersin ?
UtvLite Canlı TV Teması WordPress – DEMO

İş Alımı: AÇIK

PHP işlerinizi Yapabilirim, Wordpress tema düzenleme, Bot yazılımı, metabox, özel alan yönetimi gibi işlerinizi özenle yapabilirim. Ayrıca WooCommerce ürün botu yazabilirim. Aklınızdaki işi online bildirmek için ;
Skype: Kcmedia42
R10.net Profilim: Kcmedia
Linkedin Profilim: Kazım Uslu
Instagram: Kaz.Uslu
Whatsapp: 0539 717 87 58(US LU) Mekanın Sahibi Geri Döndü :)

Uslu Bir ÖNERİ

Müşteri Temsilcisine bağlanırken telefonda yorulmayın, Direk müşteri hizmetlerine bağlanmak artık çok kolay :)

Son Yorumlar

Site Altyapımı Değiştirdim Hoşgeldin UBlog için kazuslu dediki, Teşekkür ederim kardeşim..

Site Altyapımı Değiştirdim Hoşgeldin UBlog için Melih dediki, Yenilik gayet işlevsel olmuş, başarıların devamını dilerim.

Yaz Elması – Kazuslu Bahçelerinde :) için Kazım USLU dediki, Hocam bizim burda yaz elması olarak adlandırılıyor tam cinsini bilmiyorum maalesef fakat bahçeye gittiğimde köyden birine sorarım..

Yaz Elması – Kazuslu Bahçelerinde :) için Ali ERGUN dediki, Merhabalar, resimdeki elmayı biz süt elma diye adlandırırdık, gerçek ismini biliyormusunuz? yeniden eski elmalardan dikmek istiyorum.

Site Altyapımı Değiştirdim Hoşgeldin UBlog için Kazım USLU dediki, İnş abi :)

Önerdiğim Bağlantılar

Burada Yer Almak ister misin ? İletişim sayfasından bana ulaşabilirsin :)