A WordPress webhely újratervezése (személyes hozzáadás hozzáadásához)

Senki más platform sem ad lehetőséget arra, hogy testreszabza webhelyének megjelenését és hangulatát, például a WordPress. Ez az egyik oka annak, hogy a WordPress népszerű a kiadók és a webfejlesztők körében.


Készíthet egy alapvető (és elmosódott) WP témát, hozzáadhat logót, szerkeszthet néhány sor kódot, megváltoztathatja CSS-jét, és egy professzionális (mégis személyre szabott) megjelenésű weboldalhoz gyorsan hozzáférhet. Ez könnyű munka, és ez az oktatóprogram megmutatja, hogyan kell csinálni.

Kész vagy? Kezdjük az első dolgokkal; a színek.

Színes séma kidolgozása

Színséma kidolgozásakor a WordPress webhelyén sok szempontot figyelembe kell venni. Gondolj úgy, mint a ház vagy a kő-és habarcs-áruház festésére. Meg kell határoznia a falak színét és az ajtók színét.

A külső és belső terek festésének módja néhány tényezőtől függ majd, amelyek a személyes preferenciáik között szerepelnek.

A WordPress webhelyének színezése sem különbözik egymástól. Milyen színű linkeket szeretne? Az Ön háttere, hogyan fogja ezt a legvonzóbbá tenni, és hagyja, hogy a versenytársak szájába kerüljenek? Melyek a színek kiegészítik (vagy akár felhatalmazzák) üzenetet? Hogyan akarod a szöveget? Az ég korlátozza a WP webhelyén használható színek megválasztását.

Meg kell határoznia az összes színt, amelyet a kezdetektől fog használni. Azt javaslom, hogy ragaszkodjon csak három színhez, de szabadon használhatja annyi színt, amennyit csak szeretne.

Csak nem szabad túlzásba lépni, különben a marketing üzenet mindegyik színben felhígul. Végül is a felesleges részek mérgezőek, tehát a választott színektől függetlenül fontos biztosítani a harmóniát.

A legjobb a legtöbb színt használni, ahol az emberek többsége látni fogja (és remélhetőleg) szeretik őket. A logójáról és a fejlécről beszélek. Ezeken a területeken pontosan ott van, ahol szüksége van a legtöbb színre; a webhely többi része kevésbé színes, de informatívabb lehet.

216 szín versus 12 szín

Mindannyian ismerjük a tizenkét alapszínt, de az internet tele van színekkel és azok különféle árnyalataival. Éppen ezért a személyes melegséget felszabadító szín kiválasztása, miközben professzionális megjelenést hoz létre, kihívást jelenthet.

Szerencsése van, mert az interneten keresztül horgásztam és a következő eszközöket találtam az induláshoz:

Kuler

kuler

A Kuler-et az Adobe fejlesztette ki annak érdekében, hogy segítse a webfejlesztőknek a színvonalas színvonalak létrehozását. A Kuler egy online eszköz, vagyis bárhová magával viheti, és bárhonnan felhasználhatja, de van egy asztali alkalmazás is, amely elősegíti a színsémák kidolgozását közvetlenül az asztalon. Ezenkívül, ha rendelkezik Adobe ID-vel, egyetlen kattintással elmentheti a színsémákat.

Különböző színszabályok léteznek, amelyeket alkalmazni lehet a Kulernél, ideértve többek között a monokromatikus, az összetett, a kiegészítő, az analóg és a triádot is..

Nézze meg Kuler-t.

HTML SZÍNTARTÓ

A használt színek ismerete csak a munka fele. A színek megvalósításához HTML-kódokká kell lefordítania azokat.

html színtáblázat

Itt jön be a HTML színes diagram. Ez egy színes diagram, több mint 200 (valójában 216) webes színes kóddal. A táblával felfegyverkezve nem szabad nehéznek lennie a nap alatti szín megvalósításának.

A kódok HTML, CSS, Adobe PhotoShop és más grafikai manipulációs eszközökkel fognak működni, így a világ minden szabadsága a színeivel való játékhoz jár, amennyit csak akar..

Nézze meg a HTML színes diagramot.

GENOPAL

