Cara mudah membuat theme wordpress responsif dengan bootstrap part 2

15 June 2018 1486

Langkah kali ini adalah langkah lanjutan dari “Cara mudah membuat theme wordpress responsif dengan bootstrap part 1″. Seperti yang saya infokan dibawah halaman, step berikutnya adalah pembuatan header.php.

wordpress with bootstrap part 2

 

File header.php adalah file yang akan selalu tampil statik dibagian atas dalam theme wordpress, file ini juga bisa di jadikan Hook untuk script yang akan di input.

file header.php

<!DOCTYPE html>
<!–[if IE 7]>
<html class=”ie ie7″ <?php language_attributes(); ?>>
<![endif]–>
<!–[if IE 8]>
<html class=”ie ie8″ <?php language_attributes(); ?>>
<![endif]–>
<html <?php language_attributes(); ?>>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>” />
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title><?php wp_title( ” ); ?></title>
<link rel=”profile” href=”http://gmpg.org/xfn/11″ />
<link rel=”pingback” href=”<?php bloginfo( ‘pingback_url’ ); ?>” />
<meta http-equiv=”Content-Type” content=”<?php bloginfo(‘html_type’); ?>;” charset=”<?php bloginfo(‘charset’); ?>” />
<link rel=”alternate” type=”application/rss+xml” title=”<?php bloginfo(‘name’); ?> RSS Feed” href=”<?php bloginfo(‘rss2_url’); ?>” />
<link rel=”alternate” type=”application/atom+xml” title=”<?php bloginfo(‘name’); ?> Atom Feed” href=”<?php bloginfo(‘atom_url’); ?>” />
<?php wp_head(); ?>
</head>
<body <?php body_class();?>>
<header class=”header”>
<h1 class=”site-title”><a href=”<?php echo home_url( ‘/’ ); ?>” title=”<?php echo esc_attr( get_bloginfo( ‘name’, ‘display’ ) ); ?>” rel=”home”><?php bloginfo( ‘name’ ); ?></a></h1>
<h3 class=”site-description”><?php bloginfo( ‘description’ ); ?></h3>
</header>
<nav class=”navbar navbar-default” role=”navigation”>
<div class=”container”>
<div class=”navbar-header”>
<button type=”button” class=”navbar-toggle” data-toggle=”collapse” data-target=”#bs-example-navbar-collapse-1″>
<span class=”sr-only”>Toggle navigation</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a class=”navbar-brand” href=”<?php echo home_url( ‘/’ ); ?>”><span class=”glyphicon glyphicon-home” aria-hidden=”true”></a>
</div>
<div class=”collapse navbar-collapse” id=”bs-example-navbar-collapse-1″>
<?php
wp_nav_menu( array(
‘menu’ => ‘header_nav’,
‘theme_location’ => ‘header_nav’,
‘depth’ => 4,
‘container’ => ”,
‘container_class’ => ‘collapse navbar-collapse’,
‘container_id’ => ‘bs-example-navbar-collapse-1’,
‘menu_class’ => ‘nav navbar-nav’,
‘fallback_cb’ => ‘wp_bootstrap_navwalker::fallback’,
‘walker’ => new wp_bootstrap_navwalker())
);
?>
<form method=”get” action=”<?php echo bloginfo(‘url’); ?>” class=”navbar-form navbar-left” role=”search”>
<div class=”input-group”>
<input type=”text” name=”s” id=”s” class=”form-control” placeholder=”Search…”>
<span class=”input-group-btn”>
<button type=”submit” class=”btn btn-default”>Go!</button>
</span>
</div>
</form>
</div>
</div>
</nav>

Step lanjutnya index.php

Kata kunci untuk Artikel ini :

  • https://yandex ru/clck/jsredir?from=yandex ru;search;web;;&text=&etext=1821 RNL9DPrmaoMcgHNSu21XE_Kkju36C-m3yrirZBRfaRx2aHWhLbUkoS4jbLXiRIJO 4b2df5e4bac276fca961234b05d793813c1ccaf4&uuid=&state=_BLhILn4SxNIvvL0W45KSic66uCIg23qh8iRG98qeIXme

Artikel Terkait

Cara mudah membuat theme wordpress responsif dengan bootstrap part 1

Tidak butuh banyak waktu untuk membuat theme wordpress menggunakan bootstrap, hal ini dikarenakan kita menggunakan resource kerangka template yang sudah ada, kita hanya mengatur posisi dan tampilan

Cara mudah untuk membuat custom term dalam wordpress

Dalam wordpress term yang tersedia default adalah category dan tags, langsung saja cara membuat term taxonomy pada wordpress. Langkah pertama adalah masuk pada bagian functions.php, contoh term kali
Bootstrap, Tips dan Trik, Tutorial, Wordpress , ,
Belum ada komentar. Anda bisa menjadi yang pertama untuk berkomentar!

Tinggalkan komentar

*
*
-

error: Content is protected !!