Muutaman vuoden (tai jopa kuukausien) kuluttua WordPress-teemojen suunnittelusta ja kehittämisestä, varsinkin asiakkaille, alkaa ymmärtää, että monet toiminnot voidaan standardisoida tai tislata alas "aloitusteemaksi tai -pakkaukseksi". Tämä auttaa saamaan kehitysprosessin alkamaan ja liikuttamaan nopeasti.
Paras ensimmäinen vaihe tämän tekemisessä, olen huomannut, on kynsi alas useimmat yhteiset toiminnot ja sisällyttää ne sisään functions.php . Tämä functions.php tiedostoa on laajennettava vastaamaan tiettyjen teemojen tarpeita, kun uusia hankkeita syntyy, mutta se tarjoaa enemmän kuin mahtavaa kehityksen lähtökohtana.
Minulla on noin 13 avainfunktiota, jotka haluan aloittaa ja lisätään niitä tarpeen mukaan ...
WordPress 3.0: ssä käyttöön otettu navigointivalikko mahdollistaa navigointivalikoiden intuitiivisen luomisen ja ylläpitämisen teemoissa.
Ainakin standardi-teema tarvitsee päävalikkoa, ehkä alatunnisteen ja toissijaisen navigointi-valikon alatunnistimessa. Tätä varten rekisteröidämme nämä kaksi valikkoa "Päävalikko" ja "Toissijainen valikko"
Vaikka tämä ei ole erityisen uusi ominaisuus, sen on silti mukava päällystää se if function_exists() vain siinä tapauksessa, että käyttäjä on juuttunut pre 3.0 -asennukseen:
Vuonna functions.php sisältää seuraavat tiedot:
if ( function_exists( 'register_nav_menus' ) ) {register_nav_menus(array('main_menu' => __( 'Main Menu', 'cake' ),'secondary_menu' => __( 'Secondary Menu', 'cake' ),));} Nyt, kun valikot ovat rekisteröityneet, meidän on kerrottava teema, mistä niitä tuotetaan. Haluamme, että päävalikko tulee näkyviin otsikossa. Joten, meidän header.php tiedosto sisältää seuraavat koodit:
'main_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Ensinnäkin tarkistamme, onko meillä valikoitu "main_menu" -valikko ja jos aiomme, lisätään sen sisältö tähän, muuten palaamme oletusarvoisesti wp_list_pages() jota voimme vielä muokata näyttääksesi linkit tarvitsemme.
Jos haluat vieläkin muokata valikkoa, katso WordPress-koodisivulle wp_nav_menu() toiminto.
Haluamme toissijaisen valikon näkyvän alatunnisteessa, joten avaamme footer.php ja sisältää seuraavan koodin:
'secondary_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Tämän toiminnon avulla voit käyttää mukautettua CSS-muotoa WordPressin TinyMCE-visuaalisen editoriin.
Luo nimetty CSS-tiedosto editor-style.css ja liitä tyylisi sisään. Paikkamerkkinä haluan aloittaa tyylit editor-style.css tiedosto Twenty Twelve -teemasta.
Vuonna functions.php lisää seuraava:
add_editor_style();Jos et halua käyttää nimesi "editor-style" CSS-tiedostolle ja haluat myös siirtää tiedoston muualle, esim. Css-hakemistossa, muuta sitten funktio.
Haluan esimerkiksi nimetä tiedoston tiny-mce-styles.css ja haluan sen CSS-hakemistoni sisällä; niin minun tehtäväni näyttää tältä:
add_editor_style('/css/editor-style.css'); Vaikka olemme siinä, voimme yhtä hyvin muotoilla editorin oikealta vasemmalle kielille. Teeman hakemistoon luo CSS-tiedosto nimeltä editor-style-rtl.css ja ainakin ainakin seuraavat:
html .mceContentBody {direction: rtl;unicode-bidi: embed;}li {margin: 0 24px 0 0;margin: 0 1.714285714rem 0 0;}dl {margin: 0 24px;margin: 0 1.714285714rem;}tr th {text-align: right;}td {padding: 6px 0 6px 10px;text-align: right;}.wp-caption {text-align: right;}Jälleen, kuten paikkamerkki, edellä mainitut tyylit ovat peräisin kaksikymmentä kaksitoista teema. Restyle ja laajenna tarpeen mukaan.
Useimmat ihmiset, jotka kommentoivat blogeja verkossa, ovat avatarin jäseniä. Jos kuitenkin he eivät ja et erityisesti pidä WordPress oletus avatar vaihtoehtoja, voit määrittää oman.
Voit tehdä tämän sisällyttämällä seuraavan koodin sisään functions.php :
if ( !function_exists('cake_addgravatar') ) {function cake_addgravatar( $avatar_defaults ) {$myavatar = get_template_directory_uri() . '/images/avatar.png';$avatar_defaults[$myavatar] = 'avatar';return $avatar_defaults;} add_filter ('avatar_defaults', 'cake_addgravatar');} Mitä me teemme täällä ensin, tarkistamme, onko toiminto olemassa. Jos näin käy, lisäämme suodattimen, joka kertoo WordPressille, että käytämme mukautettua avataramme oletuksena.
Sanomme WordPressin löytääksesi tämän avatarin teema-hakemiston sisällä olevasta "kuvasta" -hakemistosta. Seuraava askel on luonnollisesti luoda itse kuva ja ladata se "images" -kansioon.
Viestinmuodot-ominaisuuden avulla voit muokata viestien tyyliä ja esitystä. Tämän kirjoittamisen jälkeen on 9 standardoitua postimuotosta, jotka käyttäjät voivat valita: sivusta, galleriasta, linkistä, kuvasta, lainauksesta, tilasta, videosta, äänestä ja chatista. Näiden lisäksi oletusarvoinen "Vakio" -viesti muodostaa, ettei tiettyyn viestiin ole määritetty postin muotoa.
Voit lisätä tämän toiminnon teemaan lisäämällä siihen seuraavan koodin functions.php , määrittämällä jälkityypit, joita käytät. esim. Jos haluat vain sivun, kuvan, linkin, tarjouksen ja tilatiedostomuodot, koodisi pitäisi näyttää tältä:
add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );Tarjolla oleva kuvatoiminto, kuten koodi selittää, antaa tekijälle mahdollisuuden valita edustavan kuvan Postit, Sivut tai Oma postityypit.
Ota tämä toiminto käyttöön lisäämällä siihen seuraava koodi functions.php :
add_theme_support( 'post-thumbnails' );Voisimme pysähtyä sinne ja jättää sen WordPressiin määrittelemällä pikkukuvat tai voisimme hallita ja määritellä ne itse. Teemme jälkimmäisen, ilmeisesti!
Sanotaan, että käytämme lehden sivustoa, jossa esillä oleva kuva tulee näkyviin vähintään kolmessa eri koossa. Ehkä yksi iso kuva, jos viesti on esillä tai on uusin, keskikokoinen kuva, jos se on vain jälkimmäinen muistiin ja tavallinen koko ehkä näkyvissä muualla.
Hyödynnämme add_image_size() -toiminto, joka ohjaa WordPressiä kopioimaan esillä olevan kuvan haluamassamme koossa.
Tätä varten lisäämme seuraavaa functions.php :
// regular sizeadd_image_size( 'regular', 400, 350, true );// medium sizeadd_image_size( 'medium', 650, 500, true );// large thumbnailsadd_image_size( 'large', 960, '' ); Katso miten työskennellä add_image_size() toimivat joko pehmeään viljelyyn tai kovaa leikkaamaan kuvia WordPress-koodeksisivu.
Kun olemme määrittäneet edellä kuvattuja kuvakokoja (säännöllistä, keskisuuria ja suuria) - ja koska oletuksena WordPress ei tee sitä meille - lisäämme kykyä valita kyseiset kuvakoot Liite-näyttöasetusten käyttöliittymästä.
Olisi mukavaa, jos kirjoittaessasi kirjoittaisit haluamasi koon kuvan valitsemalla sen pudotusvalikosta tavallisesti WordPressin oletuskokoja käytettäessä.
Tätä varten lisätään seuraava meidän functions.php :
// show custom image sizes on when inserting mediafunction cake_show_image_sizes($sizes) {$sizes['regular'] = __( 'Our Regular Size', 'cake' );$sizes['medium'] = __( 'Our Medium Size', 'cake' );$sizes['large'] = __( 'Our Large Size', 'cake' );return $sizes;} add_filter ('image_size_names_choose', 'cake_show_image_sizes'); Tällöin voimme valita kuvakokoomme.
Tämä on yksinkertainen. Jos olet jo rakentanut WordPress-teemoja jonkin aikaa, muistat päivät, jolloin manuaalisesti annettiin koodi syöttääksesi RSS-syötteen suoraan header.php-tiedostoon. Tämä lähestymistapa on puhtaampi ja perustuu wp_head() koukku tuottaa tarvittavan koodin.
Vuonna functions.php sisältää seuraavat tiedot:
// Adds RSS feed links to for posts and comments.add_theme_support( 'automatic-feed-links' ); Varmista, että sinulla on it in the , right before end of header.php it in the , right before end of &rgt;/head&lgt;
Tämän toiminnon avulla teet ensimmäisen askeleen teeman tekemiseksi käännökseksi.
Sen on parasta kutsua tätä toimintoa after_setup_theme() toimintakoukun eli sen jälkeen, kun teeman asennus, rekisteröinti ja alustustoimet ovat käynnistyneet.
add_action('after_setup_theme', 'my_theme_setup');function my_theme_setup(){load_theme_textdomain('my_theme', get_template_directory() . '/languages');} Lisää nyt hakemisto nimeltä ' languages 'teeman hakemistoon.
Saat lisätietoja load_theme_textdomain () - toiminnosta WordPress-koodeksisivu .
Sisältöleveys on teemojen ominaisuus, jonka avulla voit määrittää enimmäisleveyden videoille, kuville ja muille oEmbed-sisällön teemoille.
Tämä tarkoittaa, että kun liität kyseisen YouTube-URL-osoitteen editoriksi ja WordPress näyttää automaattisesti varsinaisen videon etupäässä, kyseinen video ei ylitä määritettyä leveyttä $content_width muuttuja.
if ( ! isset( $content_width ) )$content_width = 600;WordPress suosittelee myös seuraavan CSS: n lisäämistä:
.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail {max-width: 100%;height: auto;} Vaikka tämä on hyödyllistä, se on hieman raskain käsin. Se määrittää sisällön sisällön leveyden. Mitä jos halusit suurempia leveitä videoita sivuilla kuin viesteissä ja vielä suuremman koon muokatussa postityypissä? Tällä hetkellä ei ole mitään keinoa määritellä tätä. On kuitenkin olemassa a ominaisuuspyyntö ehdottaa sisällyttämistä $content_width muuttuu sisäänrakennettuna add_theme_support() .
Sinun tyypillisellä teemalla on ainakin yksi sivupalkki. Sivupalkin määrittäminen on melko suoraviivaista.
Lisää seuraava omaan functions.php :
if(function_exists('register_sidebar')){register_sidebar(array('name' => 'Main Sidebar','before_widget' => '','after_widget' => '','before_title' => '','after_title' => '
',));} Tämä rekisteröi ja määrittää sivupalkin nimeltä "Main Sidebar" ja sen HTML-merkintä.
Voit lukea lisää register_sidebar() -toiminto WordPress-koodisivulla.
Rutiininomaisesti tarvitset enemmän kuin yhden sivupalkin, joten voit kopioida tai liittää yllä olevan koodin ja muuttaa nimen.
On myös a register_sidebars() toiminto, jonka avulla voit rekisteröidä ja määritellä useita sivupalkkeja kerralla mutta ei anna joustavuutta antaa jokaiselle uudelle sivupalkille ainutlaatuinen nimi.
Jos näytät blogin hakemistosivulla olevia viestejäsi, oletuksena WordPress tulee näkyviin [...] osoittaa, että on enemmän "hyppäämisen jälkeen".
Haluat todennäköisesti lisätä "lisää linkkiä" ja määritellä, miten se näyttää.
Tätä varten meidän on lisättävä seuraava koodi functions.php :
function new_excerpt_more($more) {global $post;return '...
function cake_content_nav( $nav_id ) {global $wp_query;if ( $wp_query->max_num_pages > 1 ) : ?>Jos sinulla on erityisiä ohjeita teemastasi, esim. Teemanvalintasivullesi, jonka käyttäjä haluaa nähdä, kun he aktivoivat teeman, voit ohjata niitä siellä seuraavalla toiminnolla:
if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")wp_redirect('themes.php?page=themeoptions'); Kiinnitä erityistä huomiota wp_redirect() toiminto. Muista korvata " themes.php?page=themeoptions 'sivusi URL-osoitteella.
Kehityksen aikana olen joskus löytänyt WordPress-adminin (työkalupalkin) olevan melko häiritsevä.
Se on kiinteässä asennossa ikkunan yläosassa ja ulkoasun mukaan voi kattaa joitain otsikon elementtejä.
Vaikka suunnittelin ja kehitit edelleen, haluan piilottaa hallintapalkin tämän kätevän toiminnon avulla.
show_admin_bar( false );Onko sinulla mitään suosikkitoimintoja hyppäämiseen WordPress-mallipohjan kehittämiseen? Mitä toimintoja haluat nähdä? Kerro meille kommentit.
Esitetty kuva / pikkukuva, monikäyttöinen kuva kautta Shutterstock.