• Articles
• admin

jokainen WordPress sivusto on erilainen. Tämä johtuu siitä, että jokainen valitsee eri teema tai ”etsiä ja tuntea” niiden päällä. Luominen otsikko ja alkuun navigointivalikko WordPress on hieman erilainen prosessi kunkin sivuston.

tässä käytän Genesis teema puitteet WordPress, koska rakastan sitä ehdottomasti. Kuitenkin, siellä on tärkeitä kohtia tässä artikkelissa, että wil auttaa ketään WordPress verkkosivuilla.

tämä on osa artikkelien ja videoiden sarjaa, jossa luon sivuston tyhjästä. Selitin ensin, miten Genesis-viitekehykseen tehdään lapsiteema ja sitten kirjoitin, että alkaisin muotoilla teemaa lisäämällä siihen taustan ja logon.

lisäämällä Facebook-linkin, Twitter-linkin ja muita tietoja otsakkeeseen

lisättyämme logon sivustomme otsakkeen vasempaan yläreunaan lisäämme nyt hieman lisätietoa otsakkeemme oikeaan laitaan. Tässä tapauksessa lisäämme Twitter-ja Facebook-linkkejä jne., vekottimen avulla.

I ’ve got to admirt I’ ve gone a little widget crazy lately, having been a little vähättelevä of them in the past. Mikä on vekotin? Hyvin, ne ovat itse sisälsi bittiä verkkosivuilla, että voit vetää ympäri ja hallita kautta helppo käyttää widget alue.

yksi Genesiksen monista kaunottarista on sen vaivaton kyky laajentaa mitä tahansa sivuston aluetta. Joten:

• jos haluat eri järjestyksessä laatikot sivupalkissa voit tehdä sen sekunneissa.
• jos haluat täältä, 5 viimeisintä kategorian otsikkoa, joissa etusivulla on näytekuvat, voit tehdä sen sekunneissa.
• jos haluat hakupalkin, sosiaalisen jakamisen, Twitter-syötteen, kalenterin, tag Cloudin jne. voit tehdä sen sekunneissa.

tämä intuitiivinen, helppokäyttöinen taustatoiminto on erityisen hyödyllinen luotaessa verkkosivustoja asiakkaille, jotka haluavat hallita kaikkia verkkosivuston osa-alueita, mutta joilla ei ole tähän tarvittavia taitoja.

joka tapauksessa, tässä tapauksessa meidän täytyy luoda oma mukautettu widget ja teemme sen vetämällä yli teksti Widget otsikon oikealle alueelle ulkonäkö > Widgets käyttöliittymä WordPress.

ja tässä tekstissä Widget voit laittaa HTML. Tässä on HTML laitoin tämän tietyn sivuston. Minulla on vain Facebook-sivun linkki, Twitter-linkki ja puhelinnumero.

<div>
<ul>
<li><a href=""><img src="http://site.com/images/facebook.jpg" style="border:0;" /></a></li>
<li><a href=""><img src="http://site.com/images/twitter.jpg" style="border:0;" /></a></li>
</ul>
<p><strong>Tel:</strong> +44 20 xxxx xxxx</p>
</div>

ja tässä on CSS tyyli edellä:

#connect {float: right;}
#connect ul {float: right;}
#connect ul li {list-style: none; display: inline;}
#connect p#tel {margin-top: 33px; font-size: 18px; color: #66504e;}

tässä on mitä näkyy oikealla puolella pään seurauksena:

Video lisäämällä otsikko info ja navigointi valikko

tässä videossa näytän, miten lisätä widget otsikkoon ja miten stailata valikon Genesis.

top navigation menu

Top navigation menu (tai ”navbars”) oli ennen olemassaoloni riesa, mutta nyt Genesis-ja WordPress-valikoiden myötä olen kehittänyt todella helpon järjestelmän niiden luomiseen, joka vie sekunteja tuntien sijaan.

Genesiksellä on jo käytössä mahdollisuus saada ensisijainen ja toissijainen navigointivalikko. Tässä nimenomaisessa esimerkissä pääsin eroon toissijaisesta navigointivalikosta Genesis-teeman asetusten avulla, koska asiakas halusi vain yhden.

yllä olevalla videolla näytän, Miten muutan CSS: ää saadakseni valikon näyttämään samalta kuin PSD visualissa, jonka tein.

käyttämällä Chromen kehittäjätyökaluja tai Firefoxin Firebug-lisäosaa voit kertoa, mitä HTML: n valitsimia käytetään CSS: ssä valikon tyylittämiseen.

#nav {-khtml-border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
background: #745d5c url(images/nav.gif) repeat-x ;
border: 1px solid #745d5c;
width: 958px; }

kuten näet yllä olevasta videosta, lisäsin pyöristettyjen kulmien sädettä, lisäsin liukuväritaustan ja muutin valikon reunavärin. Nyt valikko ei siis näytä tylsältä harmaalta, jonka saat vanilla Genesis-asennuksella.

lisäsin myös seuraavan CSS: n muuttaakseni valikon tekstin värin valkoiseksi.

#nav li a {color: #fff; }

on myös mahdollisuus muuttaa tyyliä nykyisen sivun linkkejä, hover linkkejä, alisivun linkkejä ja alisivun linkkejä.

Genesiksessä on helposti avattavat valikot alasivuille (tai lastensivuille) ja sitten fly-out-linkit alasivuille (tai lapsenlapsensivuille). Näitä voi olla sekä ensisijaisissa että toissijaisissa Navigointivalikoissa.

sivujen, lastensivujen ja lapsenlapsensivujen luominen

tässä on videoni, jossa lisään uusia sivuja WordPress-valikkoon niin, että ne näkyvät navigointivalikossa sivuina, lastensivuina (avattavina sivuina) ja lapsenlapsensivuina (välilaskuina).

voit valita lapsen tai lapsenlapsen sivun vanhemman kohdalta sivueditorista. Ja kun katsoo sivuja (alle sivut > kaikki sivut), lapsen ja lapsenlapsen sivut on sisennetty vanhemman alle. Näin tehdessään ne saavat myös loogisen URL-osoitteen (esimerkiksi www.site.com/music/jazz/charlie-parker, jossa sivu ”Charlie Parker” on ”jazzin” lapsi, joka on ”musiikin”lapsi).

luodaan navigointivalikko, jossa on pudotuksia ja välilaskuja

saadaksesi nämä sivut näkyviin navigointivalikossa oikein, sinun täytyy vain raahata ja pudottaa ne paikoilleen ulkoasultaan > valikot. Jälleen lasten sivut on sisennetty vanhemman alle. Älä unohda antaa valikolle nimeä (kuten ”navbar”, esimerkiksi) ja asettaa sen ensisijaiseksi navigointivalikoksi.

niin, järjestämällä sivuja WordPress-ulkoasuun > Valikkoalueet näin…

… luo pudotusvalikkoon fly-out kuten tämä:

katso yllä olevalta videolta havainnollistus tästä.

mitä mieltä olet?

mitä mieltä olet tästä tavasta muokata verkkosivuston otsikko-ja navigointivalikkoa? Teetkö sen eri tavalla?