Miten muuntaa HTML verkkosivuilla WordPress liiketoiminnan teema

Miten muuntaa HTML verkkosivuilla WordPress liiketoiminnan teema

monet yritykset edelleen luottaa yksinkertainen HTML sivustot niiden online-läsnäolo. Nämä HTML-sivustot ovat yleensä staattisia, mikä tarkoittaa, että sinun täytyy muokata koodia muuttaa pienikin yksityiskohta verkkosivuilla. Tämän välttämiseksi, vaikka, voit muuntaa HTML verkkosivuilla WordPress.

tässä tutoriaalissa opetan sinua muuntamaan HTML: n WordPress-liiketoiminnan teemaksi. Tämä pitää kaikki HTML-elementit ennallaan ja antaa sinulle joustavuutta WordPress muokata mitään elementtiä helposti.

jos tunnet sekä HTML: n että WordPressin, niin tämä opetusohjelma on hyvä sinulle. Jos olet newbie, kokeile tehdä tämä nuken verkkosivuilla localhost kuten XAMPP.

• HTML-sivuston muuntaminen WordPress-muotoon
• mitkä WordPress-tiedostot tarvitset
• css: n, JavaScriptin ja kuvien määrittäminen
• WordPress-toimintojen lisääminen toiminnallisuuden lisäämiseksi

HTML-sivuston muuntaminen WordPress-teemaksi

tätä opetusohjelmaa varten olen poiminut ilmaisen HTML-yrityksen teema täältä. Tekniikat pysyvät samana, kun muunnetaan liiketoiminnan teema. Jos sinulla on kysyttävää liiketoiminnan teema, vain pudottaa kommentin tai sähköpostia, ja vastaan mielelläni.

mennään eteenpäin. Ensimmäinen, katsomaan HTML teema ja markdown otsikko, päärunko, ja alatunniste elementtejä.

Header: otsikko sisältää ylimmän osan.

Main Body: se on pitkä sivu, joten zoomasin ulos ottaakseni kuvakaappauksen, mutta koko keskiosa sisältyy päärunkoon.

alatunniste: alatunniste sisältää alaosan.

Vaihe 1: Edellytykset

toivon, että sinulla on jo WordPress asennettuna localhost kuten XAMPP (eli tietokoneesi). Jos ei, olemme jo kattaneet yksityiskohtaisen oppaan, jonka avulla voit asentaa ja perustaa WordPress paikallisesti.

Vaihe 2: Luo Teemakansio

tälle tutoriaalille, käytän XAMPPIA, ja WordPress-sivustoni on asennettu htdocs-kansion alle. Luoda WordPress teema, sinun täytyy käyttää teemoja kansio ja luoda uusi kansio.
nyt, avaa XAMPP-kansio > htdocs > WordPress-kansio (minun tapauksessani se on testausta) > wp-sisältö > teemat.

Teemakansiossa näet kaikki asennetut WordPress-teemat. Luo uusi kansio ja nimeä teemasi.

Step 3: Create PHP Files

the newly created theme folder is empty, and you need to create some files to make it functional. Tätä varten, sinun täytyy käynnistää koodi editor (VS koodi) ja avata koko WordPress teema kansio (minun tapauksessani, farhan-wordpress-teema).

luo nyt seuraavat olennaiset WordPress-tiedostot järjestääksesi teemasi paremmin.

1. tyylillä.css (sisältää teeman yksityiskohdat ja CSS-tiedostot)
2. index.php (palvelee pääsisältöä, jos muita valinnaisia tiedostoja ei ilmoiteta)
3. header.php (sisältää teeman otsikkoelementit)
4. alatunniste.php (sisältää teeman alatunnisteelementit)
5. funktiot.php (sisältää toimintoja, jotka WordPress teema)

Vaihe 4: Kopioi CSS, kuvat, ja JavaScript (JS) kansiot

HTML teema (ladattu edellä), kopioi varat kansio (CSS, JS, ja kuvat kansiot) uuteen WordPress teema kansio.

