{"id":233735,"date":"2023-02-21T12:59:00","date_gmt":"2023-02-21T09:59:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233735"},"modified":"2022-11-11T12:07:00","modified_gmt":"2022-11-11T09:07:00","slug":"wordpressi-teemaopetus-algajatele-7-osa-teema-seadistamine-ja-esiletoodud-pildid","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/et\/wordpressi-teemaopetus-algajatele-7-osa-teema-seadistamine-ja-esiletoodud-pildid\/","title":{"rendered":"WordPressi teema\u00f5petus algajatele \u2013 7. osa: teema seadistamine ja esiletoodud pildid"},"content":{"rendered":"\n

See algajatele m\u00f5eldud WordPressi teema\u00f5petuse \u00f5ppetund j\u00e4tkub teema seadistamiseks vajaliku p\u00f5hikoodi lisamisega. \u00d5pime lisama teematugesid ja selle tulemusena aktiveerub WordPressi esilet\u00f5stetud pildifunktsioon. Selles \u00f5ppet\u00fckis parandame ka esilehe pealkirja, rakendades oma esimest filtrit.<\/p>\n

T\u00f6\u00f6tame enamasti functions.php<\/code>failis, mille lisasime eelmises \u00f5ppet\u00fckis<\/a>. L\u00f5pus lisame koodi esilet\u00f5stetud piltide v\u00e4ljastamiseks oma mallidesse.<\/p>\n

Teema seadistamine<\/h2>\n

K\u00f5ik teemad vajavad seadistamiseks koodi, k\u00e4sitades WordPressil teatud funktsioonid aktiveerida. See h\u00f5lmab men\u00fc\u00fcde, vidinate, t\u00f5lkimise jms aktiveerimist. Seda tehakse tavaliselt teema seadistamise funktsioonis, mis on tavaliselt \u00fchendatud mugava nimega konksu k\u00fclge after_setup_theme<\/code>. M\u00f5ne konkreetse asja jaoks peame kasutama WordPressi l\u00e4htestamiskonksu nimega init<\/code>.<\/p>\n

Vajaliku teema seadistuskoodi kirjutamineafter_setup_theme<\/code><\/h3>\n

Seadistagem selline teema seadistamise funktsioon functions.php<\/code>, mis on seotud after_setup_theme<\/code>:<\/p>\n

add_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n\u00a0\n}<\/code><\/pre>\n
Selle funktsiooni sisse lisame WordPressi teemade jaoks hunniku tavalisi ja kasulikke h\u00e4\u00e4lestusfunktsioone. Palun asetage k\u00f5ik j\u00e4rgmised koodit\u00fckid oma seadistusfunktsiooni.<\/p>\n
Esmalt peame m\u00e4\u00e4ratlema piltide ja manuste (nt videote) maksimaalse laiuse. See tagab, et kui autorid lisavad postitustesse suuri pilte, j\u00e4\u00e4vad pildid teatud laiuse piiresse. Seadsin selle 840 pikslile (sest tahan ruumi k\u00fclgribale), kuid saate seda oma maitse j\u00e4rgi reguleerida.<\/p>\n
$GLOBALS['content_width'] = 840;<\/code><\/pre>\n
Samuti peaksime WordPressile teatama, et teema on t\u00f5lgitav ja kust ta saab t\u00f5lkefaile otsida. WordPressi teema t\u00f5lkimist k\u00e4sitlen \u00fcksikasjalikult selle teema\u00f5petuse seeria j\u00e4rgmises etapis .<\/a><\/p>\n
load_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');<\/code><\/pre>\n
Pange t\u00e4hele, et teemakataloogi hankimiseks kasutatakse uut funktsiooni get_stylesheet_directory()<\/code>. See on v\u00e4ga sarnane get_stylesheet_directory_uri()<\/code>viimases etapis n\u00e4htule, kuid siin vajame suhtelist teed, mitte URL-i.<\/p>\n
Seej\u00e4rel peame lisama m\u00f5ned teematoed, mis aktiveerivad WordPressi funktsiooni, mis pole vaikimisi aktiveeritud.<\/p>\n
add_theme_support('automatic-feed-links');\nadd_theme_support('post-thumbnails');\nadd_theme_support('html5', [\n    'search-form',\n    'comment-form',\n    'comment-list',\n    'gallery',\n    'caption',\n]);\nadd_theme_support('custom-logo', [\n    'height'      => 100,\n    'width'       => 300,\n    'flex-width'  => true,\n    'flex-height' => false,\n]);\nadd_theme_support('customize-selective-refresh-widgets');<\/code><\/pre>\n
See oli terve hulk add_theme_support<\/code>k\u00f5nesid! Nagu nimigi viitab, add_theme_support<\/code>k\u00e4sib WordPress aktiveerida funktsioonid, mis pole vaikimisi aktiveeritud. N\u00e4iteks esilet\u00f5stetud pildid ("post-pisipildid"), HTML5 siltide tugi ja WordPressi kohandatud logo funktsioon Customizeris (soovi korral kohandage soovitud logo pilti!).<\/p>\n
Seal on veel palju lahedaid funktsioone, seega soovitan teil lugeda add_theme_support dokumentatsiooni<\/a>. N\u00e4iteks on \u00fcsna uus title-tag<\/code>, mis k\u00e4sitleb pealkirja silti. J\u00e4tsin selle sellest \u00f5petusest v\u00e4lja, kuna oleme pealkirjasildi juba header.php<\/code>k\u00e4sitsi lisanud.<\/p>\n
Pidage meeles, et kui lisate toe title-tag<\/code>, peaksite pealkirjam\u00e4rgend oma p\u00e4isefailist eemaldama, et v\u00e4ltida pealkirjam\u00e4rgendite dubleerimist.<\/p>\n
L\u00f5puks lisame m\u00f5ned add_theme_support<\/code>WordPressi uue Gutenbergi jaoks. Lisame toe laiadele jaotistele, aktiveerides plokkide stiilide funktsionaalsuse ja toe tundlikele manustele:<\/p>\n
add_theme_support('wp-block-styles');\nadd_theme_support('align-wide');\nadd_theme_support('responsive-embeds');<\/code><\/pre>\n
L\u00f5pptulemus<\/h3>\n
Siin on meie l\u00f5plik seadistusfunktsioon functions.php<\/code>:<\/p>\n
add_action('after_setup_theme', 'wptutorial_setup_theme');\nfunction wptutorial_setup_theme() {\n    $GLOBALS['content_width'] = 840;\n    \/\/ Make your theme ready for translation\n    load_theme_textdomain('wptutorial', get_stylesheet_directory(). '\/lang');\n    \/\/ Add theme support for WordPress functionality\n    add_theme_support('automatic-feed-links');\n    add_theme_support('title-tag');\n    add_theme_support('post-thumbnails');\n    add_theme_support('html5', [\n        'search-form',\n        'comment-form',\n        'comment-list',\n        'gallery',\n        'caption',\n    ]);\n    add_theme_support('custom-logo', [\n        'height'      => 100,\n        'width'       => 300,\n        'flex-width'  => true,\n        'flex-height' => false,\n    ]);\n    add_theme_support('customize-selective-refresh-widgets');\n    \/\/ Add theme support for Gutenberg specific functionality\n    add_theme_support('wp-block-styles');\n    add_theme_support('align-wide');\n    add_theme_support('responsive-embeds');\n}<\/code><\/pre>\n
P\u00e4rast salvestamist peaksite n\u00fc\u00fcd saama administraatoris postitustele esilet\u00f5stetud pilte lisada! functions.php<\/code>Enne esilet\u00f5stetud piltide lisamist oma mallidele lisame omale veel \u00fche teemaparanduse ; pea meeles, et wp_title<\/code>meie header.php<\/code>vaikimisi ei saa esilehel midagi v\u00e4lja kajata? Teeme selle korda.<\/p>\n
Filtri lisaminewp_title<\/code><\/h2>\n
Lisame oma esimese \u00f5ige filtri muutmise funktsiooni, kasutades add_filter()<\/code>. Filtril, mille k\u00fclge \u00fchendame, on sama nimi kui funktsioonil, mida kasutasime WordPressi puhul lehe pealkirja d\u00fcnaamiliseks toomiseks; wp_title<\/code>. Me parandame selle, et pealkiri ei oleks esilehel t\u00fchi \u2013 see on WordPressis vaikimisi. Esilehel olles soovime, et see oleks t\u00e4idetud WordPressi saidi nimega.<\/p>\n
Pidage meeles, et filtrifunktsioonides tagastatakse alati<\/strong> filtreeritud muutuja! K\u00f5ik filtrid muudavad muutujat ja kui te midagi ei tagasta, muutub muutuja m\u00e4\u00e4ratlemata. See v\u00f5ib p\u00f5hjustada palju probleeme. Filtrite kohta p\u00f5hjalikuma teabe saamiseks vaadake minu postitust, mis selgitab k\u00f5ike konksude ja filtrite kohta<\/a>.<\/p>\n
Teadmine, millal pealkirja kohandada<\/h3>\n
Pealkirja muutujat tahame kohandada ainult siis, kui oleme esilehel. K\u00f5igi teiste lehtede puhul tahame selle rahule j\u00e4tta (lihtsalt tagastage see sellisena, nagu see on). Aga kuidas me teame, kui oleme esilehel?<\/p>\n
Saame \u00e4ra kasutada WordPressi tingimusm\u00e4rgendeid<\/a>, mis on terve hulk kasulikke funktsioone, mis tagastavad tingimuse alusel t\u00f5ese v\u00f5i v\u00e4\u00e4ra. Neid kasutatakse k\u00f5ige sagedamini selleks, et k\u00fcsida, kas oleme kindlal lehel v\u00f5i mallil. V\u00f5ime lihtsalt k\u00fcsida "Kas oleme esilehel?". Kui see meetod tagastab t\u00f5ene, muudame pealkirja muutujat alles siis.<\/p>\n
V\u00e4\u00e4rib m\u00e4rkimist, et esilehel on kaks tingimuslikku silti, nimelt is_home()<\/code>ja is_front_page().<\/code>Need erinevad olenevalt teie "Lugemise" seadistusest \u2013 kas teie esilehel kuvatakse viimaseid postitusi v\u00f5i on see fikseeritud lehek\u00fclg. Kui j\u00e4rgite seda \u00f5petust uhiuue vaikeseadega WordPressi installiga, kasutate is_front_page()<\/code>.<\/p>\n
WordPressi saidi nime hankimine<\/h3>\n
N\u00fc\u00fcd teame, millist filtrit kasutada ja kuidas tagada, et muudaksime pealkirja ainult siis, kui oleme \u00f5iges kohas. Aga mis peaks pealkiri olema? Tavaliselt on esilehe lehe pealkiri teie WordPressi saidi nimi. Aga kuidas me seda teavet saame?<\/p>\n
WordPressi praeguse installi kohta teabe hankimiseks kasutame bloginfo()<\/code>funktsiooni. Parameetrina palume tagastada saidi nime, mis tehakse, m\u00e4\u00e4rates parameetri v\u00e4\u00e4rtuseks " name<\/code>". Ja kuna see on filter ja me peame selle tagastama, mitte seda kordama, kasutame selle s\u00f5sarmeetodit get_bloginfo()<\/code>. Helistamine bloginfo()<\/code>kajab alati v\u00e4lja.<\/p>\n
add_filter('wp_title', 'wptutorial_title_filter');\nfunction wptutorial_title_filter($title) {\n    if (is_front_page()) {\n        return get_bloginfo('name');\n    }\n    return $title;\n}<\/code><\/pre>\n
Kui v\u00e4rskendate oma esilehte, peaksite n\u00e4gema, et teie saidi nimi kuvatakse <title><\/code>sildis (ja brauseri vahekaardil)! Meie filter m\u00f5jutab ainult esilehte, nii et k\u00f5ik muud lehed, n\u00e4iteks \u00fcks postitus, peaksid tagastama sama, mis varem; postituse pealkiri.<\/p>\n
Esilet\u00f5stetud piltide v\u00e4ljastamine mallifailides<\/h2>\n
Varem lisasime teematugede seadistamisel esiletoodud piltide toe. Kui see on aktiveeritud, saame n\u00fc\u00fcd need pildid oma mallidesse v\u00e4ljastada. Teeme seda n\u00fc\u00fcd!<\/p>\n
Avage index.php<\/code>ja leidke neile silmuse sees koht. Otsustasin paigutada selle pealkirja j\u00e4rele, kuid see on teie otsustada, kuhu soovite. Funktsiooni kasutate the_post_thumbnail()<\/code>pildi v\u00e4ljastamiseks. Soovitatav on esmalt kontrollida, kas postitusel on isegi esiletoodud pilt, mida teeme kasutades has_post_thumbnail()<\/code>.<\/p>\n
...\n    <h2><a href=\"<?php the_permalink(); ?>\" title=\"<?php the_title(); ?>\"><?php the_title(); ?><\/a><\/h2>\n    <?php if (has_post_thumbnail()) {\n        the_post_thumbnail();\n    } ?>\n    <?php the_excerpt(); ?>\n...<\/code><\/pre>\n
Kui teie postitusel pole esiletoodud pilti, ei n\u00e4e te pealkirja j\u00e4rel midagi. Kui aga m\u00e4\u00e4rate m\u00f5nele oma postitusele esilet\u00f5stetud pildi, the_post_thumbnail()<\/code>v\u00e4ljastaks <img><\/code>see valitud pildiga sildi. See funktsioon aktsepteerib m\u00f5ningaid lisaparameetreid. N\u00e4iteks saate m\u00e4\u00e4rata, millist pildi suurust soovite kasutada, ja juhtida pildile lisatud atribuute. Nagu tavaliselt, soovitan teil kiiresti dokumentatsiooniga<\/a> tutvuda ja oma maitse j\u00e4rgi kohandada.<\/p>\n
Kasutatud meetodite dokumentatsioon<\/h2>\n