Cserélje ki az example.com webhelyet a domain nevével, a saját témáját pedig a téma mappájával. Mentse el a változtatásokat.

Utolsó lépés: CSS használat hogy elrejtse a menü ikonját a nagy képernyős felhasználók számára, és megjelenítse az alacsony felbontásúak számára. Módosítanunk kell a menüikon pozícióját és a kicsúsztatás megjelenését is. Másolja ki és illessze be ezt a CSS-kódot a téma stíluslapjába.

@média képernyő és (min. szélesség: 769px) ( #toggle ( display:none; ) ) @media screen and (max-width: 768px) ( #popout ( pozíció: rögzített; magasság: 100%; szélesség: 250px; háttér) : rgb(25, 25, 25); háttér: rgba(25, 25, 25, .9); szín: fehér; felül: 0px; bal: -250px; túlcsordulás:auto; ) #toggle ( lebegés: jobbra; pozíció : fix; felső: 60px; jobb: 45px; szélesség: 28px; magasság: 24px; ) .nav-menu li (szegély-alsó: 1px tömör #eee; kitöltés: 20px; szélesség:100%; ) .nav-menu li :hover ( háttér:#CCC; ) .nav-menu li a ( color:#FFF; text-decoration:none; width:100%; ) )

Ne feledje, hogy a téma menüi különböző CSS-osztályokat használhatnak, és ütközhetnek a fentiekkel. Ezt a problémát a Chrome vagy a Firefox Inspector segítségével oldhatja meg, hogy megtudja, mely osztályok ütköznek az Önével. Ne feledje továbbá, hogy szabadon testreszabhatja a panel megjelenését a webhely kialakításához.

Talán észrevette, hogy a legtöbb fejlesztő elkezdett egyéni Javascript-alapú kihúzható paneleket hozzáadni webhelyéhez, akár a webhely legtetején, akár a láblécben. Ezek a panelek arra szolgálnak, hogy felhívják a felhasználó figyelmét különféle promóciókra, érdekes blogbejegyzésekre stb. A fő ok, amiért ezek a panelek olyan széles körben elterjedtek, természetesen az eredményekre való összpontosítás. Lehet szeretni vagy utálni ezeket a paneleket, de biztosan egyetért azzal, hogy megfelelnek a rájuk bízott feladatnak. Számos ingyenes és kereskedelmi bővítmény létezik, amelyek segítségével kicsúsztatható paneleket adhat hozzá blogjához; Ebben a cikkben később kitérek rájuk.

Ingyenes bővítmények

hello bár

Egy egyszerű és szerény bővítmény, amely mindent tartalmaz szükséges eszközöket hogy hozzon létre egy panelt a webhely tetején. Egy ilyen panel minden bizonnyal felkelti a felhasználók figyelmét.

Figyelem Bar

Ha fel szeretné hívni a felhasználók figyelmét néhány fontos üzenetre, létrehozhat egy riasztási panelt, amely egy szokásos div, némi extra stílussal. Érdemes azonban emlékezni arra, hogy egy ilyen panel nagyon bosszantó, és nem valószínű, hogy webhelye felhasználóinak tetszeni fog. Az Attention Bar plugin segítségével egy szép sávot jeleníthet meg az oldal tetején, amely nem vonja el a figyelmét az oldal böngészéséről. A gazdag beállítások segítenek a fejlesztőnek a panel elrendezésének szabályozásában.

Easy Heads Up bár

A beépülő modul egy praktikus értesítési sávot ad a webhely tetejére. Az értesítésekben hivatkozásokat hagyhat a cselekvésre ösztönzés megerősítésére.

Értesítési eszköztár

A blog láblécében elhelyezett panel. Lehetővé teszi egyéni értesítések megjelenítését. A bővítmény a Statikus eszköztáron alapul.

Quick Notice Bar

A bővítmény lehetővé teszi, hogy kiemelt értesítést hozzon létre a webhely fejlécében. Egy ilyen értesítés biztosan felkelti a felhasználók figyelmét, így az egyszerű figyelmeztetésektől kezdve az akciós ajánlatokig bármit elhelyezhet benne.

Viper bár

A bővítmény lehetővé teszi egy panel hozzáadását a webhely fejlécéhez, amellyel növelhető az előfizetők száma. A beépülő modul tartalmaz beépített stílusokat, integrációt az Aweberrel és a Feedburnerrel, a konverziókövetést, az osztott tesztelést és még sok mást.

Kereskedelmi bővítmények

Egy WordPress beépülő modul, amely lehetővé teszi egyéni panelek hozzáadását blogja vagy webhelye tetejére. Különféle értesítéseket jeleníthet meg különböző oldalak, állítson be egy szabványos panelt, amely minden oldalon megjelenik stb.

Figyelemfelkeltő

Beépülő modul, amellyel értesítési panelt adhat hozzá webhelyéhez. Ezzel a bővítménnyel egyszerűen megjeleníthet egyéni szöveget, Twitter-bejegyzéseket vagy RSS-hírcsatornákat. Ezen kívül van egy hatalmas lista a funkciókról, amelyek lehetővé teszik az értesítés megjelenésének testreszabását.

http://wplift.com/wordpress-notification-bar-plugins/

Sziasztok, a blogoldal kedves olvasói. Ma egy meglehetősen funkcionális és kényelmes upPrev bővítményről szeretnék beszélni, amely többféle oldalhivatkozást is megvalósíthat egyszerre. Munkásságát (legalábbis a cikk írásakor) minden oldal alján megtekintheti egy-egy cikkel – a jobb oldalon megjelenik egy felugró panel a hasonló anyagok listájával.

A bővítmény nem csak hasonló anyagokat tud megjeleníteni, hanem az azonos kategóriából vagy címkearchívumból származó korábbi cikkeket is (erről a fenti cikkben részletesen beszéltünk, és aminek gyakorlati megvalósítását ismertettem), korábbi anyagokat a a teljes blog formátumát, valamint a véletlenszerűen kiválasztott kiadványokat. Ráadásul az egészet bélyegképekkel is lehet ízesíteni, ha a bejegyzések írásakor létrehozod őket.

Milyen szerepet játszik most a linkelés a webhely népszerűsítésében?

Általánosságban elmondható, hogy a webhely optimalizálása a további sikeres promóció érdekében az első számú feladat (a második a szerzés visszamutató linkek). A belső tényezők blokkolhatják és csökkenthetik minden más befolyását. Másrészt lehetetlen (főleg, ha kulcsszavakat tartalmában és a belső hivatkozások horgonyaiban).

Most a promóció integrált megközelítése hajt, és a linkelés meglehetősen jelentős helyet foglal el benne. Mostanában divattá vált az infografikák használata bárminek megjelenítésére. A Seo témában sok hasonló folyamatábrát találhatunk, például a Seoprofinak van egy cikke az oldal népszerűsítéséről. Sajnos még nem állok készen ilyen remekművek megalkotására, de ezekre hivatkozva nem tudok túl sok vizet önteni.

Melyik összekapcsolási sémát válasszuk? Meglehetősen nehéz kérdés, mert a korábban jól működő sémák közül sok (mind a hírhedt „gyűrű” is, amelyek megvalósítási módszereinek linkjeit kicsit feljebb adtam) már nem adják azokat a fenomenális eredményeket, amelyeket még egy tucat évvel ezelőtt megfigyeltek. . A keresőmotorok is tanulnak, és igyekeznek nem figyelembe venni azt, ami az ő szemszögükből nyilvánvaló csalás.

A gyűrűk sorozata formájában történő linkelés Peydrank elmélete szerint komolyan növeli a gyűrűben érintett oldalak () statikus súlyát.

Ez azonban nem mindig működik a gyakorlatban. Lehetséges, hogy amikor az egyes oldalak kiesnek az indexből, a gyűrű eltörik, vagy előfordulhat, hogy a jelölések csökkentése érdekében a keresés komoly csökkentési tényezőt vezetett be a statisztikai súlyszámítás klasszikus képletébe.

Az oldalak összekapcsolásának van egy másik feladata is, ami már nem a Yandex vagy a Google tetszését célozza, hanem azt kérem a látogatót. Nyilvánvalóan nem lesz elég egy cikk, hogy kipróbálja a blogodat – mindenképpen meg kell hívnod, hogy menjen el valahova, hogy felkeltse érdeklődését, késleltesse és esetleg előfizetőjévé tegye.

Így a linkelés is hatással van viselkedési tényezők , amit a keresés is figyelembe vesz és minden évben egyre nagyobb mértékben. Szinte minden webmester megérti ezt, és blokkolja az oldalt hasonló anyagokkal, a legolvasottabb kiadványokkal vagy az azonos kategóriájú cikkekkel. Valószínűleg vannak más változatok is a témában.

Természetesen a megvalósítási lehetőségek belső összekapcsolás mise is van. Bővítmények nélkül is megvagy (a cikkben találsz rá példát), de ezek közül rengeteget linkelésre írtak. A legnehezebb dolog olyan lehetőséget választani, amely tökéletesen működik a blogodon.

Jómagam sokat próbáltam már, és néhányról véleményt is írtam (). Valójában az említett plugin az egyik legjobb a kapcsolódó bejegyzések kiszámításához és a blogoldalakon való felsorolásához.

De adatai más WordPress-bővítményeket is használhatnak, így színesebbek vagy igényesebbek. Ugyanebben a YARP-ról szóló cikkben csak egy példát adtam az adatainak a Related Posts Slider plugin általi felhasználására, amely lehetővé tette a hasonló bejegyzések megjelenítését ezen az űrlapon:

Nos, vagy így:

Ma hívják a hősünket felPrev azt is tudja, hogyan vegyen át információkat a Yet Another Related Posts Plugin adatbázisból, és jól teszi, mert nem kell minden alkalommal újra feltalálni a kereket. Valójában térjünk át a mérnöki csoda lehetőségeinek leírására.

Lehetőségek összekapcsolása az upPrev beépülő modullal

Ezekhez a stílusokhoz nem nyúltam, mert a másik úton jártam (nem a legközvetlenebb), amit lentebb a szövegben leírok. Sim esetén lépjen a második lapra:

Válassza ki azoknak a bejegyzéseknek a számát, amelyekhez ez a bővítmény linkeket generál. De egy kicsit lejjebb, mi csak válassza ki a hivatkozás típusát oldalunkhoz. Kiválasztottam a kapcsolódó bejegyzések opciót a Yet Another Related Posts beépülő modul alapján (előre telepítve kell lennie), de beállíthat egy csengetési hivatkozást a második vagy harmadik lehetőség kiválasztásával, valamint egy nagy gyűrűs hivatkozást a először .

Ezt az üzletet csak posztokhoz szándékoztam megszervezni, amit a megfelelő mezőben pipa jelöl. Ez a panel a bejegyzés címén kívül több szót is megjeleníthet (a számuk a legalul van beállítva) a bejegyzés elejétől vagy az idézet mezőtől, ha kitölti. Nekem feleslegesnek tűnt.

A harmadik lap a linkekre leadott kattintások számának nyomon követésére szolgál ezen a panelen, amit nem használtam. A negyedik lapon azonban még mindig aktiváltam a gyorsítótárat. Az ötödik lapon megakadályoztam, hogy a panel megjelenjen mobiltelefonon, de nem tiltakoztam a táblagépeken való elhagyása ellen:

Nos, ez minden, az upPrev beállítások befejeződtek, de már megváltoztattam a panel megjelenését a Yet Another Related Posts Plugin beállításaiban.

A kihúzás tartalmának megjelenésének testreszabása

Ott kiválasztottam egy sablonfájlt, amely a hasonló bejegyzések megjelenítéséért lesz felelős (lásd a fenti hivatkozást a kiterjesztéssel való munka lényegéhez és sajátosságaihoz):

Hogy. most az upPrev plugin által megjelenített hasonló bejegyzések listájának megjelenését (a csúszó panelen) az a kód szabályozza, amely a téma mappámból () a yarpp-template-list.php fájlomban van regisztrálva. Ha a blogod bélyegképeket generál a bejegyzésekhez, akkor érdemes sablont választani a Még egy kapcsolódó bejegyzések beépülő modul arzenáljából az ő támogatásukkal.

Ennek a fájlnak a kódja:

have_posts()): $postsArray = array(); while ($kapcsolódó_lekérdezés->have_posts()) : $kapcsolódó_lekérdezés->a_bejegyzés(); $postsArray = "
• ".get_the_title()."
"; endwhile; echo implode(" "."\n",$postsArray); // kinyomtatja a kapcsolódó elemek listáját, vesszővel elválasztva else:?>

Nincsenek kapcsolódó bejegyzések.

Amint látja, itt él a kimenő panel fejléce, ezért (ha szükséges) át kell konvertálnia ezt a fájlt UTF-8 kódolásra BOM nélkül, hogy elkerülje a hibákat (). Nem tudom ti hogy vagytok vele, de én elég régóta élek főként Jegyzettömb szerkesztő++ () és benne ez az átalakítás a következőképpen történik:

Nyilvánvaló, hogy ez a kód csak banális html lista(), és a stílusfájlban a kódban szereplő osztályokhoz megadott CSS-tulajdonságok felelősek a megjelenésért. Az én esetemben ezek a stílusok így néznek ki:

A.oy (szín: #333;font:700 1.2em/1 "PT Sans Narrow", Arial, sans-serif;line-height:18px;) li.eto (text-align:center;padding:12px 5px 17px 5px;margó: 5px 0;szegély: pontozott 2px #ccc;) li.eto:hover (szövegdekoráció:aláhúzott;) div.oyy (margó:0 0 0 0;padding:5px 0;betűtípus:normál 17px "Trebuchet MS", Verdana, Arial;szín:#666;)

A lampochka osztály zöld pipákat ad hozzá, hogy css kódot Base64 kóddal vannak beállítva (ezt a kódot másoltam valahova). Ha érdekel, nézd meg a style.css-emet. Rendben, most mindennek vége. Ha valamit elfelejtettél, kérdezz. Igaz, egy hónapja állítottam be ezt a linkelési lehetőséget és ez idő alatt már ki is tűnt valami a fejemből.

Sok szerencsét! Hamarosan találkozunk a blogoldalak oldalán

Lehet, hogy érdekel

Hogyan távolítsuk el az átlátszó képpontot http://yarpp.org/pixels a Yet Another Related Posts beépülő modulból, és módosítsuk a feliratot
Kapcsolódó bejegyzések listájának létrehozása a WordPressben (bélyegképekkel) a Kapcsolódó bejegyzések beépülő modul használatával belső linkeléshez
A webhely viselkedési statisztikáinak javítása újabb kapcsolódó bejegyzésekkel és kapcsolódó bejegyzések csúszka beépülő moduljaival a WordPresshez
Egyszerű számlálók és kategória- és oldalikonok – gyönyörű RSS- és Twitter-számlálók, valamint kategóriák és oldalak ikonjai a WordPressben
WordPress bővítmények a blogomon (webhelyem) Csúszkák és diavetítések a webhelyhez – milyen lehetőségek vannak, és hogyan kell használni a jQuery Slider szkripteket
Breadcrumbs a WordPressben a Breadcrumb NavXT bővítmény használatával (a linkelés megerősítése)
A WordPress memóriahasználatának csökkentése oldalak létrehozásakor – WPLANG Lite bővítmény a lokalizációs fájl cseréjéhez
WP-PageNavi – Oldalnavigáció WordPress bloghoz – Telepítés, konfigurálás és módosítás megjelenés lapszámozás
Naptárba hozd! - Eseménynaptár a WordPresshez
Nem küld levelet a WordPress-ről, és nem működik vizuális szerkesztő- megoldás Configure SMTP és Post Editor Buttons bővítményekkel

Hogyan navigációs menü webhely szerint, felhasználói profil menü stb. elrejtheti, és akkor jelennek meg, ha rákattint és rámutat. Egyesek azt mondanák, hogy az oldal használhatósága ebben szenved. Szerintem nem, mivel az oldal tisztább lesz, ami azt jelenti, hogy könnyebben lehet navigálni. Az ember nincs megzavarodva a linkek hegyében.
Ma készítettem egy kollekciót csúszó panelek, amelyek alapértelmezés szerint el vannak rejtve az oldalon. Hívni menü, kattintson a megfelelő ikonra, vagy mutasson rá. Ez a technika a mobilalkalmazásokból jött a webdesignba, ahol nem lehet sok elemet megjelölni egy képernyőn. Idővel az ilyen panelek webhelyekre költöztek. Ez a gyűjtemény elsősorban a mobilfejlesztők számára lesz hasznos, . Kis képernyőfelbontásnál ez megjelenik kimenő navigáció, normál, nagy monitorokon pedig rendes menüt készíthet, amit mindenki megszokhat. Így a mobileszközzel rendelkező személy nem fog összezavarodni az Ön webhelyén, mivel régóta megszokta, hogy csúszó panelek, mert az okostelefonjában lévő összes alkalmazás ugyanazon az elven működik.
Szeretném megjegyezni, hogy ez a gyűjtemény tartalmazza bővítmények, amelyek csak alatt vannak kihegyezve mobil webhelyek széles monitorokon pedig nem megfelelő a használatuk. Bár vannak olyan univerzális panelek, amelyek bármilyen webhelyhez alkalmasak. Tekintse meg a bemutatót, és válassza ki az igényeinek megfelelőt.
A legördülő panelek a következőn működnek: Egy ilyen menü beépítése a webhelyére nem lesz nehéz, és a fejlesztői webhelyek igen részletes utasításokat termékük használatáról.
Hamarosan újratervezzük a Postovoy webhelyet, és az egyiket fogjuk használni jquery bővítmények amelyeket az alábbiakban mutatunk be.
Így. Itt van egy gyűjtemény 20 jquery legördülő csúszósáv-bővítmény webhelyéhez. Ne felejts el megjegyzéseket hagyni.

Csúsztatható oldalsó menü

Szép kicsúsztatható navigációs menü a jquery-ben. Ideális mobil és normál webhelyekhez egyaránt.

Átmenetek a vászonon kívüli navigációhoz

Rendkívül hatékony bővítmény, amely lehetővé teszi egy diapanel megszervezését, amely különféle animációs effektusokkal, köztük 3D-vel jelenik meg. A bővítmény 14 animációs effektust tartalmaz.

jPanelMenu

A navigációs sáv stílusban készült iOS alkalmazások. Könnyű és gyors menü, amely megkönnyíti a mobiloldal fejlesztését.

Újra létrehozása Google Nexus Menü

A csúszó panel a Google Nexus menüvel analóg módon készül.

bigSlide – Jquery dia navigációs sáv

A csúszópanel mobiloldalhoz és normál oldalhoz egyaránt alkalmas. A híváshoz kattintson a három csíkot ábrázoló ikonra.

Többszintű nyomógombos menü

A Jqutry bővítmény a bigSlide-hoz hasonlóan működik. A panel az ikonra kattintva hívódik meg. Ennek a menünek az az előnye, hogy támogatja a többszintű struktúrát.

Dobozfedél menü

Nagyon szép csúsztatható navigációs sáv 3D hatással.

Animált határmenük

A képernyő sarkában lévő plusz jelre kattintva egy kis oldalsó panel ikonokkal. Elrejtéséhez kattintson a "-" szimbólummal ellátott ikonra.

Snap.js

A csúszó panelt mobil eszközökhöz tervezték. A menü az egérkurzorral vagy ha be van kapcsolva a képernyőn húzva hívható elő mobil eszköz, ujj.

Csúsztató és nyomómenük

|

Meny

A Jquery beépülő modul lehetővé teszi, hogy 3D-s effektussal rendelkező, menő dia-navigációs sávot építsen be webhelyén.

mb.jquery

Más panelekkel ellentétben a képernyő tetején jelenik meg ahelyett, hogy mozgatná. A blokkba bármilyen html-t, szöveget és általában bármit behelyezhet, amit akar.

Android Dock

A panel a mobilwebhelyek számára kiélezett, és a képernyő alján található. Ha megnyomja, ikonok jelennek meg, amelyekben bármilyen hivatkozást elhelyezhet.

Tartalmi csúszka

A Cool csúszópanel két szinten készül. Az első a menü. A második a tartalom. Most ez a hatás nagyon népszerű a tervezők és webfejlesztők körében. Számos alkalmazást találhat. A Microsoft levelezője hasonló elven működik.

Bizonyára gyakran találkoztál a webhelyek oldalain, behúzható paneleken másfajtaés olyan elrendezések, amelyek fent, lent, jobbra vagy balra teljesen automatikus üzemmódban, meghatározott időközönként vagy kattintással aktiválhatók. Általános szabály, hogy az ilyen panelekben, egyelőre rejtve a felhasználó szeme elől, néhány További információ fontos és nem is olyan fontos. Például előfizetési űrlapok, közösségi média widgetek, linkek, címkék, elérhetőségek stb., röviden bármi.
Létezik nagy mennyiség kész megoldások tolópanelek implementálására javascriptben, modulok és bővítmények különféle CMS-ekhez, külön jQuery bővítmények, de eléggé, megakadt a szemem, teljes mértékben működik tovább tiszta CSS.

Régóta szerettem volna valami ilyesmit felkavarni, a rejtett jelölőnégyzetek használatának mechanizmusa jól ismert és érthető, de valahogy soha nem érte el a kezem. Így hát, miután a CodePen poros raktárában belebotlottam egybe, elhatároztam, hogy kísérletezek, és a hegynek adom, elég működőképes, kissé átalakítva és a testvérünkhöz igazítva, az én behúzható változatom. felső panel tiszta CSS-en kiderült, mi történt)).

Megnéztük a példát, összehasonlítottuk az eredetivel, és most, akinek kell, nézzük meg, hogyan működik együtt az egész. Ismét nem js, csak az érintetlen html és a "mágikus" css elvégzi a munkát.

Html elrendezés

Három fő elemből áll: egy alaptárolóból, egy tartalomblokkból és egy panel nyitó/bezárása gombjából.

Amint láthatja, a type=" " zászló jelen van a paneltervben, amely alapértelmezés szerint rejtett és inaktív. Címkével , amely a css-ben gombként van kialakítva, kapcsolatot létesítünk a jelölőnégyzet között, azaz ha a címkére kattintunk, a bevitel működik (aktívvá válik). Nos, egy pszeudoosztály segítségével: a css-ben kapcsolatot létesítünk a rejtett jelölőnégyzet és a panelelemek között.
Azonnal szeretném megjegyezni, hogy a nyitás/bezárás gomb nem a panel törzséhez van rögzítve, hanem a főoldali tartalomtárolóhoz képest helyezkedik el.