Ana sayfa Wordpress İpuçları Temaya Bootstrap 4 Dahil Etme

Temaya Bootstrap 4 Dahil Etme

96
0

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.

[reklam]

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.

BİR CEVAP BIRAK

Please enter your comment!
Please enter your name here