{"id":233592,"date":"2023-02-18T13:27:00","date_gmt":"2023-02-18T10:27:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233592"},"modified":"2022-11-11T00:31:42","modified_gmt":"2022-11-10T21:31:42","slug":"wordpress-teeman-opetusohjelma-aloittelijoille-osa-3-dynaaminen-sisaeltoe","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/fi\/wordpress-teeman-opetusohjelma-aloittelijoille-osa-3-dynaaminen-sisaeltoe\/","title":{"rendered":"WordPress-teeman opetusohjelma aloittelijoille \u2013 Osa 3: Dynaaminen sis\u00e4lt\u00f6"},"content":{"rendered":"\n

T\u00e4ll\u00e4 WordPress-teeman opetusohjelman aloittelijoille oppitunnilla opimme WordPressin koukuista ja lis\u00e4\u00e4mme teemaamme muutamia koukkuja, joita tarvitaan, jotta teema toimisi kunnolla WordPressin ja laajennusten kanssa. Aloitamme my\u00f6s p\u00e4\u00e4syn WordPressin dynaamiseen sis\u00e4lt\u00f6\u00f6n otsikossamme, esimerkiksi saamaan automaattisesti nykyisen sivun otsikon.<\/p>\n

Ensin meid\u00e4n on opittava hieman WordPressin koukuista. Koukut ovat ydintoiminto, johon sinun on tutustuttava. En ole fani siit\u00e4, ett\u00e4 n\u00e4yt\u00e4t vain kokonaisen joukon koodia, jossa sinun t\u00e4ytyy kopioida + liitt\u00e4\u00e4 tiet\u00e4m\u00e4tt\u00e4, mit\u00e4 se todella tekee. Jos seuraat t\u00e4t\u00e4 opetusohjelmaa, haluat oppia t\u00e4m\u00e4n kunnolla, eik\u00f6 niin?<\/p>\n

\u00c4l\u00e4 huoli, pid\u00e4n sen toistaiseksi lyhyen\u00e4. Opimme n\u00e4ist\u00e4 lis\u00e4\u00e4 my\u00f6hemmin t\u00e4ss\u00e4 opetusohjelmassa.<\/p>\n

Koukut WordPressiss\u00e4<\/h2>\n

Lyhyesti; Koska WordPress suorittaa kaiken koodin sivun lataamista ja render\u00f6inti\u00e4 varten, on tiettyj\u00e4 "tarkistuspisteit\u00e4" \u2013 joita kutsumme koukuiksi. N\u00e4iss\u00e4 pisteiss\u00e4 WordPress antaa kehitt\u00e4jille mahdollisuuden muokata tai lis\u00e4t\u00e4 omaa koodiaan. WordPress on m\u00e4\u00e4ritellyt joukon "tarkistuspisteit\u00e4", joissa, jokaisella on yksil\u00f6llinen nimi. Jos tied\u00e4t sen nimen, voit lis\u00e4t\u00e4 oman koodisi n\u00e4ihin tarkistuspisteisiin. N\u00e4in voit helposti k\u00e4ske\u00e4 WordPressi\u00e4 suorittamaan koodisi, kun se saavuttaa kyseisen tarkistuspisteen osana prosessiaan.<\/p>\n

Koukkuja on kahdenlaisia; toiminnot ja suodattimet. Toiminnot<\/strong> ovat koodin kohtia, joihin voit lis\u00e4t\u00e4 mukautetun koodin, esimerkiksi tulostaa jotain tai tehd\u00e4 jotain omiin tarkoituksiinsa. Suodattimet<\/strong> ovat koodin kohtia, joissa voit muokata tietty\u00e4 muuttujaa ennen sen k\u00e4ytt\u00f6\u00e4 tai tulostamista. Ne ovat hyvin samankaltaisia, mutta suodattimet on liitetty yhteen tiettyyn muuttujaan, mutta toiminnot eiv\u00e4t.<\/p>\n

Laajennukset, teemat ja itse WordPress voivat "kiinnitt\u00e4\u00e4" koodinsa add_action()<\/code>toimiin ja add_filter()<\/code>suodattimiin. N\u00e4m\u00e4 kaksi toimintoa k\u00e4skev\u00e4t WordPressin suorittamaan koukussa olevan koodin aina, kun suoritus saavuttaa n\u00e4m\u00e4 koukut.<\/p>\n

M\u00e4\u00e4ritt\u00e4\u00e4ksesi koukut, joita k\u00e4yt\u00e4t do_action()<\/code>toimiin ja apply_filters()<\/code>suodattimiin.<\/p>\n

Kaikille, jotka ovat kiinnostuneita tiet\u00e4m\u00e4\u00e4n lis\u00e4\u00e4, minulla on toinen viesti, jossa k\u00e4sitell\u00e4\u00e4n yksityiskohtaisesti WordPressin koukkuja .<\/a><\/p>\n

WordPress-teeman tulee sis\u00e4lt\u00e4\u00e4 tiettyj\u00e4 t\u00e4rkeit\u00e4 koukkuja (toimintoja). N\u00e4iden koukkujen avulla WordPress, laajennukset ja itse teemamme voivat liitty\u00e4 kriittisiin asioihin ja tehd\u00e4 niit\u00e4. Katsotaanpa niit\u00e4 kriittisi\u00e4 koukkuja, jotka meid\u00e4n on lis\u00e4tt\u00e4v\u00e4.<\/p>\n

Teeman yl\u00e4- ja alatunnisteen koukut<\/h2>\n

Kaikissa WordPress-teemoissa on oltava kaksi koukkua malleissa. Yksi toiminto on sijoitettava otsikkoon (<head><\/code>tunnisteen sis\u00e4\u00e4n) ja toinen alatunnisteeseen (juuri ennen <\/body><\/code>tagin sulkemista). N\u00e4m\u00e4 kaksi koukkua ovat ehdottoman v\u00e4ltt\u00e4m\u00e4tt\u00f6mi\u00e4, jotta WordPress, teemasi ja mik\u00e4 tahansa laajennus voivat lis\u00e4t\u00e4 skriptit ja tyylikoodinsa teemaasi.<\/p>\n

Tarvittavat koukut ovat wp_head<\/code>ja wp_footer<\/code>vastaavasti yl\u00e4- ja alatunnisteelle.<\/p>\n

Normaalisti kun haluamme ajaa koukun, soitamme do_action(<hook name>)<\/code>. Mutta koska n\u00e4m\u00e4 kaksi koukkua ovat niin t\u00e4rkeit\u00e4, WordPress on yksinkertaistanut niit\u00e4 meille asettamalla ne yksinkertaiseen funktiokutsuun. Joten voit k\u00e4ytt\u00e4\u00e4 n\u00e4it\u00e4 kahta koukkua wp_head()<\/code>ja wp_footer()<\/code>. Taustalla n\u00e4m\u00e4 kaksi ajavat do_action()<\/code>.<\/p>\n

Lis\u00e4t\u00e4\u00e4n n\u00e4m\u00e4 kaksi koukkua (funktiokutsuja) yl\u00e4- ja alatunnistemalleihimme ja katsotaan mit\u00e4 tapahtuu.<\/p>\n

<!DOCTYPE html>\n<html>\n    <head>\n        <meta charset=\"utf-8\">\n        <title>A White Pixel Theme<\/title>\n\u00a0\n        <?php wp_head(); ?>\n    <\/head>\n<body><\/code><\/pre>\n
        <?php wp_footer(); ?>\n    <\/body>\n<\/html><\/code><\/pre>\n
Napauta p\u00e4ivitt\u00e4mist\u00e4 k\u00e4ytt\u00f6liittym\u00e4ss\u00e4si. Jos olet kirjautunut sis\u00e4\u00e4n, sinun pit\u00e4isi nyt n\u00e4hd\u00e4 WordPressin hallintapalkki! T\u00e4m\u00e4 tarkoittaa, ett\u00e4 WordPress voi nyt onnistuneesti lis\u00e4t\u00e4 skriptit ja tyylit teemaasi.<\/p>\n
\"WordPress-teeman<\/a><\/p>\n
Voit tarkistaa HTML-l\u00e4hteesi ja n\u00e4hd\u00e4, ett\u00e4 otsikko sis\u00e4lt\u00e4\u00e4 nyt melkoisen m\u00e4\u00e4r\u00e4n koodia. T\u00e4m\u00e4 on koodi, jota et lis\u00e4nnyt teemaasi. Kuten n\u00e4ette, WordPress itse k\u00e4ytt\u00e4\u00e4 lis\u00e4\u00e4mi\u00e4mme koukkuja tehd\u00e4kseen omia juttujaan.<\/p>\n
Siirryt\u00e4\u00e4n eteenp\u00e4in koukuista ja aletaan tutkia, kuinka voimme dynaamisesti hakea sis\u00e4lt\u00f6\u00e4 WordPressist\u00e4 ja tulostaa ne otsikkoon.<\/p>\n
Dynaaminen sis\u00e4lt\u00f6 otsikossa<\/h2>\n
K\u00e4sket\u00e4\u00e4n WordPressia asettamaan dynaamisesti asiakirjan otsikko (<title><\/code>tunnisteelle). T\u00e4t\u00e4 varten k\u00e4yt\u00e4mme funktiota, (jossa on muuten suodatin), nimelt\u00e4 wp_title()<\/code>. Kuten yll\u00e4 opimme, koska wp_title()<\/code>olet suodatin, sin\u00e4, WordPress tai laajennukset voit muokata tulosta. Lis\u00e4\u00e4mme t\u00e4h\u00e4n suodattimen my\u00f6hemmin t\u00e4ss\u00e4 opetusohjelmassa.<\/p>\n
Funktiossa wp_title()<\/code>on useita argumentteja<\/a>, joita voit muokata mieleiseksesi, mutta lis\u00e4\u00e4n toistaiseksi tyhj\u00e4n merkkijonon, jotta se n\u00e4ytt\u00e4\u00e4 vain sen sivun otsikon, jolla olemme.<\/p>\n
Vaihda <title><\/code>tagisi header.php<\/code>t\u00e4h\u00e4n:<\/p>\n
<title><?php wp_title(''); ?><\/title><\/code><\/pre>\n
Innokas olet ehk\u00e4 huomannut, ett\u00e4 etusivulle ei tule otsikkoa. T\u00e4m\u00e4 on tavallista WordPress-k\u00e4ytt\u00e4ytymist\u00e4, jonka korjaamme my\u00f6hemmin t\u00e4ss\u00e4 opetusohjelmassa (teemme t\u00e4m\u00e4n suodattimen avulla). Jos vierailet yhdell\u00e4 viestill\u00e4 tai sivulla, sinun pit\u00e4isi saada viestin otsikko.<\/p>\n
WordPressiss\u00e4 on n\u00e4pp\u00e4r\u00e4 toiminto, joka luo dynaamisesti joukon luokkia <body><\/code>tunnisteelle riippuen siit\u00e4, mill\u00e4 sivulla olemme; nimelt\u00e4 body_class<\/a>. P\u00e4ivit\u00e4 <body><\/code>tagi header.php<\/code>t\u00e4h\u00e4n:<\/p>\n
<body <?php body_class(); ?>><\/code><\/pre>\n
P\u00e4ivit\u00e4 ja katso kaikki <body><\/code>tunnisteeseen lis\u00e4tyt luokat. Katso eri sivuja (etusivu, single, kategoria). Kaikki n\u00e4m\u00e4 luokat ovat eritt\u00e4in hy\u00f6dyllisi\u00e4 muotoiluun ja erilaisten samanlaisten osien erottamiseen. K\u00e4yt\u00e4t todenn\u00e4k\u00f6isesti joitain n\u00e4ist\u00e4 CSS:ss\u00e4si.<\/p>\n
Hyvien HTML-k\u00e4yt\u00e4nt\u00f6jen noudattamiseksi meid\u00e4n tulee ilmoittaa my\u00f6s sivuston kieli HTML:ss\u00e4. T\u00e4t\u00e4 varten k\u00e4yt\u00e4mme WordPress-toimintoa saadaksemme kielen asetuksista; kielen_attribuutit<\/a>.<\/p>\n
<html <?php language_attributes(); ?>><\/code><\/pre>\n
Ja lopuksi haluaisin lis\u00e4t\u00e4 joitain metatageja ja sellaisia, jotka eiv\u00e4t ole WordPress-kohtaisia, mutta noudattavat yleisi\u00e4 web-suunnitteluk\u00e4yt\u00e4nt\u00f6j\u00e4. T\u00e4lt\u00e4 koko header.php<\/code>tiedosto n\u00e4ytt\u00e4\u00e4:<\/p>\n
<!DOCTYPE html>\n<html class=\"no-js\" <?php language_attributes(); ?>>\n<head>\n    <meta charset=\"utf-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n\u00a0\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title><?php wp_title(''); ?><\/title>\n\u00a0\n    <?php wp_head(); ?>\n<\/head>\n<body <?php body_class(); ?>><\/code><\/pre>\n
T\u00e4m\u00e4n opetusohjelman seuraavaa vaihetta varten l\u00e4hdemme header.php<\/code>ja sukeltaamme index.php<\/code>oppiaksemme hakemaan dynaamisempaa sis\u00e4lt\u00f6\u00e4, kuten viestej\u00e4.<\/p>\n
Dokumentaatio k\u00e4ytetyist\u00e4 menetelmist\u00e4<\/h2>\n