hogyan lehet átalakítani HTML honlapján WordPress üzleti téma

hogyan lehet átalakítani HTML honlapján WordPress üzleti téma

sok vállalkozás még mindig támaszkodnak egyszerű HTML weboldalak az online jelenlét. Ezek a HTML-webhelyek általában statikusak, ami azt jelenti, hogy szerkesztenie kell a kódot, hogy még egy apró részletet is megváltoztasson a webhelyen. Ennek elkerülése érdekében azonban konvertálhatja HTML webhelyét WordPress – be.

ebben az oktatóanyagban megtanítom, hogyan lehet A HTML-t WordPress üzleti témává konvertálni. Ez az összes HTML elemet érintetlenül tartja, és a WordPress rugalmasságát biztosítja bármely elem egyszerű testreszabásához.

ha ismeri mind a HTML-t, mind a WordPress-t, akkor ez az oktatóanyag jó neked. Ha újonc vagy, próbáld meg ezt egy dummy weboldallal a localhost-on, mint például az XAMPP.

• HTML weboldal konvertálása WordPress-be
• melyik WordPress fájlra van szüksége
• CSS, JavaScript és képek konfigurálása
• WordPress funkciók hozzáadása funkcionalitás hozzáadásához

HTML webhely konvertálása WordPress témába

ehhez a bemutatóhoz felvettem egy ingyenes HTML üzleti témát innen. A technikák változatlanok maradnak, miközben bármilyen üzleti témát átalakítanak. Ha kérdése van az üzleti témájával kapcsolatban, csak írjon egy megjegyzést vagy egy e-mailt, és örömmel válaszolok.

lépjünk tovább. Először vessen egy pillantást a HTML témára, és jelölje le a fejlécet, a fő törzset és a lábléc elemeket.

fejléc: a fejléc tartalmazza a felső részt.

fő törzs: ez egy hosszú oldal, ezért kicsinyítettem, hogy képernyőképet készítsek, de az egész középső rész benne van a fő testben.

lábléc: a lábléc rész tartalmazza az alsó részt.

1. lépés: Előfeltételek

remélem, hogy már telepítette a WordPress-t a localhost-ra, például az XAMPP-re (azaz a számítógépére). Ha nem, akkor már bemutattunk egy részletes útmutatót, amely segít a WordPress helyi telepítésében és beállításában.

2. lépés: hozza létre a téma mappát

ehhez az oktatóanyaghoz XAMPP-t használok, és a WordPress webhelyem a htdocs mappában van telepítve. WordPress téma létrehozásához el kell érnie a témák mappáját, és létre kell hoznia egy új mappát.
most nyissa meg a XAMPP mappát > htdocs > WordPress mappát (az én esetemben tesztelés) > wp-content > témák.

a témák mappában látni fogja az összes telepített WordPress témát. Hozzon létre egy új mappát, és nevezze el a témát.

3.lépés: PHP fájlok létrehozása

az újonnan létrehozott téma mappa üres, ezért létre kell hoznia néhány fájlt a működéséhez. Ehhez el kell indítania a kódszerkesztőt (VS kód), és meg kell nyitnia a teljes WordPress téma mappát (az én esetemben farhan-wordpress-téma).

most hozza létre a következő alapvető WordPress fájlokat a téma jobb rendezéséhez.

1. stílus.css (téma részleteket és CSS fájlokat tartalmaz)
2. index.php (a fő tartalmat szolgálja, ha más opcionális fájlok nincsenek deklarálva)
3. fejléc.php (a téma fejléc elemeit tartalmazza)
4. lábléc.php (a téma lábléc elemeit tartalmazza)
5. függvények.php (olyan funkciókat tartalmaz, amelyek be vannak kapcsolva a WordPress témában)

4. lépés: Másolja a CSS, Images és JavaScript (js) mappákat

a HTML-témából (fent letöltött), másolja az eszközök mappát (CSS, JS és képek mappák) az új WordPress-téma mappába.

miután az új WordPress téma mappába költözött, így fog kinézni:

5.lépés: új WordPress Téma aktiválása

most hozzáadta azokat a fontos mappákat, amelyek minden wp témához szükségesek. Ezután nyissa meg a WordPress webhelyet a böngészőjében, és jelentkezzen be az irányítópultra. Keresse meg a megjelenés > témák elemet, és látni fogja, hogy az új téma hozzá lett adva ehhez a szakaszhoz.