siirryttyään uuteen WordPress-teemakansioon, se näyttää tältä:

Vaihe 5: Aktivoi uusi WordPress teema

nyt, olet lisännyt tärkeät kansiot, joita tarvitaan tahansa wp teema. Seuraavaksi avaa WordPress-sivusto selaimellasi ja kirjaudu sisään kojelautaan. Siirry kohtaan ulkoasu > Teemat, ja näet, että uusi teemasi on lisätty tähän osioon.

tämä teema näyttää tyhjältä. Voit lisätä tiedot ja banneri äskettäin luotu teema, Avaa tyyli.CSS-tiedosto (luotu aikaisemmin) ja liitä seuraava koodi ja tallenna se (ctrl+S).

/*Theme Name: Farhan WordPress ThemeAuthor: FarhanDescription: Convert HTML to WordPress theme.Version: 1.0*/

banneria varten sinun on lisättävä kuvatiedosto uuteen teemakansioosi. Kuvan koon tulee olla 800 x 600, ja kuvan nimen tulee olla kuvakaappaus (png-muodossa).

, kun olet lisännyt kuvakaappauksen.png-tiedosto, Päivitä wp-admin kojelauta, ja kuvabanneri ilmestyy.

Nyt voit katsoa teeman tiedot, Kun klikkaat banneria.

Seuraava, Klikkaa Aktivoi.

Vaihe 6: Muunna HTML-koodi otsikoksi, indeksiksi ja Alatunnisteeksi

otsikko, alatunniste ja pääosa on merkitty HTML-kommenteilla, jotta voit helposti lisätä sen WordPress-PHP-tiedostoihisi ja muuntaa koodin.

kopioi nyt otsikkokoodi hakemistosta.html ladatun teeman otsikkoon.php tiedosto luotu WordPress teemoja kansio. Sinun täytyy kopioida <!DOCTYPE html> till < / header> ja tallenna se.

samoin Kopioi alatunnisteen ja pääosan elementit indeksistä.html alatunnisteeseen.php ja Hakemisto.php, vastaavasti.

alatunnisteelle kopio <alatunnisteesta> (minun tapauksessani alatunnisteessa on määritelty luokkanimi, joten älä sekaannu), kunnes </html> alatunnisteeseen.php tiedosto ja tallenna se.

kopioi seuraava koodi < / header> tagin jälkeen ja juuri ennen <alatunnusta> indeksiin.php ja tallenna se.

lisää WordPress-toiminto get_header () yläreunaan ja get_footer () indeksin loppuun.php-tiedosto.

Get_header () on sisäänrakennettu funktio, joka kutsuu otsikossa.php ja vastaavasti get_footer () on funktio, joka kutsuu alatunnistetta.php.

lisätään seuraava koodi indeksin yläreunaan.php tiedosto ja tallenna se.

<?php get_header(); ?>

yläreunaan alatunnisteen soittamiseksi seuraava koodi indeksin loppuun.php-koodi ja tallenna se.

<?php get_footer(); ?>

alareunaan nyt, käy sivustollasi, ja näet jotain tällaista.

Step 7: Configuring CSS

the fact that your theme looks weird is because the CSS files are not applied to the theme.

olet jo kopioinut CSS-kansion HTML-teemasta WordPress-teemakansioosi. Nyt, sinun täytyy soittaa näitä CSS-tiedostoja loppuun ulkoasua teeman.

muista, että CSS-tiedostojen nimet saattavat erota toisistaan-tarkista siis ennen tämän prosessin suorittamista.

löydät CSS-tyylisivut otsikosta.php tiedosto, joten sinun täytyy etsiä”rel=” stylesheet ”” CTRL + f.

poista sen jälkeen Google fontin tyylisivut, koska emme tarvitse niitä. Nyt tarvitsee vain rekisteröidä varsinainen CSS stylesheet eli <link rel= ”stylesheet”href=” assets/css/style-starter.css ” >.

