Convertirea unui fisier PSD intr-o tema WordPress
Am explicat ce este un fisier PSD in primul articol de aici. Tot in acel articol, am scris si primii doi pasi pentru convertirea unui fisier PSD intr-o tema WordPress. Continuam explicatii in acest al doilea articol.
Al treilea pas – Crearea fisierelor index.html si style.css
Odata ce ai taiate elementele grafice trebuie sa le codezi in fisiere de tip HTML/XHTML si CSS pentru stil. Pentru inceput, ai nevoie sa stii cum vrei sa te organizezi. Poti pune toate elementele grafice (imagini) in directorul imagini, fisierele CSS in css, iar in radacina site-ului lasi fisierul principal. Acest fisier principal este indexul. El poate fi index.html sau index.php, in functie de cum vrei sa codezi. In mod normal, in cazul nostru este, .html.
Nu strica sa stii ca HTML sau XHTML vine de la Extensible HyperText Markup Language, iar CSS the la Cascading StyleSheets. Practic HTML este un limbaj special, iar CSS reprezinta stilurile site-ului (design-ul).
Tinand cont ca vrei sa creezi tema cu Bootstrap, va trebui sa initializezi Boostrap in antetul fisierului, in sectiunea head si sa adaugi apoi in sectiunea body codul JavaScript asociat dupa cum urmeaza:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<link href=”/css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
</head>
<body>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”/js/bootstrap.min.js”></script>
</body>
</html>
Acum te poti folosi de caracteristicile si componentele Boostrap in tema ta HTML. De exemplu, poti construi navigatia folosind codul de mai jos:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”/css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
</head>
<body>
<div class=”container-fluid”>
<div class=”navbar”>
<a class=”navbar-brand” href=”#”>WPBootstrap.com</a>
<ul class=”nav navbar-nav pull-right”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Order</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
<div class=”row”>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/image1.png”>
<div class=”caption”>
<h3>About</h3>
<p>…</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>
</div>
</div>
</div>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/image2.png”>
<div class=”caption”>
<h3>Projects</h3>
<p>…</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>
</div>
</div>
</div>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/image3.png”>
<div class=”caption”>
<h3>Services</h3>
<p>…</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>
</div>
</div>
</div>
<hr>
<footer>
<p>© WPBootstrap 2015</p>
</footer>
</div>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”/js/bootstrap.min.js”></script>
</body>
</html>
Salveaza fisierul in format .html si cu numele index. Ai sa vezi ca stilurile inca nu functioneaza pe aceasta pagina. Trebuie sa creezi fisierul style.css si sa adaugi acolo stilul dorit. Uite un exemplu:
.navbar {
background:#222222;
margin-bottom:0px;
border-radius:0px;
}
.navbar-brand {
color:#FFFFFF;
line-height: 50px;
padding-left: 10px;
}
a.navbar-brand:hover {
color:#FFEB3B;
}
.navbar ul {
padding-right:4%;
}
.navbar ul li a {
color:#FFFFFF;
margin-right:10%;
}
.navbar ul li a:hover {
color:#222222;
background-color: yellow;
}
a.btn-primary{
background-color: #E91E63;
color:#FFFFFF;
}
Trebuie sa incluzi fisierul style.css si sa il adaugi in site asa cum ai adaugat si bootstrap.min.css. Scrie un link referinta catre style.css in index.html fix deasupra liniei cu bootstrap.min.css.
<head>
<link href=”/css/style.css” rel=”stylesheet” media=”screen”>
<link href=”css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
</head>
<body>
…
…
</body>
Acum, poti sa previzualizezi in browser-ul tau preferat modificarile accesand fisierul index.html. In acelasi mod poti sa codezi intregul fisier PSD.
Al patrulea pas – Desparte fisierul index.html conform structurii temei WordPress
Motivul principal pentru convertirea unui fisier PSD intr-o tema WordPress este sa creezi un site multi-functional. Acesta trebuie sa contina o tema care sa functioneze corespunzator si sa poata fi incarcata in panoul de control. Teme cum sunt cele de la Divi si Avada au anumite fisiere standard care le transforma asa cum sunt.
Acum ca ai fisierul index.html, trebuie sa il desparti in mai multe fisiere PHP conform structurii WordPress. Facand asta, vei reusi sa convertesti fisierul static html intr-o tema dinamica WordPress, dar si sa adaugi functionalitati ale platformei.
Nu uita ca PHP este un limbaj de programare bazat pe server si este cunoscut ca fiind un preprocesor hypertext.
O tema WP este realizata, de obicei, din mai multe fisiere PHP cum ar fi header.php, footer.php, index.php, sidebar.php, search.php si asa mai departe. Astfel vei reusi sa codezi mai usor si sa te organizezi mai rapid. Totusi, tu ai nevoie in primul rand doar de index.php si style.css pentru a crea o tema functionala. Prin urmare, fisierul index.html se va imparte in header.php, index.php, sidebar.php si footer.php dupa cum urmeaza si in schema alaturata:
Sa incepem cu fisierul header.php care este antetul site-ului. Codul HTML din zona respectiva, se va muta in acest fisier. Prin urmare am avea:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link href=”/css/style.css” rel=”stylesheet” media=”screen”>
<link href=”/css/bootstrap.min.css” rel=”stylesheet” media=”screen”>
</head>
<body>
<div class=”container-fluid”>
<div class=”navbar”>
<a class=”navbar-brand” href=”#”>WPBootstrap.com</a>
<ul class=”nav navbar-nav pull-right”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Order</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</div>
Partea din mijloc al fisierului index.html trebuie sa fie mutata in fisierul index.php dupa cum urmeaza:
<div class=”row”>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/image1.png”>
<div class=”caption”>
<h3>About</h3>
<p>…</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>
</div>
</div>
</div>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/image2.png”>
<div class=”caption”>
<h3>Projects</h3>
<p>…</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>
</div>
</div>
</div>
<div class=”col-sm-6 col-md-4″>
<div class=”thumbnail”>
<img src=”/image3.png”>
<div class=”caption”>
<h3>Services</h3>
<p>…</p>
<p><a href=”#” class=”btn btn-primary” role=”button”>Explore</a></p>
</div>
</div>
</div>
Iar partea de subsol in footer.php:
<hr>
<footer>
<p>© WPBootstrap 2015</p>
</footer>
</div>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”/js/bootstrap.min.js”></script>
</body>
</html>
Acestea sunt fisierele principale de care o tema are nevoie. Lista completa ar fi:
- style.css – pentru design-ul temei;
- header.php – pentru antet;
- index.php – cuprinsul;
- sidebar.php – bara laterala;
- footer.php – subsolul;
- single.php – pagina pentru un singur articol;
- page.php – pagina;
- comments.php – sectiunea de comentarii;
- 404.php – pagina de eroare 404;
- functions.php – pagina cu functiile temei;
- archive.php – pagina de arhive;
- searchform.php – pagina formularului de cautare;
- search.php – pagina de cautare.
Pasul al cincelea – Adaugarea de functii WordPress la tema Bootstrap
WordPress are o groaza de functii si caracteristici care pot fi folosite in crearea unui site. Poti incorpora rapid orice functie in teme tale WordPress apeland functiile respective in fisiere. WordPress va avea grija de restul.
De exemplu, putem folosi functia
<?php bloginfo( $show ); ?>
pentru a arata numele site-ului intr-un link:
<a href=”/<?php bloginfo(‘url’); ?>” title=”<?php bloginfo(‘name’); ?>” class=”navbar-brand”><?php bloginfo(‘name’); ?></a>
Iar pentru meniu avem functia:
<?php wp_nav_menu( $args ); ?>
Dupa cum urmeaza si in exemplul de mai jos:
<?php wp_nav_menu( array(‘menu’ => ‘Project Nav’, ‘menu_class’,’nav navbar-nav pull-right’ )); ?>
Acum fisierul nostru header.php ar arata cam asa:
<?php
?><!DOCTYPE html>
<html <?php language_attributes(); ?> class=”no-js”>
<head>
<meta charset=”<?php bloginfo( ‘charset’ ); ?>”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div class=”container-fluid”>
<div class=”navbar”>
<a href=”/<?php bloginfo(‘url’); ?>” title=”<?php bloginfo(‘name’); ?>” class=”navbar-brand”><?php bloginfo(‘name’); ?></a>
<?php wp_nav_menu( array(‘menu’ => ‘Project Nav’, ‘menu_class’,’nav navbar-nav pull-right’ )); ?>
</div>
La footer.php ii adaugam functia
<?php wp_footer(); ?>
si avem versiunea finala:
<?php?>
<footer>
<p>© WPBootstrap 2015</p>
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>
Pentru fisierul index.php putem adauga functia:
<?php dynamic_sidebar( $index ); ?>
si fisierul va contine:
<?php
get_header(); ?>
<div class=”row”>
<?php dynamic_sidebar(‘sidebar-1’); ?>
<?php dynamic_sidebar(‘sidebar-2’); ?>
<?php dynamic_sidebar(‘sidebar-3’); ?>
<hr>
<?php get_footer(); ?>
Pentru a arata corect thumbnails trebuie sa definim si sectiunile sidebar-1, sidebar-2, sidebar-3 in fisierul functions.php dupa cum se vede:
function wpbootstrap_widgets_init() {
register_sidebar( array(
‘name’ => __( ‘Widget Area’, ‘wpbootstrap’ ),
‘id’ => ‘sidebar-1’,
‘description’ => __( ‘Add widgets here to appear in your sidebar.’, ‘wpbootstrap’ ),
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h2 class=”widget-title”>’,
‘after_title’ => ‘</h2>’,
)
register_sidebar( array(
‘name’ => __( ‘Widget Area’, ‘wpbootstrap’ ),
‘id’ => ‘sidebar-2’,
‘description’ => __( ‘Add widgets here to appear in your sidebar.’, ‘wpbootstrap’ ),
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h2 class=”widget-title”>’,
‘after_title’ => ‘</h2>’,
)
register_sidebar( array(
‘name’ => __( ‘Widget Area’, ‘wpbootstrap’ ),
‘id’ => ‘sidebar-3’,
‘description’ => __( ‘Add widgets here to appear in your sidebar.’, ‘wpbootstrap’ ),
‘before_widget’ => ‘<aside id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</aside>’,
‘before_title’ => ‘<h2 class=”widget-title”>’,
‘after_title’ => ‘</h2>’,
)
);
}
add_action( ‘widgets_init’, ‘wpbootstrap_widgets_init’ );
Aceasta portiune de cod va inregistra trei piese in panoul WordPress pe care le poti edita chiar acolo.
Ultimul lucru pe catre trebuie sa il faci in acest fisier este sa incarci stilul tau si stilul bootstrap folosind codurile:
// Load the main stylesheet
wp_enqueue_style( ”wpbootstrap-style’, get_stylesheet_uri() );// Load Bootstrap stylesheet
wp_enqueue_style( ‘wpbootstrap’, get_template_directory_uri() . ‘/css/bootstrap.css’);
© 2024 - Toate drepturile rezervate.