ez a téma üresnek tűnik. Az újonnan létrehozott téma információinak és szalagcímének hozzáadásához nyissa meg a stílusát.css fájl (korábban létrehozott) és illessze be a következő kódot, és mentse el (ctrl + s).

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

a szalaghirdetéshez képfájlt kell hozzáadnia az új témamappához. A kép méretének 800 x 600-nak kell lennie, a kép nevének pedig képernyőképnek (png formátum) kell lennie.

Miután hozzáadta a képernyőképet.PNG fájl, frissítse a wp-admin irányítópultot, és megjelenik az image banner.

most megtekintheti a téma adatait, amikor rákattint a szalaghirdetésre.

Ezután egyszerűen kattintson az Aktiválás gombra.

6. lépés: HTML kód konvertálása fejlécbe, indexbe és láblécbe

a fejléc, a lábléc és a fő törzs HTML megjegyzésekkel van jelölve, hogy könnyen hozzáadhassa a WordPress PHP fájljaihoz és konvertálja a kódot.

most másolja a fejléc kódját az indexből.a letöltött téma html-je a fejlécbe.a WordPress témák mappában létrehozott php fájl. Meg kell másolni a <!DOCTYPE html> till < / header> és mentse el.

hasonlóképpen másolja át a láblécet és a fő testrészeket az indexből.html a láblécbe.php és index.php, ill.

a lábléchez másolja a < lábléc>(az én esetemben van egy osztálynév, amelyet a lábléc címkéje határoz meg, ezért ne keveredjen össze) a </html> – ig a láblécbe.php fájl és mentse el.

ezután másolja az összes kódot a </header>címke után, közvetlenül a < lábléc> előtt az indexbe.php és mentse el.

Add hozzá a WordPress függvényt get_header() a tetején és get_footer() az index végén.php fájl.

a get_header () egy beépített függvény, amely a fejlécben hív.a php-hez hasonlóan a get_footer () egy olyan függvény, amely a láblécet hívja.php.

adja hozzá a következő kódot az index tetejére.php fájl és mentse el.

<?php get_header(); ?>

lábléc hívásához illessze be a következő kódot az index végére.php kód és mentés.

<?php get_footer(); ?>

most, látogasson el a helyszínen, és látni fogja, valami ilyesmi.

7.lépés: CSS konfigurálása

az a tény, hogy a téma furcsán néz ki, mert a CSS fájlok nem vonatkoznak a témára.

már átmásolta a CSS mappát a HTML témából a WordPress téma mappájába. Most meg kell hívnia ezeket a CSS fájlokat a téma megjelenésének befejezéséhez.

ne feledje, hogy a CSS — fájlok nevei eltérhetnek-ezért ellenőrizze még egyszer a folyamat végrehajtása előtt.

meg fogja találni a CSS stíluslapok a fejlécben.php fájl, így meg kell keresni a “rel=”stíluslap” ” a CTRL + f.

Ezután távolítsa el a Google betűtípus stíluslapokat, mert nincs rájuk szükségünk. Most csak regisztrálnom kell a tényleges CSS stíluslapot, azaz <link rel=”stíluslap” href=”eszközök/css/stílusindító.css ” >.

a WordPress nem érti a szokásos CSS stíluslap struktúrát; ezért kell enqueue és regisztrálnia a CSS stíluslapot. Menjen a funkciókhoz.php fájlt, és adja hozzá a következő kódot.

<?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');

a wp_register_style segít regisztrálni a CSS stíluslapot.

a get_template_directory_uri() . a’ / href ‘ az aktuális sablonkönyvtár elérési útjának lekérésére szolgál. Összefűzi az aktuális elérési utat a megfelelő fájllal. Tehát itt meg kell határoznia a CSS fájl (href) helyét. Láthatja, hogyan határoztam meg a CSS fájl elérési útját: get_template_directory_uri() . ‘/eszközök / css / stílusindító.css’.

most eltávolíthatjuk a CSS stíluslap linket a fejlécből.php fájlt, és cserélje ki a következő kódot, és mentse el a fájlt.

<?php wp_head(); ?>

a wp_head() egy alapvető WordPress horog, amelyet a fejléc < head></head> szakasza határoz meg.php.

amikor meglátogatja a WordPress webhelyét, észreveszi, hogy a CSS fájlok valójában az új WordPress témához kapcsolódnak, de a tervezés még mindig nincs rendben. Ez azért van, mert még nem konfigurálta a JS szkripteket.