WordPress ei ymmärrä säännöllistä CSS-tyylisivua; siksi minun täytyy tiedustella ja rekisteröidä CSS-tyylisivu. Mene juhliin.php tiedosto ja lisää seuraava koodi.

<?phpfunction add_css(){ wp_register_style('first', get_template_directory_uri() . '/assets/css/style-starter.css', false,'1.1','all'); wp_enqueue_style( 'first');}add_action('wp_enqueue_scripts', 'add_css');

Wp_register_style auttaa rekisteröimään CSS-tyylisivusi.

get_template_directory_uri (). ’/href ’ käytetään nykyisen mallihakemiston polun hakemiseen. Se yhdistää nykyisen polun vastaavaan tiedostoon. Joten tässä, sinun täytyy määritellä sijainti CSS tiedosto (href). Voit nähdä, miten määritin polun että CSS tiedosto: get_template_directory_uri (). ”/assets/css / style-starter.css”.

nyt voimme poistaa CSS stylesheet-linkin otsikosta.php tiedosto ja korvata sen seuraavalla koodilla ja tallenna tiedosto.

<?php wp_head(); ?>

wp_head () on olennainen WordPress-koukku, joka on määritelty otsikon <Pää> </Pää> kohdassa.php.

kun käyt WordPress sivuston, huomaat, että CSS-tiedostot ovat todella tiedustellaan uuden WordPress teema, mutta silti, suunnittelu ei ole kunnossa. Se johtuu siitä, että et ole määrittänyt JS skriptejä vielä.

otsikkoon.php, minulla on yksi CSS tyylisivu, ja olen rekisteröinyt sen vain toimintoja.php. Mutta mitä jos sinulla on useita tyylisivuja? Tällöin sinun täytyy määritellä wp_register_style () jokaiselle tyylisivulle. Älä huoli! Voit ottaa esimerkin seuraavasta vaiheesta, jossa minulla on useita JS-skriptejä. Prosessi on sama, joten se tyhjentää kyselyt ja auttaa sinua ymmärtämään, miten teet tämän työn.

Vaihe 8: Configure JavaScript

the HTML theme you are working is using JavaScript, and in the footer.php-tiedosto, JavaScript-tiedostoja kutsutaan jo HTML-muodossa. Ajaa nämä JS tiedostot, sinun tarvitsee vain seurata samoja toimia suoritit edellisessä vaiheessa.

avaa alatunniste.php-tiedosto ja haku ”<script src=” by ”CTRL+f”. Tämä auttaa sinua löytämään kaikki JS tiedostot, jotka sinulla on. Minun tapauksessani minulla on viisi, ja tässä minun täytyy rekisteröityä ja tiedustella ne kaikki.

Seuraavaksi, sinun on avattava funktiosi.php tiedosto ja liitä seuraava koodi:

function add_script(){ wp_register_script('js-script', get_template_directory_uri() . '/assets/js/jquery-3.3.1.min.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'js-script'); wp_register_script('change', get_template_directory_uri() . '/assets/js/theme-change.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'change'); wp_register_script('popup', get_template_directory_uri() . '/assets/js/jquery.magnific-popup.min.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'popup'); wp_register_script('carousel', get_template_directory_uri() . '/assets/js/owl.carousel.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'carousel'); wp_register_script('bootstrap', get_template_directory_uri() . '/assets/js/bootstrap.min.js', array ( 'jquery' ), 1.1, true); wp_enqueue_script( 'bootstrap');}add_action('wp_enqueue_scripts', 'add_script');

näet, että koodin rakenne on sama kuin aiemmin CSS kokoonpano Osa. Mutta tässä, käytät wp_register_script sijaan tyyli. Rekisteröit ja kyselet jokaisen JS-tiedoston samalla funktiolla.

nyt voit poistaa kaikki JS-skriptin linkit (minulla on viisi) alatunnisteesta.php-tiedosto, liitä seuraava rivi koodia koodin lopussa (yllä </body> tag) ja tallenna tiedosto.

<?php wp_footer(); ?>