Ha segítségre van szüksége a színek kiválasztásában, akkor a GenoPal a kívánt alkalmazás. Ez egy nagyon egyszerű webalkalmazás, amely „rögzíti” a színes palettákat a böngészőablakához. Amint kiválasztja a színeit, színes böngészője formájában megjelennek a böngészőben. ��

genopal

A GenoPal segítségével növelheti a fényerőt és szabályozhatja a színárnyalatot, így pontosan a kívánt árnyalatot kapja.

Webhelyükön egy mobilalkalmazás készül folyamatban. Miután elindította, lehetővé teszi az alkalmazás hordozását és a színek fejlesztését a mobil eszközön. Tervezésük ötletes, és az a tény, hogy ez az alkalmazás valóban működik, egyértelmű jele annak, hogy a GenoPal üzleti tevékenységet jelent.

COLORHEXA

A ColorHexa a művész festéklemeze. Ez a weboldal lehetővé teszi a színek keverését a színkódok megadásával. Az előző alkalmazásuk a színkeverő eszköz, de gradiensgenerátorral és színleválasztóval is rendelkeznek. Nem itt olyan tiszta zseni dolgozik?

colorhexa

Hogyan működik a ColorHexa turmixgép? Csak annyit kell tennie, hogy beírja a színkódjait egy „+” szétválasztással, a ColorHexa pedig a munka többi részét. Például próbáltam:

# ff0000 + # 0000ff + # ff00ff és megkaptam # aa00aa. Sőt, egy teljes oldalt adnak színes információkkal (a végső színén, pl. # Aa00aa). Ez az egyik eszköz, amelyet meg kell próbálnia magának, hogy megtapasztalja a színkeveredést, mint még soha.

Nézze meg a ColorHexa alkalmazást.

ULTIMATE CSS GRADIENT GENERATOR

tökéletes színgradiens generátor

Ez valószínűleg a legjobb eszköz, amennyiben a színátmeneteket generálják. Teljesen online, és segít frissítő középpontok és a hozzájuk tartozó CSS ​​kódok létrehozásában. Ezenkívül Chrome-ot és Firefox-kiegészítőket is biztosítanak, amelyek lehetővé teszik az alkalmazás integrálását a böngészőbe az egyszerűbb és gyorsabb hozzáférés érdekében.

Van egy előnézeti terület, ahol láthatja a színátmenetét, tehát csak annyit kell tennie, hogy a gradienst létrehozza, ahogy Ön megfelelőnek tartja, és másolás beillesztés a CSS kód generálva. Ez tényleg olyan egyszerű, és több színük van, mint amennyit valaha is használ.

Nézze meg az Ultimate CSS gradiens generátort.

Betűtípusok szedése

Most, hogy megmutattam neked, hogyan kell kiválasztani és keverni a színeket, mint például a Picasso, játsszunk a betűtípusokkal.

Színei és webdizájnja vonzza az embereket, de a szavai, azaz az oldalai és a hozzászólásai fogják az embereket ragaszkodni.

Mi mindig elfoglalva vagyunk a legjobb történetek készítésével, így többségünk elfelejti, hogy a betűtípusok is számítanak. De a választott betűtípus befolyásolja az emberek interakcióját az Ön webhelyével. A megfelelő betűtípusokkal a célközönség meg akar maradni, és végül átkattint a többi oldalára, pontosan ezt akarja. eljegyzés.

Egy millió és egy betűtípus van odakinn, de sajnos a felhasználó csak azokat a betűkészleteket fogja látni, amelyeket a számítógépükre telepítettek. Ha a használt betűtípust nem telepítették a számítógépükre, akkor közeli alternatívát (vagy teljesen más betűtípust) fognak látni, amelynek nem lesz ugyanaz a hatása, mint amit akartál.

„Betűtípusokkal való játék olyan, mint a tűzzel való játék. Előfordulhat, hogy egy weboldalon megjelenik a mérkőzés, egy szép szöveg csillagszórója. Más esetekben az egész ház leégett. ” – Lorelle, a cameraontheroad.com webhelyről.

A stíluslap segítségével vezérelheti a betűkészleteket (és létrehozhatja a kívánt hatást). A témádban a stíluslap általában a style.css fájlt. Ezt a fájlt használhatja a betűkészlet színének, a betűkészlet típusának / betűcsaládnak, a betűméretnek és a választott betűtípus egyéb aspektusainak szabályozására.