a fejlécben.php, van egy CSS stíluslapom, és csak függvényekben regisztráltam.php. De mi van, ha több stíluslapja van? Ebben az esetben meg kell adnunk a wp_register_style() függvényt minden stíluslaphoz. Ne aggódj! Vegyünk egy példát a következő lépésből, ahol több JS szkriptem van. A folyamat ugyanaz, így törli a lekérdezéseket, és segít megérteni, hogyan fogja elvégezni ezt a munkát.

8. lépés: JavaScript beállítása

a HTML-téma, amellyel dolgozik, JavaScript-et használ, és a láblécben található.php fájl, a JavaScript fájlokat már HTML formátumban hívják meg. Ezeknek a JS fájloknak a futtatásához csak annyit kell tennie, hogy ugyanazokat a műveleteket hajtja végre, mint az előző lépésben.

nyissa ki a láblécet.php fájlt, és keresse meg a” <script src= “A”CTRL+f”. Ez segít megtalálni az összes JS fájlt. Az én esetemben öt van, és itt kell regisztrálnom és enqueue mindet.

ezután meg kell nyitnia a funkciókat.php fájlba illessze be a következő kódot:

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');

láthatja, hogy a kódszerkezet ugyanaz, mint korábban a CSS konfigurációs részében. De itt a stílus helyett a wp_register_script-et fogja használni. Az egyes JS fájlokat ugyanabban a függvényben regisztrálja és lekérdezi.

most eltávolíthatja az összes JS script linket (öt van) a láblécből.php fájlt, majd illessze be a következő kódsort a kód végére (</body> címke felett), és mentse el a fájlt.

<?php wp_footer(); ?>

most nyissa meg webhelyét a böngészőjében, és észre fogja venni, hogy az új WordPress téma jól működik, de még mindig van néhány hiányzó kép.

9.lépés: képek konfigurálása

ez a folyamat egyszerű, és itt meg kell határoznia a képek elérési útját.

először nyissa meg az indexet.php fájlt, és keresse meg a” <img src= “A”CTRL+f”. Ez segít megtalálni az összes képfájlt. Az én esetemben nyolc van, és itt szükségem van az ösvény mindegyikre.

a képek elérési útjának megadásához adja meg a következő PHP kódot az src címkékbe, és mentse el a fájlt.

<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" />

most a témája hasonló lesz a HTML témához, és lekéri az összes képet.

de hiányzik a WordPress funkciók, például a webhely címének megváltoztatása és a WordPress navigációs menü.

10. lépés: engedélyezze az egyéni címet a WordPress

ha belép a WordPress admin panelbe, és megváltoztatja a webhely címét, ez nem befolyásolja a webhely címét. A funkció engedélyezéséhez használhatja WordPress beépített funkció bloginfo () a paraméterrel “név” a fejléc címcímkéi között.php fájlt, és mentse el a fájlt.

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

hasonlóképpen használnia kell WordPress beépített funkció bloginfo() a paraméterrel “név” a H1 címkék között a fejlécben.php fájlt, és mentse el a fájlt.

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

most, a téma felveszi a címet, hogy állítsa be a Beállítások -> Általános-> Site cím belsejében WP-admin panel.

11.lépés: Add WordPress navigációs menü WordPress

amikor meglátogatja a WordPress admin a webhely, és keresse meg a megjelenés, akkor nem fog látni egy lehetőséget a Menü.

először engedélyeznie kell a menüt a következő kódsor hozzáadásával a funkciókhoz.php fájl.

add_theme_support( 'menus' );

ez lehetővé teszi a téma Menüfunkcióit, de bizonyos konfigurációra van szükség a menük kezeléséhez a WP irányítópultjáról.

először keresse meg a HTML téma navigációs menüjét, majd cserélje ki a WordPress beépített funkciójával wp_nav_menu(); erről a funkcióról itt olvashat bővebben.

ebben a témában a fejléc.a php tartalmazza a navigációs menüt.

keresse meg a következő kódsorokat:

<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>

cserélje ki a fenti sorokat:

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

a WordPress menü most megjelenik a témáján, és rugalmasságot ad a WordPress üzleti témájához.

Csomagolás!

remélem, hogy ez a cikk segített megérteni, hogyan lehet HTML sablont vagy webhelyet WordPress témává konvertálni. Ez egy részletes bemutató, ahol tizenegy lépést fedtem le a folyamat bemutatására.

ha bármilyen kérdése van, kérdezze meg bármikor az alábbi megjegyzés részben.