vagy ha saját WordPress témát hoz létre, gyermek témát a szülőjétől, vagy szerkeszti a témát, akkor szembe kell néznie a saját CSS egyéni stíluslapjának hozzáadásával. Valószínűleg akkor is szeretné felülírni néhány stílus az alapértelmezett téma stíluslap.

számos módja van a saját stílusok hozzáadásának és/vagy az alapértelmezett stílusok felülbírálásának. Tehát mi a legjobb módja ennek? A fejlesztők egyetértenek abban, hogy saját egyéni CSS fájlokat hoz létre, és beágyazza őket a WordPress témába, amelyen dolgozik.

egyéni CSS-kód hozzáadásának módjai a WordPress témákhoz

nem fogunk beszélni a CSS-stílusok HTML-elemekbe történő hozzáadásának leértékelt módjairól, vagy a < stílus> blokkok hozzáadásáról. Manapság ezt a módszert a fejlesztők elhagyják. Ezenkívül nem SEO-barátságosak,ami manapság fontos kérdés.

nem is javasoljuk a téma eredeti CSS stíluslapjának szerkesztését (általában stílus.css), vagy egyéni kód hozzáadása hozzá. Ez a fájl gyakran nagyon nagy és nehezen kezelhető. Bármilyen apró gépelési hiba vagy szintaktikai hiba az egész webhely összeomlását okozhatja.

ebben a cikkben megmutatjuk, hogyan hozhat létre egyéni CSS fájlt, és beágyazhatja azt egy WordPress témába.

hogyan adhatunk hozzá egyéni stíluslap fájlokat a WordPress témákhoz a wp_register_style() és a wp_enqueue_style () használatával

az egyéni CSS fájlok WordPress-be történő beágyazásának első lépése a fájlok hozzáadása a témához. Vagy egy FTP kliens vagy a cPanel fájlkezelő keresse meg a téma mappát, és nyissa meg. Most létrehozhat egy új fájlt és nevet például egyéni.css vagy töltse fel a CSS fájlt a számítógépről. Ha egynél több CSS fájlt kell hozzáadnia a WP témához, ismételje meg ezt a lépést.

ha helyesen hajtotta végre ezt a lépést, látnia kell az egyéni CSS fájlt vagy fájlokat a WordPress telepítési Témaszerkesztőjében.

egyéni CSS fájlok összekapcsolása a webhely fejrésze

most, hogy hozzáadta az egyéni CSS fájlokat a WP téma mappához, ideje összekapcsolni a fájlokat a webhely < head> szakaszába. Így a webhely alkalmazhatja az egyéni stílusokat elemeire.

egyszerűen hozzáadhat egy < link>elemet a webhely < head>szakaszához, lehetőleg közvetlenül a záró </head> címke előtt. Így az egyéni CSS stílusok betöltődnek utoljára, és felülbírálják az alapértelmezett stílusokat. A webhely < head> szakasza általában a téma mappa fejlécében található.php fájl és elérhető keresztül a WordPress téma szerkesztő.

Íme egy példa a elemre, amikor a webhely a szerver gyökérmappájában a “test-site” mappában található, a téma mappája “test-theme”, A CSS fájl pedig “custom”.css”:

<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">

ez az egyszerű megoldás jól fog működni, de ez nem a legjobb gyakorlat a CSS fájlok beágyazására a WordPress webhelyekbe.

CSS fájl beágyazása a WordPressbe a wp_register_style() és a wp_enqueue_style() funkciók használatával

az egyéni CSS fájlok beágyazásának ajánlott gyakorlata a WordPress webhelyére a stíluslap regisztrálása A WP téma funkcióiban.php fájl wp_register_style() és wp_enqueue_style() függvényekkel. Így a CSS fájlok betöltődnek abban a pillanatban, amikor a wp_head művelet elindul. A stíluslap közvetlenül a téma alapértelmezett stíluslapja után kerül elhelyezésre. lehetővé teszi az alapértelmezett stílusok felülbírálását.

az első dolog, hogy keresse meg a téma funkcióit.php fájl. A WordPress Témaszerkesztőben található. Azt is csinálni FTP vagy cPanel fájlkezelő. Ha gyermek témán dolgozik, szerkessze a gyermek témák függvényfájlját, ne a szülő témát. Így elkerülheti az egyéni kód elvesztését a szülő téma frissítésekor. Görgessen le a funkciók aljára.php és adja hozzá a következő kódrészletet:

function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_enqueue_style( 'custom' );}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );

a kódrészlet testreszabása: a fenti példában a regisztrációs függvényt “additional_stylesheets” – nek neveztük el, és regisztráltunk egy stíluslap CSS fájlt “custom” néven.css”, amelyet korábban feltöltöttek a téma mappánkba. A függvényt tetszés szerint nevezheti el, és kicserélheti a függvény nevét a snipet felső és alsó sorában. Ha a stíluslap fájl neve más, mint az egyéni.css cserélje ki az egyéni szót a snipetben a saját fájlnevével.

ha mindent helyesen csinált, elkezdheti írni a saját CSS-kódját a stíluslapba. Észre fogja venni, hogy a stílusok befolyásolják a webhelyet, amikor menti a módosításokat és újratölti az oldalt. Az oldal frissítésekor ne felejtse el megtisztítani a böngésző gyorsítótárát.

több egyéni stíluslap CSS fájl beillesztése funkciókba.php wp_register_style() és wp_enqueue_style()

mielőtt több CSS fájlt adna hozzá a WP témához, vegye figyelembe, hogy ez több szerverkérést okoz a webhely betöltésekor, ami befolyásolja a webhely betöltési sebességét. Próbáljon minél kevesebb stíluslapot használni.

most tegyük fel, hogy van egy külön stíluslapfájl az asztali stílusokhoz, a custom néven.css és egy másik stíluslap fájl neve responsive.CSS mobil eszközökhöz. Mindkét stíluslap beágyazása a funkciókba.a php fájl egyszerű, a fent bemutatott egyetlen fájlrészlet enyhe módosítását igényli:

function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_register_style( 'responsive', get_template_directory_uri().'/responsive.css' );// register another file herewp_enqueue_style( 'custom' );wp_enqueue_style( 'responsive' );// enqueue another file here}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );

ugyanaz, mint az egyetlen fájlrészlet testreszabása, módosítsa a fájlneveket a helyzetnek megfelelően.

további információk a wp_register_style() és a wp_enqueue_style() függvényekről

Ha többet szeretne megtudni a wp_register_style() és a wp_enqueue_style() függvényekről a stíluslapok regisztrálásához, látogasson el a dedikált WP Codex oldalra.