A következő jó példa:

#menu {font-család: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; betűméret: 0.8em; fekete szín;}

A fenti kód beállítja a betűméretet a menüben 0.8em értékre, és a színt fekete színre állítja. Ezenkívül Arial betűtípust állít be, de ha a felhasználó nem rendelkezik Arial-nal a gépen, a Helvetica veszi át. Ha nincs Helvetica vagy Arial, akkor Verdana, Sans-serif vagy a Times New Roman veszi át.

A betűkészletek ellenőrzésével egységesebb megjelenést és érzetet hozhat létre.

A betűkészlet-inkonzisztencia problémájának egyszeri és végleges megoldására beágyazott betűkészleteket is használhat. Beágyazott (vagy külső) betűkészletek használatával a felhasználónak nem kell betűtípust lennie a gépen.

Ezenkívül könnyű munka is.

Csak annyit kell tennie, hogy megnyitja a style.css és tegye a következő kódot tetejére.

@ font-face {font-család: Museo300; src: url ("fonts / museo300-regular.ttf") formátum: ('truetype'); font-weight: normál;}

MEGJEGYZÉS: Meg kell határoznia a betűkészlet nevét és helyét. A fenti példában a „Museo300” a betűtípus, amelyet egy „font” nevű mappába mentettünk..

Ha például a betűtípust a webhelyén szeretné használni, akkor írhat:

body {font-family: Museo300;}

Beágyazott betűkészletet használhat a webhely bármely elemére. Például…

#menu {font-family: Museo300;}

… Beállítja a Museo300-at a menüben.

A fenti módszer azt jelenti, hogy le kell töltenie a betűtípust, majd feltöltenie kell a szerverére, ami ha unha megkérdezi, elég unalmas.

azonban, ynem kell letöltenie a használni kívánt külső betűkészletet.

A fejlécből (header.php) található betűkészletekhez egyszerűen kapcsolódhat, például így:

Hogyan és hol adjuk hozzá a fenti sort? Nyisd ki a WordPress adminisztrációs panel -> Megjelenés -> Szerkesztő -> header.php

Ha nem szeretné, vagy nem tudja szerkeszteni a header.php fájlt, akkor csak importálja a betűkészleteket a következő sor beírásával a style.css:

@import url (http://fonts.googleapis.com/css?family=over+the+rainbow);

A fenti példa lehetővé teszi a A Szivárvány felett betűtípus a Google-tól bárhol a webhelyén. Például, ha a webhelyen a Over the Rainbow alkalmazást szeretné használni, használhatja ezt a kódot:

body {font-family: "Over The Rainbow";}

A Google biztosítja több mint 600 ingyenes betűtípuscsalád, szóval játssz el!

Frissítés (13/12/13): Ha könnyen hozzá szeretne adni a Google Betűkészleteket a WordPress webhelyéhez, használhatja a Google Typography plugin. Ezen kívül további információt találhat a Google betűkészleteiről és azok bevezetéséről a következő helyen: Tom Ewer, a WordPress webhely-tipográfia javítása a Google betűtípusokkal.

További források a betűtípusokkal való játékhoz

WordPress plugins betűkészletek hozzáadásához

És azok számára, akik nem akarnak belemerülni a kódba, mindig telepíthetnek egy WordPress-bővítményt, hogy a nehéz feladatokat elvégezzék az Ön számára. Íme néhány a WordPress.com népszerűbb ingyenes betűtípus-bővítményei:

Jól szórakozol? Menjünk tovább…

 Dátum és idő formázása

Járt már egy WordPress webhelyen, ahol a dátum vagy az idő nagyon kedves hangon jelenik meg, és úgy érezte, mintha teljes noob lenne a webhelyén? Ezen webhelyek tulajdonosai csak játszottak a egysoros kód és most már nem tud eleget a dátumaikról. Haha.

Jó hír, szerkesztheti ez a kódsor és lepje meg olvasóit is.

A te WP műszerfal, keresse meg Megjelenés, majd aztán Szerkesztő az alábbiak szerint:

formázási dátum

Ha odaértél, láthatod a jobb oldalon található .php fájlok listáját:

egyetlen üzenet

Kattintson az egyetlen üzenetre (single.php), és miután megnyílt, nyissa meg a keresősávot a megnyomásával Ctrl + F. A megjelenő keresősávba írja be:

az idő

Azonnal észlel egy sort, amely valamilyennek tűnik:

Most a szerkeszteni kívánt terület van (‘F Y’).

Engedje meg, hogy részletesebben kidolgozzam ezt a részt, hogy valami húsosabbat kapjak.

Az „F” („F Y”) jelentése A hónap teljes neve és az „Y” az Év 4 számjeggyel. Ezért, ha („F Y”) használ, a dátum így néz ki:

2013 szeptember

Ha vesszőt dobsz F és Y között, akkor kell lennie valamire, például:

2013 szeptember

Ha hozzá szeretné adni a napot és más elemeket, használhatja a következő karaktereket:

l = a nap teljes neve (kisbetűs L)

F = hónap

j = a hónap napja (dátum)

Y = év 4 számjeggyel

y = év 2 számjeggyel

További karakterek találhatók az alábbi táblázatban:

formázási dátumtábla

És itt néhány példa:

formázási példák

Mindig emlékszik, hogy csak a zárójelben szereplő karaktereket (‘F Y’) és, írd fel, ne törölje az egyetlen idézőjelet. Nyugodtan használjon annyi karaktert, amennyit csak akar, hogy elérje a kívánt hatást, és ne felejtsen el mindent elmenteni, ha kész.

Sőt, megszabadulhat a dátumtól, ha törli …

… Mint ahogyan nemrégiben tettem a blogomban. �� Most minden, amit kapok Fred Írta: igen és így kategóriában… blah blah. Egyáltalán nincs dátum.

A következő részre táplálkoznak? Jobb ha te.

Nem találtam a time funkciót?

Ez rendben van, mert napjainkban sok téma a_date () függvényt használja a_date () függvény helyett, ami valójában jobb gyakorlat. Ha a témája a_date () függvényt használja, akkor nem kell módosítania, mert egyszerűen megváltoztathatja az adatmegjelenítés módját az irányítópulton a „Beállítások-> Általános” részben..

Képek használata

Ez az oktatóanyag valószínűleg a legegyszerűbb (és legrövidebb) része. De ha valóban még nem ismeri a WordPress programot, a képek hozzáadása kihívást jelenthet.

A WordPress lehetővé teszi képek hozzáadását a feltöltési segédprogramon keresztül vagy (Média hozzáadása gomb), ha új üzenet vagy oldal készül. Csak annyit kell tennie, hogy vigye a kurzort arra a helyre, ahol a képet szeretné elhelyezni a bejegyzésében vagy az oldalán, majd kattintson a „Média hozzáadása” elemre..

add média

Amint a feltöltési segédprogram megnyílik, hozzáadhat további részleteket, például a feliratot, a méretet, a linkeket és az igazítást.

feltöltési segédprogram

Ez a terület a feltöltési segédprogram jobb oldalán található.

Ha többet szeretne tudni a képek hozzáadásáról, kérjük, olvassa el a következő forrásokat:

És ha nem biztos benne, hogy hol találhat fantasztikus ingyenes képeket, akkor nézd meg azt a bejegyzésünket, amelyben megírtuk a WordPress legjobb képforrásait..

Lát? Mondtam, hogy ez a legrövidebb

Favicon hozzáadása

Mielőtt teljesen elfelejtenénk a képeket, hozzunk létre egy favicont és adjunk hozzá WordPress webhelyéhez. A favicon (vagy a kedvencek ikonja) az a ikon, amelyet egy weboldal könyvjelzőjéhez használnak.

Egy favicon segít az olvasóknak az Ön webhelyének vizuális azonosításában.

Általában a favicon egy 16 x 16 pixel négyzet alakú grafikus fájl .ico kiterjesztéssel. A kiterjesztés ikonra utal.

Hogyan hozzunk létre egy Favicont?

Készítheti faviconját online, vagy olyan képszerkesztő programokkal, mint a GIMP, vagy bármilyen más programmal, amely lehetővé teszi .ico fájlok mentését. Az online szolgáltatások többsége ingyenes.

Noha a kép általában nagyon kicsi (16×16 pixel), a faviconnak teljes egészében a blogodnak kell lennie. A kép vagy szöveg, amelyet a favicon létrehozásához használ, reprezentálnia kell online üzleti vállalkozását.

Ha képszerkesztőt használ:

  • Vágja be vagy adjon helyet ennek megfelelően, hogy a kép négyzet alakú legyen
  • Átméretezheti a képet 16 X 16 pixelre, és
  • Mentse a képet mint favicon.ico

Az online szolgáltatások, amelyeket favicok létrehozásához használhatnak, többek között (de nem kizárólag):

Miután létrehozta a kedvenc fiókját, lehetővé teszi, hogy töltse le a számítógépére, tehát ne aggódjon.

A Favicon telepítése a WordPress programban

Ha van egy másik favicon a téma főmappájában, akkor törölnie kell azt az FTP-kliens vagy bármely más, az Ön számára elérhető módszer használatával. Az FTP-ügyfelek használata azért ajánlott, mert könnyen kezelhetők, és gyorsan megtalálhatják a kívánt fájlt.

Ennek az oktatóanyagnak a segítségével a faviconer.com segítségével létrehoztam egy favicont a blogomhoz, és a Filezilla segítségével meglévő faviconokat töröltem..

A kézben lévő favicon.ico fájl segítségével töltse fel a témájának fő mappájába. Ebben a mappában tárolja az aktuális témáját.

Ezután töltsön fel egy másik favicon-példányát a gyökérmappába (általában public_html) vagy a fő könyvtárba, ahol a webhelyet tárolja, így láthatja a favicon-t, amikor a yoursite.com/favicon.ico gépet gépelte. Ez automatikusan hozzáadja az ön hírességét a hírcsatornákhoz.

Ha kész a feltöltés, itt az ideje, hogy működjön a favicon.ico. Ezt kell tennie:

Favicon hozzáadása egy plugin segítségével

A favicon hozzáadásának legjobb módja egy plugin használata. Azt javaslom, hogy használja a „All In One FaviconPlugin a fejlettebb használathoz, egy nagyon egyszerű megközelítéshez, amelyet használhat “A legegyszerűbb FaviconPlugin, amelynek nincs háttérbeállítási lehetősége, csak feltöltenie kell a favicon.ico nevű fájlt a szerver megfelelő helyére.

all-in-one-favicon

A favicon kézi hozzáadása a sablonhoz

Néhány ember inkább (bár ez nem a legjobb módszer) szeretné, ha bálványaikat manuálisan adják hozzá a sablonjukhoz, és ezt a következő lépések elvégzésével tehetik meg:

  • Jelentkezzen be a Irányítópult
  • Keresse meg a Megjelenés
  • Akkor a Szerkesztő (témaszerkesztő)
  • Keresse meg és nyissa meg header.php (fejléc) fájl

Adja hozzá ezt a sort a fejléc fájlhoz (lehetőleg annak a tetejének, ahol másokat látsz) címkék:

Mentés kész. 

Frissítse a böngészőt, hogy megtekinthesse az új módosításokat.

Ezen a ponton képesnek kell lennie a színek megváltoztatására, jobb betűkészletek kiválasztására, a dátum és idő formázására, a képek használatára és a favicon hozzáadására..

Következtetés

Annyit kell megvitatni a WordPress-webhely újratervezéséről, hogy szolgaság lenne (neked), ha megpróbál mindent egyetlen üzenetben lefedni..

Annak érdekében, hogy a legjobban részesüljön, a legjobb, ha az oktatóanyagot több részre osztja (ez az 1. rész). A napok elteltével több újratervezési trükköt fogunk megosztani, tehát várjunk. Ezeknek az oktatásoknak az a célja, hogy segítsen Önnek a legjobb WordPress webhely létrehozásában, és boldogabbnak érzi magát, mivel mindent egyedül tett.

Ha meg szeretné osztani véleményét (véleményeit), vagy hozzá szeretne adni valamit a beszélgetéshez, kérjük, hagyja meg véleményét az alábbi megjegyzés szakaszban.!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map