nyt, avaa sivustosi selaimellasi, ja huomaat, että uusi WordPress teema toimii hyvin, mutta silti, se on muutamia puuttuvia kuvia.

Vaihe 9: Määritä kuvat

tämä prosessi on yksinkertainen, ja tässä sinun täytyy määritellä kuvien polku.

avaa ensin hakemistosi.php-tiedosto ja haku ”<img src=” by ”CTRL+f”. Tämä auttaa sinua löytämään kaikki kuvatiedostot, jotka sinulla on. Minun tapauksessani minulla on kahdeksan, ja täällä tarvitsen polun heille kaikille.

antaaksesi polun kuville; lisää seuraava PHP-koodi src-tunnisteisiin ja tallenna tiedosto.

<img src="<?php echo get_template_directory_uri().'/assets/images/p1.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p2.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p3.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p4.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p5.jpg'; ?>" alt="" class="img-fluid radius-image" /><img src="<?php echo get_template_directory_uri().'/assets/images/p6.jpg'; ?>" alt="" class="img-fluid radius-image" />

Now, your theme will look similar to the HTML theme and fetch all images.

, mutta siitä puuttuvat WordPress-ominaisuudet, kuten muuttuva sivuston nimi ja WordPress-navigointivalikko.

vaihe 10: Ota mukautettu Otsikko käyttöön WordPressissä

jos siirryt WordPress admin-paneeliin ja muutat sivuston otsikkoa, se ei vaikuta sivuston otsikkoon. Jotta tämä ominaisuus, voit käyttää WordPress sisäänrakennettu toiminto bloginfo () kanssa parametri ”nimi” otsikkotunnisteiden otsikossa.php tiedosto ja tallenna tiedosto.

<?php bloginfo( 'name' ); ?>

ja vastaavasti, sinun täytyy käyttää WordPress sisäänrakennettu toiminto bloginfo () parametrin ”nimi” välillä H1 tunnisteet otsikossa.php tiedosto ja tallenna tiedosto.

<?php bloginfo( 'name' ); ?>

now, your theme will poimi the title that you set in Settings – > General – > Site Title inside the WP-admin panel.

vaihe 11: lisää WordPress-navigointivalikko WordPressissä

kun käyt sivustosi WordPress-ylläpitäjässä ja navigoit ulkoasuun, et näe valikkovaihtoehtoa.

valikko pitää ottaa käyttöön ensin lisäämällä funktioihin seuraava koodirivi.php-tiedosto.

add_theme_support( 'menus' );

tämä mahdollistaa valikon toiminnallisuuden teemassasi, mutta se tarvitsee jonkin verran kokoonpanoa, jotta voit hallita valikoita WP-kojelaudastasi.

ensin, löytää missä HTML teema navigointivalikko on ja sitten korvata se käyttämällä WordPress sisäänrakennettu toiminto wp_nav_menu (); voit lukea lisää tästä toiminnosta täällä.

tämän teeman otsikossa.php sisältää navigointivalikon.

etsi seuraavat koodirivit:

<ul class="navbar-nav mx-lg-auto"><li class="nav-item active"><a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a></li><li class="nav-item @@about__active"><a class="nav-link" href="about.html">About</a></li><li class="nav-item @@contact__active"><a class="nav-link" href="contact.html">Contact</a></li></ul>

korvaa yllä olevat rivit:

<?php wp_nav_menu( array( 'menu_class' => 'navbar-nav mx-lg-auto', 'container' => 'ul', )); ?>

WordPress valikko näkyy nyt teema ja lisätä joustavuutta WordPress liiketoiminnan teema.

Pakettiin!

Toivottavasti tämä artikkeli auttoi sinua ymmärtämään, miten muuntaa HTML-mallin tai sivuston WordPress teema. Tämä on yksityiskohtainen opetusohjelma, jossa olen kattanut yksitoista vaihetta osoittaa prosessin.

jos sinulla on kysyttävää ja kysyttävää, voit vapaasti kysyä milloin tahansa alla olevassa kommenttiosiossa.