Skip to main content
Web development

Cum sa convertesti un fisier PSD intr-o tema WordPress cu Bootstrap

Ce este un fisier PSD?

Stiai ca in fiecare zi apar peste 50.000 de site-uri noi WordPress? Poti sa te diferentiezi de acestia doar cu un design unic, original si special creat intr-un fisier PSD. Acest design poate fi convertit intr-o tema WordPress special pentru site-ul tau.

Exista trei standarde atunci cand creezi un design pentru o tema de site. PSD (fisier pentru editorul de imagine de la Adobe numit Photoshop) este unul dintre ele. De aici porneste totul. Apoi continua cu WP (WordPress), platforma de management al continutului si la final cu Twitter Bootstrap. Ultimul standard este un framework pentru dezvoltarea site-urilor responsive foarte folosit de catre programatori si agentii.

In acest articol, iti vom arata cum sa combini toate cele trei standarde astfel incat sa ai ceva unic si special. Pe scurt, cum sa convertesti un fisier PSD intr-o tema WordPress creata cu Bootstrap

Majoritatea persoanelor care s-au invartit in domeniul design-ului web sunt familiarizati cu terminologia de PSD si nu numai. Acestia cunosti si termeni ca si iconografie, tipografie, spatiere si altele. In realitate, acest termen este chiar foarte usor de inteles. PSD este prescurtarea de la PhotoShop Design. Deci, convertirea unui fisier PSD in WordPress este doar procesul de convertire a unui fisier Photoshop intr-o tema functionala de WordPress care are Bootstrap. Aceasta tema va avea metodologii, design si functionalitatile celor trei standarde. Photoshop este cel mai popular program (software) de editare a imaginilor.

Ce este o tema WordPress?

Despre WordPress, am tot scris pe blog, de la recenzii de teme si pluginuri, la recenzii de constructoare de site-uri pana la sfaturi si trucuri.

Atunci cand faci un site WordPress exista doua aspecte importante. Design-ul propriu zis al site-ului si continutul site-ului.

In WordPress, cea mai populara platforma de management al continutului pentru crearea de site-uri, continutul este independent de cum arata site-ul. Design-ul este definit de tema WordPress instalata si activata. Cand spui tema,  poti face comparatie cu temele pentru telefoanele mobile unde se schimba culorile, imaginile, fontul, iconitele, antetele, butoanele si tot stilul vizual. Exista o intreaga industrie in jurul acestor stiluri vizuale de unde poti lua teme gratuite sau care costa de la 25 de dolari in sus.

Ai si optiunea de a crea propriul design, asa cum are titlul si acest articol.

Servicii de convertire a unui fisier PSD in WordPress

Daca crezi ca ai nevoie de ajutor, poti oricand apela la servicii, agentii, designeri web si programatorii care sa te ajute sa realizezi un fisier PSD, sa il convertesti intr-o tema WordPress. Printre cei mai popular, pomenim:

  • PSDtoWPService.com ;
  • Codeable – o piata unde gasesti freelanceri dedicati;
  • WPKraken – o agentie de dezvoltare web care are in portofoliu site-uri pentru Suzuki si Lexus. Acestia au programatori, testeri si designeri.

Convertirea unui fisier PSD intr-o tema WordPress

Primul pas – Decuparea fisierului PSD

Odata ce ai fisierul PSD gata facut, trebuie sa il decupezi. Termenul corect in limba engleza este „Slicing”. Prin acest proces transformi intregul fisier PSD intr-un design responsive pentru WordPress. Desi termenul poate sa creeze confuzie, acesta se refera la taierea si divizarea unei singuri imagini in mai multe imagini. Prin urmare, dintr-un fisier PSD, se fac mai multe fisiere care ulterior se salveaza sub un alt format cum ar fi PNG. Fiecare element de design va avea propria imagine/ propriul fisier. Dintr-un singur organism creezi mai multe, mai mici pe care le rearanjezi astfel incat sa arate fix ca si organismul initial. 

Aceasta operatiune este foarte importanta deoarece nu poti coda un singur fisier pentru a crea un design corespunzator. Pentru a coda un PSD, ai nevoie de cel putin cunostinte HTML si CSS. In acest moment, a aparut versiunea 5 la HTML si 3 la CSS. Iti recomandam sa scrii codul conform celor mai noi tehnologii.

Poti face aceasta operatiune nu doar prin Photoshop, ci si prin GIMP sau alt software puternic de editare a imaginilor. Totusi, noi iti recomandam PhotoShop pentru ca procesul ar trebui sa fie mai usor si mai rapid datorita uneltelor disponibile. Amintim unelte ca si Layers, Layer Mask, manipularea si blending-ul fisierelor PSD si a imaginilor brute cat si extragerea Metadatelor.

Indiferent de softul pe care il folosesti, indicat ar fi ca totul sa fie perfect pana la ultimul pixel. Asigura-te ca nu pierzi timpul sa tai elemente design mari cum ar fi antetul sau subsolul care pot fi codate foarte usor. Ca si exemplu, un antet care are o culoare ca si fundal, poate avea fundalul pus in CSS. Decupeaza elementele antetului daca sunt necesare, dar folosind HTML, poti usor sa adaugi si meniul.

Al doilea pas –  Descarcarea si instalarea Bootstrap-ului

Am mai scris un ghid despre Bootstrap aici. Odata ce ai fisierul PSD taiat, trebuie sa descarci Bootstrap de la adresa web https://getbootstrap.com/. Ai grija sa descarci ultima versiune. Extrage directorul de acolo si vei gasi trei altele css, fonts si js. 

Tine minte, ca este cel mai folosit framework datorita puterii pe care ti-o ofera atunci cand vine vorba de design responsive. Practic, poate fi folosit pentru dispozitive foarte mici ( clasa xs), dispozitive mici (clasa sm), tablete (clasa md), laptopuri si calculatoare (clasa lg).

Vom continua cu urmatorii trei pasi in urmatorul articol. Pana atunci joaca-te cu PSD si cu BootStrap si incearca sa intelegi conceptele din spatele acestora.

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>&copy; 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>&copy; 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>&copy; 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’);

Leave a Reply

Close Menu
Suna
Whatsapp