A kezdetekben (a web) minden weboldal csak szövegből és statikus HTML-ből állt. Most azonban, több mint 20 évvel később, a web egy sokkal másabb hely. A weboldalak sokkal összetettebbek. Gazdagabb és élvezetesebb élményt nyújtanak a webhelyek készítői és a látogatók számára egyaránt.
Ez nagyrészt az olyan nyílt forráskódú projekteknek köszönhető, mint a WordPress. Amely az elmúlt mintegy tíz évben sikeresen teljesítette alapvető küldetését, az online publikálás demokratizálását (és közben még sok minden mást is), így bárki, aki rendelkezik egy WordPress telepítéssel és a megfelelő témával/pluginokkal, modern, fejlett dizájnnal és funkcionalitással rendelkező weboldalt hozhat létre. Nincs szükség kódolásra – még HTML-re sem.
Ez az oka annak, hogy a magamfajta lelkes WordPress-felhasználók számára szinte hihetetlen, hogy 2018-ban valaki még mindig statikus HTML-weboldalt üzemeltet egy témával és bővítményekkel ellátott WordPress-weboldal helyett. De tény, hogy még mindig jelentős mennyiségű aktív, csak HTML oldalak vannak. (Vagy HTML egy kis CSS-szel.)
Elismerem, ezeknek a webhelytulajdonosoknak jó okuk lehet arra, hogy nem frissítenek vagy nem térnek át. Talán a webhelyük tartalma soha nem változik, és a már meglévő egyszerű formázás és design használható? Vagy talán kevesebb gondot jelent, mint egy WordPress oldal frissítése miatt aggódni? Mindkettő (többek között) érvényes ok. A “Ne javítsd meg, ami nem romlott el!”
Van egy olyan érzésem azonban, hogy egyesek (talán sokan) nem ezek az elsődleges okok, amiért nem tették meg az ugrást. A legnyilvánvalóbb az, hogy egyszerűen nem tudják, hogyan alakítsák át a HTML-oldalukat WordPress-oldallá. Különösen anélkül, hogy elveszítenék a tartalmat, vagy hogy oldalanként túlzott formázást kellene végezniük.
Szerencsére, ahogy a WordPress esetében is gyakran előfordul, többféleképpen is meg lehet oldani ezt a problémát. Az alábbiakban összeállítottam néhány lehetőséget.
Iratkozz fel a Youtube-csatornánkra
A statikus HTML-oldal WordPress-oldalra való átalakításának lehetőségei
Az, hogy hogyan választod a statikus HTML-oldalad WordPress-oldalra való átalakítását, kétségtelenül függ a személyes preferenciáidtól, a kívánt idő/pénzbeli befektetésedtől és a kóddal kapcsolatos készségszintedtől. Önnek kell eldöntenie, hogy melyik a legjobb az Ön számára, de az alábbi összefoglalók segítségével gyorsan dönthet, és egyenesen az Ön konkrét helyzete szempontjából legfontosabb információkhoz ugorhat ebben a bejegyzésben.
Három fő lehetőség van:
1. Kézzel hozzon létre egy WordPress-témát a jelenlegi statikus HTML-oldala alapján.
Ez megköveteli, hogy belenyúljon a kódjába. FTP-n keresztül hozzá kell férned a jelenlegi webhelyed könyvtárához, és a meglévő kódodat kell kiindulópontként használnod. Onnan létre kell hoznia a WordPress témához szükséges fájlokat, és kódrészleteket kell másolnia a WordPress kódkönyvből. Ez meglehetősen egyszerű és egyszerű, ha van némi tapasztalata a HTML, a CSS és egy kis PHP ismeretében.
2. Telepítsen egy előre elkészített témát, és egyszerűen migrálja a tartalmát.
Ez valószínűleg a legjobb megoldás az egyszerűség és az érték metszéspontjában. Feltételezve, hogy már van tárhelye a jelenlegi weboldalához, csak akkor kell pénzt költenie, ha prémium téma megvásárlása mellett dönt. A plugin, amelyet a tartalom importálásához használni fogunk, szabadon elérhető a hivatalos WordPress Plugin Repositoryban.
3. Fizetni azért, hogy egy HTML-ből WordPress-be konvertáló szolgáltatással újra elkészíttesse a webhelyét.
Ez a legegyszerűbb megoldás, mivel nem kell sokat tennie semmiért. Azonban nem sokat fog segíteni a WordPress megismertetésében, és a költségek attól függően változnak, hogy kit választasz. Az alábbiakban nem fogok foglalkozni ezzel a lehetőséggel, mert ha ez az az útvonal, amelyik érdekli, akkor egyszerűen végezhet egy gyors keresést a szolgáltatók között, és ők gondoskodnak a többiről.
A HTML-ről WordPressre való átalakítás előkészítése
Bármelyik útvonal mellett is dönt az alábbiakban, van néhány dolog, amit meg kell tennie, mielőtt belevág.
Az első a tárhelycsomag kiválasztása. Át kell néznie az ott lévő lehetőségeket, és el kell döntenie egy olyan csomagot, amely a legjobban megfelel az igényeinek. Vagy talán inkább egy helyi WordPress telepítést szeretne létrehozni? Később bármikor áttelepítheti egy tárhelyszolgáltatásra.
Amint kiválasztottad, telepítened kell a WordPress-t, és be kell jelentkezned a WP Adminba. Ez az a pont, ahol a két lehetséges útvonalunk elválik.
A statikus HTML-oldalad manuális átalakítása WordPressre
Ha az a célod, hogy a statikus HTML-oldaladról ne csak a tartalom kerüljön át a WordPressbe, hanem a jelenlegi dizájnodat is megduplázd, ez azt jelenti, hogy saját egyéni témát kell létrehoznod. Szerencsére ez nem olyan ijesztő, mint amilyennek elsőre hangzik. Mindössze néhány mappa és fájl létrehozását, egy kis másolást és beillesztést, majd az eredmény feltöltését jelenti.
Szükséged lesz egy kódszerkesztőre, például a Sublime vagy a Notepad++ programra, valamint hozzáférésre mind a HTML-oldalad könyvtárához, mind az új WordPress-telepítésed könyvtárához.
1. lépés: Új téma mappa és szükséges fájlok létrehozása
Az asztalon hozz létre egy új mappát a témafájlok tárolására. Nevezd el úgy, ahogyan a témádat szeretnéd elnevezni.
Ezután hozz létre néhány fájlt (amelyek mind az új témamappádba kerülnek) a kódszerkesztődben. Egyelőre ne csinálj velük semmit. Csak hagyd őket nyitva a további szerkesztéshez.
- Style.css
- Index.php
- header.php
- sidebar.php
- footer.php
2. lépés: A meglévő CSS másolása az új stílustáblázatba
Ha egy dizájnt szeretnél lemásolni, ez valószínűleg azt jelenti, hogy van legalább néhány CSS, amit el akarsz menteni. Tehát az első fájl, amit szerkeszteni akarsz, a Style.css fájlod.
Kezdésként a következőt add a fájlod elejére.
/*Theme Name: Replace with your Theme's name.Theme URI: Your Theme's URIDescription: A brief description.Version: 1.0Author: YouAuthor URI: Your website address.*/
Ez után a szakasz után egyszerűen illeszd be a meglévő CSS-edet alulra. Mentsd el és zárd be a fájlt.
3. lépés: A jelenlegi HTML-ed szétválasztása
Mielőtt rátérnénk a harmadik lépésre, hadd adjak egy gyors megjegyzést a WordPress működéséről. A WordPress a PHP-t használja az adatdarabok meghívására és lekérdezésére a mögöttes adatbázisból. Minden egyes fájl, amelyet ebben a kis bemutatóban használunk, arra szolgál, hogy megmondja a WordPressnek, hogy a webhelyed tartalmának melyik részét és hol kell megjeleníteni.
Amikor tehát azt mondom, hogy “feldaraboljuk” a meglévő HTML-edet, akkor valójában egyszerűen kivágjuk és beillesztjük a meglévő kódod egyes részeit az általunk most létrehozott különböző fájlokba, hogy a WordPress tudja, hol kell megjeleníteni őket.
Elkezdjük.
Először is nyisd meg a jelenlegi webhelyed index.html fájlját. Jelöljünk ki mindent a fájl elejétől a nyitó div class=”main” tagig. Másold be ezt a részt a header.php fájlodba, mentsd el és zárd be.
Másodszor, menj vissza az index.html fájlodba. Jelölje ki a aside class=”sidebar” elemet és mindent, ami benne van. Másold ki és illeszd be ezt a részt a sidebar.php fájlodba, mentsd el és zárd be.
Harmadszor, az index.html fájlban jelölj ki mindent az oldalsáv után, másold ki és illeszd be a footer.php fájlba, mentsd el és zárd be.
Végül, az index.html fájlban jelölj ki mindent, ami balra van (ez legyen a fő tartalmi rész) és illeszd be az index.php fájlba. Mentsd el, de még ne zárd be.
Az index.html fájlt azonban most már bezárhatod, és továbbléphetsz az utolsó lépésekhez. Majdnem kész!
4. lépés: Az index.php fájl véglegesítése
Az új témád index.php fájljának véglegesítéséhez meg kell győződnöd arról, hogy az képes meghívni a többi szekciót (a fő tartalom mellett), amelyek a többi létrehozott fájlban találhatók. Vagy más szóval, rakd össze újra az imént “feldarabolt” elemeket.
Az index.php fájlod legelején helyezd el a következő sorokat: php.
<?php get_header(); ?>
Az index.php fájlod legvégén pedig helyezd el ezeket a sorokat: php.
<?php get_sidebar(); ?><?php get_footer(); ?>
És végül hozzá kell adnunk az úgynevezett The Loop-ot. Ez a php elsődleges darabja, amelyet a WordPress arra használ, hogy megjelenítse a poszt tartalmát a látogatók számára. Tehát az utolsó lépés az új témád index.php fájljának létrehozásában az alábbi kód hozzáadása a tartalom részen belül.
<?php if ( have_posts() ) : ?><?php while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> <div class="post-header"> <div class="date"><?php the_time( 'M j y' ); ?></div> <h2><a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> <div class="author"><?php the_author(); ?></div> </div><!--end post header--> <div class="entry clear"> <?php if ( function_exists( 'add_theme_support' ) ) the_post_thumbnail(); ?> <?php the_content(); ?> <?php edit_post_link(); ?> <?php wp_link_pages(); ?> </div> <!--end entry--> <div class="post-footer"> <div class="comments"><?php comments_popup_link( 'Leave a Comment', '1 Comment', '% Comments' ); ?></div> </div><!--end post footer--> </div><!--end post--><?php endwhile; /* rewind or continue if all posts have been fetched */ ?> <div class="navigation index"> <div class="alignleft"><?php next_posts_link( 'Older Entries' ); ?></div> <div class="alignright"><?php previous_posts_link( 'Newer Entries' ); ?></div> </div><!--end navigation--><?php else : ?><?php endif; ?>
Mentsd el az index.php-t és zárd be. A témád most már készen van! Már csak annyi van hátra, hogy feltöltsd a WordPress webhelyedre.
5. lépés: Az új téma feltöltése
Most, hogy létrehoztad a témafájljaidat, és mindet az új téma mappádban tároltad, hozzá kell férned az új WordPress telepítésed könyvtárához.
Tedd az új téma mappádat a /wp-content/themes/ mappába. Ezután navigálj vissza a WP Admin > Megjelenés > Témák menüpontba, és az újonnan létrehozott témádnak ott kell megjelennie. Menj előre, és aktiváld!
Ezután már csak annyi a teendő, hogy feltöltsd az új WordPress webhelyedet a régi webhelyed tartalmával. Kövesse végig az alábbi részt (átugorva az előre elkészített téma használatáról szóló részt), hogy lássa, hogyan történik ez.
Elkészített WordPress téma használata és HTML tartalom importálása
Ha a fenti lépések túl intenzívnek vagy időigényesnek tűnnek Önnek, akkor nyugodt lehet, van más megoldás is. Ahelyett, hogy bármilyen dizájnt alakítanál át WordPress-témává, amivel éppen dolgozol, kihasználhatod a szélesebb WordPress-piacon elérhető több ezer téma bármelyikét.
Vannak ingyenes témák és vannak prémium témák. Mielőtt eldöntenéd, melyik a legjobb számodra, érdemes utánaolvasnod, hogy mely témákat tervezték az igényeidnek megfelelően, és témakategóriák szerint böngészni itt az Elegant Themesnél és máshol is.
Mihelyt kiválasztott egy témát, ami tetszik (és letöltötte a zippelt fájlcsomagját), vissza kell mennie a WP Admin > Megjelenés > Témák > Új hozzáadása és telepíteni/aktiválni az új WordPress témát.
Mihelyt ez megtörtént, új WordPress webhelye és témája lesz – de semmi más. Amikor előnézetben megtekinted a webhelyedet, az üres lesz tartalomtól, és valószínűleg elég unalmasan fog kinézni. Ez nem baj, mert a következőkben a régi webhelyed tartalmát fogjuk importálni.
A WP Adminban menj a Plugins > Add New menüpontra, és keress rá a HTML Import 2 nevű pluginra, amelyet Stephanie Leary készített. Miután ezt a plugint telepítettük és aktiváltuk, kövessük a praktikus használati útmutatóját a HTML oldalak teljes könyvtárának importálásához. Képekkel együtt!
Ezután az összes régi tartalma élni fog a WordPressben és az új témája által formázva. Vagy, ha a fentiekben saját témát készítettél, a webhelyednek nagyjából úgy kell kinéznie, mint korábban – csak éppen a WordPressen fut.
Végkövetkeztetés
Ha ezt a bejegyzést útmutatónak használtad a webhelyed WordPressre való áttelepítéséhez, akkor most csatlakoztál a világ egyik legnagyobb nyílt forráskódú közösségéhez. Üdvözöljük! Ez egy szórakoztató hely, ahol rengeteg fejlesztő, tervező, blogger, barkácsoló és még sokan mások vannak – mindannyian a WordPress-szel és a WordPress témákkal/pluginokkal építenek, játszanak és alkotnak.
Ha “elkapta a WordPress-bogár”, a WordPress.org hivatalos honlapja tele van hasznos témákkal, pluginokkal és egyéb erőforrásokkal. Ha tovább szeretné finomítani a témafájljait, fedezze fel a Codexet, ahol végtelennek tűnő tippeket, trükköket és variációkat talál.