Çfarë është një temë e përgjegjshme?
Me kaq shumë pajisje mobile, nevoja për faqet e internetit të përgjegjshme është bërë thelbësore për këdo.
Faqja juaj e internetit duhet të jetë e përgjegjshme në mënyrë që të mund të shikohet, lundrohet dhe shfletohet në çdo pajisje.
Temat e përgjegjshme janë një mënyrë paraqitje e faqes së internetit në të cilin elementët e saj vetë-rregullohen sipas madhësive të ekranit për lexueshmëri më të mirë.
Ndërsa gjithnjë e më shumë smartphonët, tabletët dhe pajisje të tjera të lëvizshme janë vënë në dispozicion të publikut, përdorimi i desktopëve dhe laptopëve ka pësuar rënie.
WordPress dhe faqet e përgjegjshme
WordPress është CMS-ja më e njohur që përdoret nga më shumë se 27% e faqeve të internetit. Ajo gëzon mbështetje nga shumë zhvillues dhe dizajner nga të gjitha fushat.
Çfarë është Bootstrap?
Bootstrap është një paketë mjetesh që ndihmon në zhvillimin e aplikacioneve komplekse në internet. Bootstrap është i thjeshtë pasi është i koduar në LessCSS.
Ndiqni hapat e mëposhtëm për të krijuar një faqe të përgjegjshme WordPress bazuar në Bootstrap 3.
Për këtë tutorial, duhet të keni njohuri për gjërat e mëposhtme:
-Si funksionojnë FTP dhe HTML
-Si të redaktoni, krijoni skedarët PHP në serverin tuaj
-Si të navigoni duke përdorur panelin e administratorit të WordPress
Hapi 1: Bootstrap
- Si fillim instaloni WordPress në domainin tuaj.
- Pastaj shkarkoni Bootstrap nga http://getbootstrap.com/
- Pas kësaj, lidheni me serverin tuaj të WordPress duke përdorur një klient FTP si FileZilla.
- Shkoni te wp-content > themes.
- Krijoni një dosje të re në drejtorinë e temave të quajtur BootSTheme dhe ngarkoni përmbajtjen e Bootstrap në këtë dosje.
- Pothuajse të gjitha instalimet e WordPress përmbajnë skedarët e mëposhtëm:
- index.php
- style.css
- header.php
- footer.php
Tani, krijoni 4 skedarë bosh duke përdorur emrat e skedarëve të mësipërm.
Hapi 2: Konfigurimi i Bootstrap
Hapni style.css dhe bashkangjisni kodin vijues.
/*
Theme Name: MyTheme
Theme URI: https://cloudways.com
Description: Mytheme Built on bootstrap
Version:1.1
Author: Ahsan Parwez
Author URI: https://cloudways.com
*/
Këto janë komente që ofrojnë përshkrime dhe detaje rreth temës. Nëse dëshironi, mund të vendosni edhe komentet tuaja.
Hapi 3: Kopjimi i Kodit
Në këtë tutorial, ne nuk do të përdorim të gjitha skedarët CSS dhe JS të dhëna në paketën e bootstrap, do të kopjojohet kodi bootstrap.min.css në
style.css. Dosja juaj style.css duhet të duket kështu.
Hapi 4: Vendosja e Modelit HTML
Duhet të keni një model bazë HTML për të punuar.
WordPress ka funksione të integruara get_header () dhe get_footer () ku ndodhen skedarët përkatësisht header.php dhe footer.php. Ajo që ne do të bëjmë është të shkurtojmë kodin HTML nga lart deri në ndarjen e parë të container div dhe ta bashkëngjisim në skedarin tonë header.php, pas së cilës skedari duhet të ketë pamjen si më poshtë.
Skedari footer.php do të përmbajë pjesën tjetër të kodit:
Nëse e aktivizojmë këtë temë dhe e ngarkojmë në faqen tonë të internetit, nuk do të shohim asgjë akoma, sepse index.php nuk përmban asgjë. Për të ngarkuar header dhe footer, ne do të përdorim funksionin e integruar të WordPress për t’i marrë këta elementë duke ngjitur kodin e mëposhtëm në index.php:
Tani elementët e header dhe footer do të ngarkohen në faqen tonë të internetit, por ajo që do të shfaqet është një faqe bazike që është pa asnjë lloj dizajni.
Hapi 5: Vendosja e Header dhe Footer
Në skedarin header.php, ne do të importojmë stilin Bootstrap duke përdorur funksionin WordPress echo get_stylesheet_uri (), kjo do të importojë stilin e style.css në faqen e internetit dhe do të shfaqet një shirit menu-je.
Por kjo nuk është e gjitha, veçoritë e JavaScript në faqen tonë ende nuk do të funksionojnë, dhe ne nuk do të shohim ndonjë menu me nën-ndarje. Për ta mundësuar këtë, ne do të importojmë skedarët tanë js duke importuar drejtpërdrejt skedarin me URL në footer.php. Vendosni kodin e mëposhtëm para etiketës përmbyllëse body.
WordPress është e njohur për personalizimin dhe shtojcat e saj. Për t’i vendosur këto shtojca, bëjini paste
<?php wp_head(); ?>dhe <?php wp_footer(); ?>në skedarët header.php dhe footer.php . Gjithashtu, për të vendosur tituj dinamikë të faqes në internet, përdorim wp_title (); funksionojnë në skedarin header.php midis etiketave <title>.
Hapi 6: Afishimi i postimeve të veçanta
Tani, do të afishojmë postimet në faqen tonë të index.php të shfaqur në krye, ashtu si postimet e paraqitura që shohim në shumë faqe interenti WordPress.
Shkruani kodin e mëposhtëm në index.php tuaj:
