Voordat een websitesjabloon in HTML / CSS wordt gecodeerd, moet deze worden uitgewerkt. Het is gebruikelijk om een ontwerp in Photoshop te tekenen. De voltooide lay-out wordt opgeslagen in een bestand met het formaat .PSD.
Laten we als voorbeeld het site-ontwerp in de onderstaande afbeelding maken.
1. Open Photoshop en maak er een nieuw document in ( Bestand -> Nieuw of Ctrl + N).
2. We stellen de initiële parameters in. In de praktijk is het bijna onmogelijk om over een ontwerp na te denken met pixelnauwkeurigheid - tijdens het lay-outproces moet je zeker iets veranderen, verplaatsen, opnieuw doen. Daarom kunnen de afmetingen bij benadering worden ingesteld en is het raadzaam om de breedte en hoogte van het document duidelijk meer aan te geven dan de geplande grootte van de site, zodat alle elementen precies in de lay-out passen. We zullen ons document 1000 pixels breed en 1500 pixels hoog maken. Let op: pixels, geen centimeters. Andere parameters kunnen met rust worden gelaten.
3. We zetten de heersers aan. Tijdens het werk zijn ze nodig, omdat je met de linialen de afstanden heel nauwkeurig kunt meten. Controleer of je linialen hebt ingeschakeld. Als dat het geval is, ziet u links en onder de bovenste werkbalk schalen.
Als er geen linialen zijn, zet ze dan aan ( Bekijk -> Linialen of Ctrl + R).
De linialen moeten de waarde in pixels weergeven. Om er vanaf een andere lengtemaat naar over te schakelen, klikt u met de rechtermuisknop op de liniaal en vinkt u het overeenkomstige vakje aan in het menu dat wordt geopend.
4. Controleer of de lettergrootte is opgegeven in pixels en niet in punten. Indien niet correct geconfigureerd, ga naar Bewerken -> Instellingen -> Algemeen, ga in het venster dat verschijnt naar het tabblad Maateenheden en linialen, in de vervolgkeuzelijst Tekst Kiezen Pixels en druk op Oke.
5. Maak meteen de achtergrond van de site. We hebben deze verloopvulling oranje, die in geel verandert. Selecteer in het linkerdeelvenster de tool verloop.
Druk op het paneel dat bovenaan verschijnt op de knop Spiegel verloop, kies een kleur in het palet aan de linkerkant.
De hulpmiddelen van het geopende venster gebruiken Verloopbewerker, kies de gewenste kleuren. Om de exacte kleur van het controlepunt in te stellen, klik erop, druk op de knop Kleur en specificeer het in het kleurenkiezervenster in RGB, HSB, CSS of een ander beschikbaar formaat.
Als resultaat van de manipulaties is het verloop als volgt geworden.
Om een verloop op de huidige laag toe te passen, sleept u de aanwijzer erover terwijl u de linkermuisknop ingedrukt houdt.
6. Sla de achtergrond op in een bestand. Wat we hebben gedaan, moet onder de hoofdpagina worden weergegeven en het hele browservenster beslaan - een soort achtergrond. Een site is bijvoorbeeld 800 pixels breed en de schermresolutie van de gebruiker is veel hoger. De rest van de ruimte (alles behalve de 800px die zal worden ingenomen door het paginablok) wordt gevuld met een verloopachtergrond.
Omdat de schermresolutie niet kan worden voorspeld, kun je een strook van één pixel dik uit de gemaakte achtergrond knippen en opslaan als afbeelding. De browser zal de achtergrond er over de gehele breedte mee vullen.
6.1. Een hulpmiddel kiezen Rechthoekig gebied.
6.2. Selecteer een strook van willekeurige breedte, maar over de gehele lengte van de laag.
6.3. Kopieer de selectie ( Ctrl + C).
6.4. Maak een nieuw document ( Ctrl + N), stel de breedte in op 1 pixel en plak de gekopieerde ( Ctrl + V).
6.5. Sla het bestand op in Jpg-formaat.
7. Maak de achtergrond van de pagina. De achtergrond zal effen wit zijn. Een hulpmiddel kiezen Rechthoek en stel de vereiste parameters in het eigenschappenvenster in. We hebben een rechthoek van 800x1100 pixels, waarvan de linkerbovenhoek op punt 100.0 ligt.
8. Maak de achtergrond van de koptekst. Matachtige verloopvulling met afmetingen 780x80px.
Sla het op als een apart 1 pixel breed grafisch bestand, zoals we deden met de achtergrond.
9. Maak het hoofdmenu aan. Gebruik de tool Horizontale tekst om het eerste menu-item aan de lay-out toe te voegen - huis... De laag wordt automatisch aangemaakt en zelfs hernoemd, u hoeft er dus niets mee te doen.
Het is hierbij belangrijk dat alle punten gelijkmatig verdeeld zijn, daarom wordt het gebruik van linialen ten zeerste aanbevolen. Om een verticaal uit te breiden, sleept u terwijl u de muisknop ingedrukt houdt van links naar rechts. Gebruik de linialen om de afstand te meten, aangezien elk menu-item in ons geval 120 pixels moet beslaan.
10. Voeg op dezelfde manier de rest van de menu-items in.
11. Voeg een logo toe. We hebben al een kant-en-klaar exemplaar, dus het enige dat overblijft is om het zorgvuldig in de lay-out in te voegen. Klik hiervoor op Bestand -> Openen, klik vervolgens op de afbeelding en verplaats deze, terwijl u de muisknop ingedrukt houdt, naar de titel van het sjabloondocument. Wanneer deze wordt geopend, sleept u de afbeelding naar de gewenste locatie in de lay-out en laat u de muisknop los.
12. We schrijven de naam en slogan van de site. Met de tool die we al kennen, vullen we het bijna gemaakte logo aan met opschriften.
13. Ga naar het zijpaneel. Laten we eerst een verloopvulling voor de titels maken en opslaan in een apart bestand. Je bent bekend met de tools, geen uitleg nodig.
14. Voeg de titeltekst van het informatieblok toe aan het nieuw gemaakte verloop.
15. Teken een rand voor het gebied. Om dit te doen, volstaat het om een transparante rechthoek met zwarte omtreklijnen te gebruiken. Selecteer het gereedschap Rechthoek, stel het vultype van de vorm in op Geen kleur, klik op het pictogram Lijntype instellen en selecteer zwart, anders zijn er geen lijnen. Als de omtreklijn te dik is, stelt u de lijndikte in op 0,5 pt.
16. Voeg hieronder een blokkop toe met een verloopvulling, zoals in items 12-13.
17. Maak het menublok in het linkerdeelvenster. Voeg een oranje rechthoek van 100 px toe met een gele omtreklijn van 0,2 pt.
18. Voeg er tekst aan toe.
19. Maak met behulp van het dupliceren van lagen en linialen nog vijf menu-items van het linkerdeelvenster.
20. Schrijf de tekst in het hoofdgedeelte van de pagina met dezelfde tool.
21. Voeg een foto toe aan het hoofdgedeelte van de pagina, zoals we hebben gedaan met het logo. Om een afbeelding te kopiëren, verplaatst u deze eenvoudig met de muis terwijl u de toets ingedrukt houdt. Alt... Als de afbeelding plotseling niet meer in grootte past, gebruik dan het gereedschap Transformeren ( Ctrl + T).
22. Teken de achtergrond van de voettekst van de site - een oranje verloop van 64 px.
23. Sla de 1 pixel brede strook van de onderste achtergrond op in een apart grafisch bestand.
24. Verlaag de hoogte van de pagina. Het bleek dat alle elementen al getekend waren en dat er nog extra ruimte over was. Dit is waar betekenisvolle laagnamen van pas kwamen. Selecteer onder andere de achtergrondlaag (we noemen het de achtergrond) en gebruik het gereedschap Transformeren om de hoogte van onze witte rechthoek te verkleinen tot de onderkant van de paginavoettekst.
25. Sla de sjabloon op in een bestandsindeling .PSD (Bestand -> Opslaan).
26. Het resultaat van deze actie is nog steeds een eenvoudige, maar toch al normaal ogende sitesjabloon.
Nu, van de PSD-lay-out, blijft het gebruik van HTML / CSS om de websitesjabloon te maken, maar hier zal ik het in het volgende artikel over hebben.
In dit artikel zal ik je door de manieren leiden om sjablonen te maken voor permanente WordPress-pagina's. Elke methode heeft voor- en nadelen. Maar voordat u begint, laten we het even hebben over wat pagina's zijn en hoe ze verschillen van berichten.
In WordPress kun je pagina's (pagina) en berichten (post) maken. Ze verschillen doordat de records: in de feed op de hoofdpagina komen; voor inzendingen zijn categorieën aangegeven; records mogen geen boomstructuur zijn, en pagina's: worden gebruikt voor inhoud als "Over mij", "Contacten", "Sitemap"; hebben geen categorieën, maar een boomstructuur. Ingangen zijn meestal bedoeld voor chronologische informatie (op tijdstip van toevoeging), en pagina's voor een boomstructuur zijn niet tijdsafhankelijk. Dit artikel wordt bijvoorbeeld gepubliceerd als een "invoer" onder de kop "Code", en links in het kopmenu leiden naar de volgende pagina's: Functies.
Pagina's zijn als berichten - ze bevinden zich in dezelfde databasetabel en hebben bijna dezelfde gegevens: titel, tekst, extra velden, enz. Beide zijn records, maar van verschillende typen: de pagina's zijn boomachtig en zijn georganiseerd door bovenliggende en onderliggende pagina's te maken, en de records worden gecombineerd door koppen en tags. In WordPress kun je extra berichttypen maken, boomachtig of niet.
Pagina's maken in WordPress
Vaak moet u een aparte paginasjabloon maken om informatie anders weer te geven dan op andere pagina's. Bij het maken van een paginasjabloon in WordPress, kunt u de pagina volledig wijzigen: verwijder de zijbalk, voettekst, koptekst, u kunt de pagina onherkenbaar wijzigen. Op deze site wordt bijvoorbeeld de pagina gewijzigd waarop de WordPress-bestandscodes worden weergegeven.
Methode 1: een paginasjabloon via een bestand met een willekeurige naam en deze verbinden in het admin-paneel (klassieke manier)
Dit is de meest gebruikelijke manier om een paginasjabloon te maken in WordPress. Om dit te doen, moet u een .php-bestand maken, bijvoorbeeld tpl_my-page.php in de themamap en helemaal aan het begin van het bestand noteren dat het gemaakte bestand een sjabloon voor pagina's is:
Wanneer we nu een pagina maken in het beheerderspaneel in het blok "Pagina-eigenschappen", kunnen we een "sjabloon" selecteren:
Sinds WordPress 4.7. u kunt dergelijke paginasjablonen voor elk berichttype maken, niet alleen voor pagina's. Vul hiervoor de opmerkingen aan met de regel: Sjabloon Berichttype: bericht, pagina, waarbij bericht, pagina de namen zijn van de berichttypes waartoe het sjabloon behoort.
/ * Sjabloonnaam: Mijn sjabloonpagina Sjabloonberichttype: bericht, pagina, product * /
Voordelen:
- Alleen records met het opgegeven sjabloon kunnen worden opgehaald. U kunt bijvoorbeeld alle pagina's weergeven met het sjabloon "Services" (bestand servises.php). Dit is soms handig. De naam van het sjabloonbestand wordt opgeslagen in het metaveld _wp_page_template, dus om pagina's met de opgegeven sjabloon weer te geven, moet u een query maken via het metaveld (zie WP_Query).
Nadat we één sjabloon hebben gemaakt, kunnen we deze gemakkelijk op verschillende pagina's toepassen. U kunt bijvoorbeeld een sjabloon maken zonder zijbalk en deze op verschillende pagina's gebruiken.
nadelen:
Nadat u het sjabloonbestand in de themamap hebt gemaakt, moet u naar het beheerderspaneel gaan en het sjabloon voor de pagina installeren. Dit is niet altijd handig bij het ontwikkelen. Gebruik daarom de tweede methode als u van plan bent de sjabloon voor slechts één pagina te gebruiken.
Hoe het werkt:
Wanneer je naar het admin-paneel op de pagina gaat om een boom-achtige post te bewerken, scant WordPress alle sjabloonbestanden voor de regel:
Sjabloonnaam: ***
De regel kan overal en op elke manier in het bestand worden geplaatst.
Alle bestanden met vergelijkbare regels worden verzameld en weergegeven in de sjabloonselectie in het blok "Paginakenmerken".
Wanneer de pagina wordt gepubliceerd, wordt de naam van het sjabloonbestand of standaard geschreven in het aangepaste veld _wp_page_template als de sjabloon niet is opgegeven:
Wp_page_template = standaard
_wp_page_template = tpl_my-page.php
Vervolgens, wanneer de gebruiker de pagina bezoekt, zal WordPress het metaveld _wp_page_template controleren. Als de sjabloon is geïnstalleerd, wordt het sjabloonbestand gebruikt. Anders gaat het zoeken naar de paginasjabloon door de hiërarchie.
Methode 2: paginasjabloon door een bestand met een specifieke naam (sjabloonbestandshiërarchie)
Wanneer een pagina wordt gemaakt, wordt er een snelkoppeling voor ingesteld (slug, alternatieve naam). Het wordt gebruikt in de url-pagina. En het kan worden gewijzigd:
Om op deze manier een sjabloon te maken, moet u de pagina-slug weten en een bestand in de themamap maken. Laten we zeggen dat onze slug gelijk is aan contacten zoals op de afbeelding, dan zullen we een page-contacts.php-bestand in het thema maken. en vul het met de benodigde code (je kunt de inhoud van het page.php sjabloonbestand kopiëren en voor jezelf bewerken). Dat is het, als we nu de pagina bezoeken, zouden we een nieuwe sjabloon moeten zien. Op dezelfde manier kun je de ID (laat het 12 zijn) van de pagina nemen en een bestand maken page-12.php.
Voordelen:
Het is niet nodig om naar het beheerderspaneel te gaan en het sjabloonbestand te installeren. De sjabloon begint onmiddellijk te werken nadat het bestand is gemaakt. Handig bij het ontwikkelen.
nadelen:
De sjabloon wordt alleen voor één specifieke pagina gemaakt. Afhankelijk van de pagina-slug, als deze verandert, zal de sjabloon niet werken. Gebruik je ID, dan verdwijnt de afhankelijkheid van de slug, maar wordt in het themabestand onduidelijk tot welke pagina de template behoort (als er meerdere templates met ID zijn).
Praktisch nutteloos bij het schrijven van sjablonen, en nog meer plug-ins. Het kan worden gebruikt bij het bewerken van uw site waarvan de slug of pagina-ID van tevoren bekend is.
Hoe het werkt:
WordPeress kiest welk bestand in de volgende volgorde moet worden gebruikt (bestanden moeten in de hoofdmap van het thema staan):
- (any_name) .php (bij gebruik van een paginasjabloon)
- pagina- (post_slug) .php
- pagina- (record_id) .php
- pagina.php
- enkelvoud.php
- index.php
Methode 3: paginasjabloon via het filter "template_include" (codering)
Dit is een geavanceerde methode, het is complexer, maar samen met de complexiteit opent het brede mogelijkheden. Met deze methode kunt u een sjabloon instellen voor elke pagina, elk bericht, elke categorie, elke publicatie op de site of in het algemeen voor een groep publicaties. Zie voorbeelden met beschrijving:
// het filter geeft de $ template-variabele door - het pad naar het sjabloonbestand. // Door dit pad te wijzigen, veranderen we het sjabloonbestand. add_filter ("template_include", "my_template"); functie my_template ($ sjabloon) (# analoog van de tweede methode // als dit een pagina is met een portfolio-slug, gebruik dan het page-portfolio.php sjabloonbestand // gebruik de voorwaardelijke tag is_page () als (is_page ("portfolio") )) (if ($ new_template = location_template (array ("page-portfolio.php"))) return $ new_template;) # sjabloon voor een categoriegroep // dit voorbeeld gebruikt een bestand uit de themamap tpl_special-cats.php , // als sjabloon voor categorieën met ID 9 , de naam "Uncategorized" en de slug "php" if (is_category (array (9, "Uncategorized", "php"))) (retourneer get_stylesheet_directory (). "/tpl_special -cats.php";) # sjabloon voor schrijven op ID // het sjabloonbestand bevindt zich in de plug-inmap /my-plugin/site-template.php global $ post; if ($ post-> ID == 12) ( return wp_normalize_path (WP_PLUGIN_DIR). "/ my-plugin / site-template.php ";) # template voor pagina's van willekeurig type" book "// er wordt aangenomen dat het sjabloonbestand book-tpl.php zich in de themamap global bevindt $ post; if ($ post-> post_type ==" boek ") (retour get_stylesheet_ map (). "/boek-tpl.php"; ) retour $ sjabloon; )
Dergelijke code moet in het functies.php-bestand van het thema of in een plug-in worden geplaatst, of op een andere manier worden aangesloten. Zoals je in het voorbeeld kunt zien, werken voorwaardelijke tags tijdens het filter template_include al, zijn globale variabelen ingesteld: $ wp_query, $ post, etc.
Voordelen:
- Het is mogelijk om een sjabloon te maken bij het schrijven van een plug-in.
U kunt een sjabloon instellen voor elke pagina of groep pagina's. Bijna volledige carte blanche in actie.
nadelen:
De noodzaak om code te schrijven en deze afzonderlijk te verbinden (bijvoorbeeld in de functies.php van het thema).
Nu zal ik uitleggen hoe je een WordPress-thema kunt maken van een eenvoudige HTML-sjabloon met behulp van het ontwerpvoorbeeld uit dat artikel.
Het kan zijn dat u het ontwerp voor WordPress om vele redenen moet aanpassen, bijvoorbeeld als u uw eens statische site overzet naar een CMS, of u houdt van een ontwerp dat nog niet in de WordPress-collectie zit, of u wilt gewoon weten hoe de thema's van dit CMS werken van binnenuit.
Dus laten we beginnen.
De code naar bestanden distribueren
1. Download de sjabloon en pak deze uit in uw map met WordPress-thema's (adres zoals wordpress_blog_address / wp-content / thema's /). Hernoem de themamap naar wens als je wilt. Mijn sjabloon bevindt zich bijvoorbeeld op wordpress_blog_address / wp-content / thema's / MijnThema /.
2. Hernoem het bestand stijlen.css v style.css.
3. Openen style.css in een code-editor (zoals Notepad ++) en plak helemaal aan het begin de volgende regels:
/ * Themanaam: MyTheme Theme URI: http://test1.ru Auteur: NoName Auteur URI: http://test1.ru Beschrijving: Voorbeeld van testversie: 1.0.0 Licentie: GNU General Public License v2 of later Licentie-URI : http://www.gnu.org/licenses/gpl-2.0.html * /
Zoals je misschien al geraden had, is dit service-informatie over het ontwerpthema: titel, auteur, beschrijving, licentie, versie, enz. Je kunt de juiste delen van de regels vervangen door die van jezelf, dat wil zeggen, stel je eigen auteurschap, versie, beschrijving en andere gegevens.
4. Bestanden maken header.php, index.php, zijbalk.php, footer.php en distribueer de code van index.html.
4.1. V header.php kopieer de code regel voor regel aangezien dit bestand verantwoordelijk is voor de bovenkant van de site. stijlen.css vervang in de code door style.css- nieuwe geldige bestandsnaam.
4.2. V index.php plak de code van het hoofdblok (van de regel per regel ).
4.3. V zijbalk.php kopieer de zijmenucode (van Aan ).
4.4. V footer.php plak de resterende regels (met naar het einde van het document index.html).
5. Verwijderen index.html.
6. Ga naar het beheerderspaneel en zorg ervoor dat de MyTheme-sjabloon in de sectie verschijnt Uiterlijk -> Thema's... Je kunt het zelfs proberen te bekijken of te activeren, maar er komt nog niets goeds van, omdat we de sjabloon nog niet met WordPress hebben geïntegreerd.
Koptekst aanpassen
Nu gaan we uit van een statische sjabloon om een dynamisch thema te maken, waarin de gegevens en WordPress-instellingen worden geladen.
Er zullen PHP-inserts in de sjabloon zijn. Deze code begint met... Tussen hen is de PHP-code die meestal CMS-functies aanroept.
1. Open het header.php-bestand en vervang de code die erin zit vóór het blok
naar de volgende:
>
"> "> "type =" tekst / css "media =" scherm "/>We hebben het blok dynamisch gemaakt
De code roept een functie aan die de taalkenmerken terugstuurt naar de container.
">
In plaats van de codering als een constante te schrijven, hebben we een functie aangeroepen die de waarde uit de CMS-instellingen haalt en deze automatisch in de code vervangt, dat wil zeggen, om de codering te wijzigen, hoeft u het themabestand niet langer te bewerken.
Een belangrijke functie om de pagina te laten werken met stijlen, plug-ins en scripts.
2. Ga naar het bestand index.php bewerken. Schrijf in het begin
,
De regels roepen de kop-, zijbalk- en onderste bestanden van de site op.
Je kunt nu MyTheme bekijken of zelfs activeren. Als gevolg hiervan zal de browser het al bekende sjabloon weergeven met een statisch menu en een enkele pagina. Om het menu dynamisch en aanpasbaar te maken, en in plaats van op één pagina alle materialen op de site weer te geven, moet je de sjabloon verder transformeren.
Het hoofdmenu dynamisch maken
Tot nu toe hebben we een volledig statisch ontwerpthema, inclusief een met een ongewijzigd horizontaal hoofdmenu. Hoewel het niet kan worden geconfigureerd vanuit het beheerderspaneel en als u de code laat zoals het is, moet u het bestand elke keer bewerken om items in te voegen / te verwijderen / te verplaatsen header.php, wat erg onhandig is.
Om niet sluw te filosoferen en niet in de afgrond van de fascinerende programmeerwereld te duiken, zullen we het dynamische menu een statische naam geven. Plak de code in plaats van de horizontale menutabel
zodat je het volgende krijgt:
Om het menu weer te geven, opent u in het configuratiescherm van de site Uiterlijk -> Aanpassen -> Menu en hernoem het reeds gemaakte menu naar menu, of maak een menu en pas het naar wens aan, maar zorg ervoor dat u het menu een naam geeft.
De essentie van de actie is dat het bestand header.php functie wp_nav_menu ("menu = menu"); opent een menu genaamd menu, dat de juiste naam moet hebben en moet worden geconfigureerd in de WordPress-beheerder om weer te geven. Naam menu je kunt het in een ander veranderen, het belangrijkste is dat de naam overeenkomt met zowel in de site-instellingen als in de code header.php.
De navigatie gaat duidelijk ergens heen, al maakt het er wel een mooie ladder van. Dit komt omdat het menu van onze sjabloon onvoorzichtig in de tabel is geïmplementeerd en het nodig was om het met een lijst te ontwerpen. U kunt de situatie gedeeltelijk corrigeren door aan het bestand toe te voegen style.css de volgende code:
#menu ul (marge: 0; / * Opvulling instellen op nul * / opvulling: 4px; / * Margewaarde * / lettergrootte: 18px;) #menu ul li (weergave: inline; / * Weergave als inline-element * / marge -rechts: 5px; / * Opvulling links * / opvulling: 3px; / * Marges rond tekst * /)
Aangezien het becommentarieerd is, is geen verdere uitleg nodig. Het blijft om de pagina te vernieuwen en te zien dat de lijst eindelijk horizontaal is geworden.
Het menu kan natuurlijk vloeiender en mooier worden gemaakt, maar deze actie heeft niets te maken met het aanpassen van de sjabloon, maar is nauw verbonden met CSS, die je tot in detail kunt bestuderen.
We voltooien de "dop"
De enige elementen van het bestand header.php, de rest is statisch - de naam en beschrijving van de site. Om ze uit de instellingen te halen die zijn opgegeven in het beheerderspaneel, vervangt u de code die verantwoordelijk is voor het weergeven van de tekst in de koptekst door de volgende regels:
Ververs de pagina - het resultaat liet niet lang op zich wachten.
Werken met een bestand header.php Dit voltooit het, uiteindelijk heeft het de volgende code:
>
"> "> "type =" tekst / css "media =" scherm "/>Berichten weergeven
We gaan door naar het gedeelte dat de hoofdinhoud van de pagina bevat - het bestand zal worden bewerkt index.php.
De inhoud van het blok verwijderen Rechtsaf en plak in plaats daarvan de dynamische post-displaycode. U kunt ook alle code uit het bestand verwijderen en in plaats daarvan het volgende plakken:
">
/ /En hier is er niets: (404
Het begin van een lus waarmee de pagina berichten kan weergeven totdat ze opraken.
">
Geeft de titel van het bericht weer.
/ /
Datum in het formaat dag, maand (afgekort), jaar. Labels, opmerkingen.
Uitvoer posten.
Einde van de cyclus, op voorwaarde dat er records waren.
Als er geen materialen zijn, laat dan het juiste opschrift hierover zien en verlaat de cyclus.
Weergave van paginanavigatie, mits ze er niet op passen.
Schijnbaar eenvoudige code veranderde de pagina globaal - de blog is echt dynamisch geworden. Elk bericht kan worden bekeken, de links werken.
Verder ontwerp en plaatsing van elementen hangt alleen af van uw verbeeldingskracht en lay-outvaardigheden - u kunt doen wat u wilt met de gegevensweergave, maar het werk aan de sjabloon is nog niet klaar.
Widgets toevoegen
Links van de hoofdinhoud in de sjabloon bevindt zich een paneel met een informatieblok (een soort widget) en een zijmenu erop. Het informatieblok mag niet statisch zijn en aangezien het erg op een widget lijkt, raad ik aan er een widget van te maken. Dit vereist:
- registreer een blok widgets;
- breng het naar de juiste plek.
Nu in meer detail.
1. Maak in de themamap een bestand Functions.php aan. Het slaat de functies op die ervoor zorgen dat de sjabloon werkt. Het kan ook andere aangepaste routines bevatten.
2. Voer de volgende code in:
"MijnSidebar", "before_widget" => "", "after_widget" => "", "before_title" => "
"," after_title "=>"
",)); ?>Deze code registreert een blok widgets. In plaats van MySidebar kunt u een andere naam invoeren. Een menu kan met ongeveer dezelfde functie in dit bestand worden geregistreerd, maar ik heb besloten om het met een beetje bloed te doen en dit niet te doen om contact te maken met minimaal PHP, en tegelijkertijd twee verschillende benaderingen te laten zien om er een op te lossen probleem.
3. In het bestand zijbalk.php wis de regels:
Informatie
Verder...
en schrijf in plaats daarvan:
Zoals verwacht is het Informatieblok verdwenen, aan de zijkant is er alleen nog een statisch menu.
4. Maar veranderingen ten goede vonden plaats in het beheerderspaneel - sectie Verschijning heb alinea's Widgets en Menu... Ga naar de eerste. Open het en zie: binnen was er geregistreerd in bestand functies.php blok (ik heb het MySidebar).
5. Om het informatieblok opnieuw te maken, sleept u de widget naar de zijbalk Tekst, in het veld rubriek binnenkomen Informatie, in het veld Tekst- code
Wij bieden u vakantiekortingen. Verder...
6. Vernieuw de blogpagina - we zijn erin geslaagd om het blok bijna één-op-één opnieuw te maken (kleine nuances veranderen in het bestand style.css en ik zal er niet op focussen).
Het menu aanpassen
Het tweede deel van de zijbalk is het verticale menu. Het moet ook worden geconverteerd van statisch naar dynamisch, om het vervolgens rechtstreeks vanuit het beheerderspaneel te kunnen bewerken.
1. Verwijder de enorme geneste menulijst in het bestand zijbalk.php en voer in plaats daarvan de code in:
2. Open in je WordPress-dashboard Uiterlijk -> Aanpassen -> Menu, klik op de knop Menu toevoegen, geef het een naam zodat de naam in het beheerderspaneel overeenkomt met de naam in de paginacode zijbalk.php(Ik heb het left_menu) en voeg alle vereiste items toe.
3. Sla uw wijzigingen op, ververs de pagina en controleer of het dynamische menu aan de linkerkant van de site werkt en correct wordt weergegeven.
Paginacode zijbalk.php in vergelijking met het origineel nam het sterk af en werd het als volgt:
Menu
In feite bleef alleen de inscriptie statisch Menu... En dit komt omdat het onwaarschijnlijk is dat het zal veranderen, hoewel het gemakkelijk kan worden "nieuw leven ingeblazen", bijvoorbeeld door dit blok in de vorm van een ander widgetgebied te implementeren en het aangepaste menublok eraan toe te voegen, maar als je het artikel aandachtig leest, u kunt het nu eenvoudig zelf doen.
Werken met het footer.php bestand
In dit artikel leren we hoe je een WordPress-thema maakt. Eerst zullen we een HTML + CSS-sjabloon maken die we in de structuur van ons wordpress-thema zullen plaatsen. Nadat je dit artikel hebt gelezen, kun je je eigen sjabloon voor wordpress maken, of beter gezegd, je maakt het terwijl je de praktische oefeningen leest en voltooit. Je weet hoe het thema werkt en je bent in staat om zelfstandig de kern van het wordpress thema te implementeren vanuit andere HTML/CSS templates. Laten we beginnen?
Inleiding - WordPress themastructuur
De structuur van een WordPress-thema is uiterst eenvoudig. In het onderwerp hebben we een bestand inhoudsopgave.php, hij is verantwoordelijk voor het samenstellen van de onderdelen van de sjabloon. Anderen zijn verbonden met dit bestand: kop.php,voettekst.php... Deze bestanden (delen van de sjabloon) worden op elke pagina van de site gebruikt. We weten dat niet alle pagina's volgens hetzelfde sjabloon zijn gebouwd, dus het WordPress-thema heeft andere bestanden, zoals: archieven.php of enkel.php... U kunt ook uw eigen type pagina's maken als u wilt dat deze compleet anders is dan andere op de site. Het is erg handig.
Als je de structuur van het thema nauwkeurig onderzoekt en de inhoud van de bestanden leest, zul je intuïtief begrijpen wat wat is. Maar er zijn nog enkele punten die we zullen overwegen. Je kunt altijd terug naar deze pagina om te lezen hoe alles in zijn werk gaat.
Laten we nu eens kijken naar het maken van een sjabloon in fasen:
Stap 1 - style.css
Een CSS-bestand is een bestand met parameters en ontwerpoplossingen voor HTML-sjabloonelementen. U moet het hoofd-css-bestand hernoemen (als u er meer dan één heeft) naar stijl.css... Vervolgens moet u de volgende commentaarinformatie aan het begin van dit bestand toevoegen:
/ * Themanaam: Typography Paramount Theme URI: http: // site / Beschrijving: Een afbeeldingsloze sjabloon gericht op typografie..0. Algemene opmerkingen / eventuele licentieverklaring. ... * /
Deze code toont de onderwerpinformatie voor beheerders. Zorg ervoor dat het aan het begin van het bestand staat en dat er geen spatietekens voor staan!
Vervolgens heb ik een ander bestand gemaakt met de naam 1. css, en zet het in de map typografie-belangrijkste die ik heb gemaakt in de wordpress-map van het thema. Het is noodzakelijk om deze structuur strikt aan te houden, zodat WordPress dit bestand kan zien.
Stap 2 - kop- en voettekst
In deze stap zullen we twee bestanden maken: kop.php en voettekst.php eerder vermeld. Hoewel ze niet standaard zijn en optioneel zijn in het thema, worden ze in de meeste sjablonen gebruikt, dus we zullen ze maken.
Header.php
Laten we beginnen met dit bestand. Maak een bestand en geef het een naam kop.php, plak dan de gegeven code erin en sla op. Dit bestand wordt weergegeven op alle pagina's van onze sjabloon.
Een beeldloos sjabloon gericht op typografie.
Typografie voorop
Tot nu toe was er niets bijzonders aan een eenvoudig html / css-thema. Maar nu zullen we enkele elementen vervangen door wordpress-tags.
>
/">
Dit zijn slechts enkele van de tags die ik ken. Op de officiële website vind je nog veel meer: codex.wordpress.org.
taalkenmerken ()- Voert het taaltype voor de tag uit .
bloginfo ()- Wordt gebruikt om informatie over de site weer te geven, alle parameters zijn te vinden in de WordPress-codex.
wp_title ()- Retourneert de titel van de pagina.
wp_head ()- bevat javascript en andere noodzakelijke elementen.
get_option ()- krijgt de nodige opties voor het werken met de database.
voettekst.php
Laten we nu de zogenaamde "site footer" maken. Maak een bestand voettekst.php en zet de volgende code erin. In deze voettekst worden het jaar, de sitenaam en rss-links weergegeven.
phpde_tijd ("Y ");?>- geeft het huidige jaar weer.
- de naam van de blog.
- het toevoegen van een link naar de rss-feed van de blog.
wp_footer ()- dit is nodig voor de kern van wordpress zelf, die daar de elementen toevoegt die het nodig heeft.
Stap 3 - hoofdbestand van WordPress-sjabloon
Het is tijd om een standaard WordPress-sjabloonbestand te maken met de boven- en onderkant van de site. Maak een bestand inhoudsopgave.php... Dit is een van de twee vereiste WordPress-themabestanden (de andere is style.css). Plak het nieuw gemaakte bestand met de volgende code:
Deze code helpt WordPress om informatie te krijgen waar je verbinding kunt maken kop.php en voettekst.php... Laten we nog een paar regels tussen deze tags toevoegen:
">
Bij | |
Oeps...
Sorry, geen berichten die we "zijn gevonden.
Dit codefragment krijgt informatie over beschikbare blogposts en geeft deze weer als die er zijn. Als ze niet worden gevonden, wordt het deel van de code weergegeven na die ons laat weten dat de blog nog steeds leeg is.
Ook de tag toegevoegd die navigatielinks weergeeft zodat gebruikers eerder toegevoegde berichten kunnen lezen.
Een voorbeeld van hoe een WordPress-thema werkt
Nu we een schijn van een thema hebben, laten we eens kijken naar een voorbeeld van hoe het gemaakte WordPress-thema werkt.
We hebben vier bestanden in ons thema, dit is voldoende om te beginnen. In het volgende artikel zullen we het bestand toevoegen enkel.php die wordt weergegeven bij het weergeven van een specifiek bericht. Dit bestand bevat, in tegenstelling tot het bestand inhoudsopgave.php.
Als je nog vragen of misverstanden hebt over het maken van een wordpress-sjabloon (thema), maak dan je zorgen kenbaar in de reacties hieronder!Hallo lieve vrienden en lezers - site!
Vandaag laat ik je zien hoe je vanaf het begin een WordPress-sjabloon kunt maken.
Eerlijk gezegd had ik nooit gedacht dat ik dit zou begrijpen, maar de dorst naar kennis kreeg de overhand. Een sterk verlangen om het apparaat te begrijpen en een heleboel ideeën uit te voeren, zorgde ervoor dat ik ging zitten en alle gaten in mijn hoofd opvulde.
Elke dag zijn er nieuwe functies en manieren om ze in WordPress-sjablonen te implementeren. Natuurlijk is het fysiek onmogelijk om alles te bestuderen en alles bij te houden, maar als je een idee hebt van hoe alles werkt, zal het veel gemakkelijker zijn om door elk onderwerp te navigeren.
Voorbereiding voor het maken van een sjabloon voor WordPress.
Voordat u begint met het maken van een sjabloon voor WordPress, moet u verbinding maken met een werkende server op internet of een lokale server die op uw computer is geïnstalleerd.
Om je geen zorgen te maken over het overzetten van bestanden via FTP, raad ik je aan om sjablonen in een virtuele machine te ontwikkelen.
Vanuit het oogpunt van het bewerken en bewerken van code, raad ik het gebruik van - Notepad ++ ten zeerste aan. Dankzij de gemarkeerde code en eenvoudige interface heeft dit programma de voorkeur van het grootste aantal webmasters.
Ga naar de hoofdmap met je WordPress-installaties, ga naar wp-content => themes en maak daar een map aan met de naam "New Theme 3.0". Plaats de volgende bestanden in deze map (extensies - PHP, CSS, PN G):
Stap-1 style.css
Het bestand bevat alle elementen van de WordPress-sjabloonstijl. We zullen het eerst gebruiken om de naam van de sjabloon, de naam van de auteur, een link naar de site met een beschrijving en versienummer aan te geven:
Deze informatie kan op elk moment worden gewijzigd. Het belangrijkste is dat alles wordt becommentarieerd ().
Nu moet je in dit bestand enkele basisstijldefinities maken, die verder zullen worden geïmplementeerd in sommige PHP-bestanden van het WordPress-thema:
Deze code gebruikt de body-tag, alleen voor de specificatie (definitie) van de lettertypen die op de site worden gebruikt en de achtergrondkleur (alles verandert voor elke smaak). Vervolgens declareren we de stijlkenmerken voor de link, evenals enkele koppen die we in ons hele thema zullen gebruiken.
#wrapper - is verantwoordelijk voor de volledige grootte van de webpagina. Met #header is alles duidelijk, dit is de header, en #blog, dit zijn de laatste berichten op de hoofdpagina.
De rest van de kop- en voetteksten van de voettekst en de zijbalk # stijlen worden toegepast op hun respectievelijke bestandsnamen, waar we later naar zullen kijken.
Stap-2 header.php.
Nu zullen we een bestand maken - dat het logo en de normale navigatie zal bevatten:
In feite heeft het geen zin om deze code in detail uit te leggen. U hoeft alleen te onthouden dat het aanwezig moet zijn in alle WordPress-thema's. Maar als je interesse hebt, zal ik het je vertellen.
Helemaal aan het begin geven we het documenttype en de standaardcode aan die worden gebruikt om de sitenaam weer te geven die is ingevoerd in de WordPress-beheerdersinstellingen. Vervolgens komt de PHP-code waarmee u met boomachtige opmerkingen kunt werken.
Stap-3 Aangepaste navigatie toevoegen.
Nu we onze basisinformatie hebben gecodeerd, kunnen we een aangepast navigatiemenu toevoegen. Maar eerst moet je het bestand Functions.php openen en een speciale functie schrijven:
Zoals je kunt zien, heb ik secties van de code becommentarieerd. Het eerste deel, add_action, wordt gebruikt om ondersteuning toe te voegen voor het aangepaste menu, en het tweede, registreert het primaire menugebied zelf. Laten we vervolgens verder gaan met de daadwerkelijke implementatie in de WordPress-sjabloon.
Om een menu te maken, moet u een regel toevoegen onder de eerder geschreven code in het bestand:
Laten we het een beetje uit elkaar halen. De belangrijkste functie die hier wordt gebruikt, is wp_nav_menu. De variabelen sort_column, container_class en theme_location worden gebruikt als argumenten. Sort_column - garandeert de weergavevolgorde, die is ingesteld in het beheerderspaneel. Container_class - hiermee kunt u uw menu selecteren. Welnu, theme_location wijst eenvoudig de waarden die we in realtime manipuleren toe aan het primaire menu.
Stap-4 Stijl WordPress-navigatiesjabloon.
Dankzij de vorige stappen heeft ons WordPress-thema nu een aangepaste navigatie. Maar het gebruikelijke menu ziet er eenvoudig en niet aantrekkelijk uit. Om dit op te lossen, zullen we een nav-klasse in het bestand maken.
Zoals je kunt zien in de .nav, hebben we basisuitspraken gedaan zoals achtergrondkleur, navigatiebreedte, uitlijning en positie van het element op de monitor. Vervolgens stellen we de volgorde van de belangrijkste elementen en pop-ups in.
De laatste stap is het toevoegen van stijlen voor links vanuit het vervolgkeuzemenu:
In de .nav ul ul stellen we de absolute positie in en maken de eerste vervolgkeuzelijst 100% zodat deze onder de belangrijkste verschijnt. We hebben ook de achtergrond van het vervolgkeuzevenster gewijzigd om anders te zijn dan het bestaande. Naast de gemeenschappelijke waarden is een z-index: 99999 attribuut toegevoegd, waardoor dropdown-links worden uitgevouwen boven andere objecten.
Dit voltooit de styling van het aangepaste WordPress-sjabloonmenu.
Stap-5 index.php.
Het bestand index.php zal verantwoordelijk zijn voor de hoofdpagina van onze site. Het bevat de code om de koptekst, voettekst en zijbalk in te schakelen, waar we het later over zullen hebben. Het zal ook een functie hebben om de meest recente blogposts op te nemen en de bijbehorende miniaturen weer te geven.
De volgende regels code worden gebruikt om alle informatie in sidebar.php en footer.php weer te geven, waar je ze ook in je WordPress-sjabloon plaatst:
Kortom, het is niet zo moeilijk om deze code te achterhalen. Eenmaal gebeld, gebruiken we onze #blog, die oorspronkelijk is gemaakt in. Vervolgens voegen we een lus toe voor het weergeven van de nieuwste blogposts en code voor de koptekst, die we inpakken
.
Hier is een stukje code dat miniaturen weergeeft in berichten op de hoofdblogpagina. Tot nu toe is het inactief, maar in de volgende stap, met behulp van functions.php, zullen we het laten werken.
In de vijfde stap hebben we een stukje code toegevoegd dat verantwoordelijk is voor het weergeven van de postminiaturen op de hoofdblogpagina. Op dit moment gebeurt er niets dergelijks, omdat het is gedeactiveerd. Om het te activeren, moet u het bestand Functions.php openen en onder de eerder ingestelde code voor het navigatiemenu het volgende schrijven:
Na zorgvuldige bestudering van de code wordt het doel meteen duidelijk. De eerste regel voegt ondersteuning toe voor miniaturen in uw WordPress-thema en de tweede regel stelt de exacte afmetingen van de afbeelding in.
Stap-7 zijbalk.php.
Ik denk dat je al geraden hebt dat het sidebar.php-bestand alle informatie zal weergeven die we in de zijbalk willen zien. Aangezien we het al in index.php hebben gebruikt, hoeft u alleen nog de code in het bestand te plaatsen en onze zijbalk wordt weergegeven op de hoofdpagina van de site:
Ja, dat is alle code die je aan sidebar.php moet toevoegen om het functioneel te maken. Nu zal ik de betekenis ervan uitleggen.
Met behulp van een div roepen we de stijlen uit het bestand aan, en de onderstaande code geeft ons de mogelijkheid om de widgets uit het WordPress admin gebied in de gewenste volgorde te plaatsen.
Maar om het te laten werken, zoals veel andere functies, moet u de volgende code in het bestand Functions.php schrijven:
Deze code vertelt WordPress alleen om de zijbalk te registreren die we in sidebar.php hebben aangegeven. Voor algemene informatie kan ik zeggen dat WordPress gemakkelijk in één thema kan worden uitgevoerd met meerdere zijbalken.
single.php is wat zal worden gebruikt voor één berichtpagina. De onderstaande code zal erg lijken op degene die we in index.php hebben geplaatst. Het enige verschil is dat we een commentaarsjabloon hebben toegevoegd met een div en wat code om comments.php op te nemen:
Met de release van WordPress 3.0 hebben de ontwikkelaars besloten om het leven van de auteurs van thema's en sjablonen voor WordPress gemakkelijker te maken. Ze schakelden over op één standaard voor commentaarformulieren.
De onderstaande code moet in uw comments.php-bestand worden geplaatst:
Dit voegt een standaard reactieformulier toe aan je berichten.
In het page.php-bestand zullen we de code plaatsen die verantwoordelijk is voor de statische pagina's van onze site. Het zal bijna identiek zijn aan degene die is gepost in single.php. De enige verandering is de afwezigheid van een commentaarsjabloon en de toevoeging van code die pagina's verwerkt, geen berichten. Al het andere zal hetzelfde zijn:
Het bestand category.php wordt gebruikt om berichten uit een specifieke categorie of archief weer te geven waartoe de lezer toegang heeft. Hier zal het grootste deel van de code vergelijkbaar zijn met page.php en single.php, die we hierboven hebben gecodeerd, behalve een stuk aan het begin:
Het onderstaande codefragment is het enige dat we na de hoofdlus hebben toegevoegd:
Hier gebruiken we een aantal if / elseif-statements in PHP die laten zien wat je op de blog bekijkt. Als we bijvoorbeeld naar een categorie met de naam - "" kijken, wordt deze weergegeven in h2 Archief uit de categorie: "" voor alle items, waarbij ze worden opgesplitst op datum of auteur.
Stap-12 De achtergrond van de site instellen.
Met de komst van WordPress 3.0 is er een functie gemaakt waarmee u de achtergrond van een website vanuit het beheerderspaneel kunt wijzigen met een afbeelding of een normale kleur. Om dit te doen, plaatst u de volgende code in uw Functions.php-bestand:
Aangepaste achtergronden zijn dus inbegrepen. Als bonus voegen we onderstaande code toe om de archief-, commentaar- en taglinks van de RSS-feed beschikbaar te maken:
Om de WordPress-sjabloon te voltooien, voegen we een stukje code toe aan footer.php met behulp van de #footer die is gedeclareerd in. Onze voettekst bevat alleen basisinformatie over copyright, evenals RSS-nieuws en commentaarfeed:
Hiermee is het maken van de eenvoudigste sjabloon (thema) voor WordPress voltooid.
Om de prestaties te controleren, kunt u het archief met het gemaakte thema downloaden en activeren op uw bron:
Is het je gelukt om je eerste WordPress-sjabloon te maken?
Vrienden, terwijl ik een nieuw bericht schrijf, kun je het volgende lezen:
Dat is alles voor vandaag.
Iedereen die het artikel leuk vond, kan zich abonneren op blogupdates om meldingen over de release van nieuw materiaal op hun e-mailaccount te ontvangen.
Tot nieuwe artikelen...
Met vriendelijke groet, Denis Chernikov!
Interessant over het onderwerp:
Doe alsjeblieft een goede daad, vertel je vrienden over de blog:
96 reacties Wat denk je?
Heel erg bedankt voor het artikel! Zeer nuttige informatie voor jonge lay-outontwerpers! Ik las een artikel over rap ... =)
Denis Chernikov antwoordde:
3 november 2012 om 14:38
Alsjeblieft, Alexander! Ik heb drie dagen lang over haar gepoft, ik wilde dat iedereen alles begreep! Hoop dat ik het heb! Rapchik regels!
Alexander Krasilny antwoordde:
3 november 2012 om 15:13
Ja, ik heb gemerkt dat het artikel niet klein is en een heleboel kleine nuances. Als je er geen rekening mee houdt, gaat het mis! Mijn vriend houdt zich bezig met pure lay-out, zit op kantoor en het salaris is redelijk, in de regio van 4000-5000 UAH. Bovendien is hij autodidact! Dus ik heb een verlangen, maar ik heb niet genoeg tijd ... = (
Het archief kon niet worden geïnstalleerd. PCLZIP_ERR_BAD_FORMAT (-10): Kan einde van handtekening van Central Dir Record niet vinden
Dit is wat er wordt geschreven nadat ik tegen dit onderwerp wilde protesteren. Wat is hier aan de hand?
Met respect en dankbaarheid, Evgeny!
Bedankt voor het nuttige artikel. Voor mij is het beter om het voltooide thema voor jezelf opnieuw te maken.
Denis, de sjabloon bleek een beetje smal, er staan veel vraagtekens op de hoofdvoettekst in plaats van een inscriptie, en om het item te bewerken wordt het ook alleen weergegeven met vraagtekens. Is dat hoe het zou moeten zijn? en staat nog niet in het hoofdmenu van de hoofdpagina en het is onhandig om het admin-paneel te betreden, alleen via de redactie van het artikel. En in principe heel goed, en natuurlijk bedankt.
Julia antwoordde:
4 november 2012 om 06:47 uur
Ik weet niet wat er met het sjabloon aan de hand is, maar de ingestelde achtergrond is niet zichtbaar op de blog.
En iets anders. Niet alle code is zichtbaar op de screenshots.
Maar toch bedankt voor het artikel! Het ga je goed! Succes in de toekomst!
Met vriendelijke groet, Eugène!
Bedankt voor de informatie. Ik zal het zeker proberen.
Denis, ik heb mijn oude thema verwijderd en een complex en nieuw thema geïnstalleerd. Veel van de bestanden die je beschrijft staan er niet, bijvoorbeeld single.php, page.php en category.php. Daarom is het moeilijk om te coördineren hoe in een dergelijke situatie moet worden gehandeld. Maar de foto's met miniaturen interesseerden me. Als ik op de hoofdpagina ben, zijn de foto's niet zichtbaar. Maar als u een spatie invoert in de zoekopdracht en de zoekopdracht start, verschijnen meteen alle miniaturen. Wat denken jullie, wat zou de reden kunnen zijn?
Hallo Dennis! Nou, dit is aerobatiek! Zelf WordPress-thema's opmaken, niet dom een sjabloon downloaden! Maar er is geen tijd om dit onderwerp zelf te proberen. Er is nog veel te implementeren wat u interessant vindt in het ontwerp van de site (pijl "omhoog", vouwhoek, enz.).
Denis, en het onderwerp is nuttig, en de ogen zijn bang ...
Terwijl gescoord in bladwijzers ...
Ik kwam bij toeval bij je, maar ik ben erg blij !!! Heel erg bedankt voor de informatie.
Het artikel is zeer relevant, nou ja, voor mij althans. Ik vroeg me onlangs af hoe ik mijn eigen thema voor WordPress (sjabloon) kon maken, en vond precies zo'n programma - Artisteer. Toegegeven, dit programma wordt betaald, MAAR niet voor een Rus als je begrijpt wat ik bedoel.
Denis, heb je geprobeerd de kleur van de zijbalken te veranderen? of hoe je het in meer detail kunt doen, in css
Heel erg bedankt voor het artikel. Was op zoek naar relevante informatie om WP-sjabloon aan te passen. In de meeste gevallen alleen algemene zinnen en zonder bijzonderheden, maar je hebt een andere kwestie!
Denis, je code breekt op sommige plaatsen vanwege de grootte van de foto ... En geluk was zo dichtbij!
Geweldig, heel erg bedankt! Ik dacht dat ik iets verkeerd begreep.
Denise, hallo!
Heel erg bedankt voor de les. Ik heb mijn ontwerp kunnen implementeren) Maar om de een of andere reden was er een probleem met het invoegen van foto's in berichten - om de een of andere reden werkt tekstomloop rond foto's niet. Staat het ergens in het sjabloon? Ik begrijp niet wat er aan de hand is ... dergelijke problemen waren er eerder niet.
Bij voorbaat dank!
Denis Chernikov antwoordde:
19 maart 2013 om 15:45
Hallo Lyudmila!
Speciaal hiervoor heb ik een geweldige post geschreven. Het laat zien hoe je afbeeldingen en video's in je berichten kunt plaatsen. Kijk door de zoekopdracht of kijk in de lijst met artikelen.
Lyudmila antwoordde:
19 maart 2013 om 15:57
OK bedankt!
Vanuit het oogpunt van het bewerken en bewerken van code, raad ik het gebruik van - Notepad ++ ten zeerste aan.
Ik gebruik Sublime Text 2 - iets tussen NotePad ++ en de beruchte TextMate (Mac OS). Ik sleep het project naar het venster en het verschijnt in de vorm van een boom. Zeer comfortabel! Plus een heleboel trucs die het leven gemakkelijker maken dan NotePad ++! Sterk aanbevelen))
Denis, ik begreep er niets van in de eerste fase. Waar kan ik al deze codes krijgen? herschrijven vanaf uw printscreens? Misschien kun je ergens een sjabloon nemen en bewerken?
Erg bedankt! Ik zal proberen alles te doen zoals geschreven! Individuele look is veel beter))
Goedenavond. Ik ben een beginner en ik begrijp niet helemaal hoe in "" De benodigde mappen en bestanden maken "" "" "Plaats in deze map de volgende bestanden (extensies - PHP, CSS, PNG)" " Ik typte ze via Kladblok ++ en hoe over te dragen ???
Hallo nogmaals ... hoe kan ik dit doen ????:
Plaats de volgende bestanden in deze map (extensies - PHP, CSS, PNG):
De bestanden die u zoekt, worden op het bureaublad van de computer aangemaakt met behulp van een gewoon kladblok, met de toewijzing van de gewenste extensie.
Ik kan er niet achter komen hoe ik de bestanden IN DE MAP moet plaatsen. Als je ze kopieert vanuit het kladblok, is het onzin. Leg uit. en hoe u van Notepade ++ naar de map bestanden kunt overbrengen.
Waarom heb ik een slechte avatar? Ik ben over het algemeen aardig. Hoe kan ik deze veranderen ???
Hallo Dennis! Ik ben een nieuweling, vertel me alsjeblieft hoe ik een thema naar Wordpress moet schrijven, in Uiterlijk / Thema's wordt mijn thema niet weergegeven ... ((((
Bedankt, het artikel heeft veel geholpen!
voeg gewoon toe aan footer.php, anders is het admin-paneel niet zichtbaar zonder.
Dennis, fijne dag!
Om eerlijk te zijn, ik begreep niets van wat er was geschreven ... De verdienste hierin is niet van jou - ik heb absoluut geen kennis op dit gebied en voor mij bleken je aantekeningen Chinese geletterdheid te zijn ... Ik vraag het voor enige verduidelijking (als je wilt), of gewoon voor het verwijderen van je reactie :)
Hoe kan ik de naam van de sjabloon wijzigen, die voor sommige thema's wordt weergegeven in het linkermenu van het beheerderspaneel?
Ik heb geprobeerd uw sjabloon te downloaden - daar verandert noch de achtergrond noch de koptekst - de gegevens worden ingevoerd, de kleur is geselecteerd - alleen op de site zijn er geen wijzigingen :)))))
Hallo! Mag ik het onderwerp tegen een redelijke vergoeding afsluiten? Ik heb een idee hoe ik de huilende site wil zien, er is een foto voor het thema, maar ik heb niet de mogelijkheid om met Photoshop en HTML te werken
Sergei antwoordde:
23 maart 2014 om 1:50
Denis, neem me niet kwalijk, je handelt niet in lay-out, in slechts 3 avonden heb je zo'n meesterwerk kunnen tekenen, ongeveer 2 jaar geleden verzamelde ik dergelijke informatie beetje bij beetje, en hier is zo'n schat een link naar jou in contact en een diepe buiging voor u voor het verrichte werk, zijn er enkele waarheden tekortkomingen. Maar alles is precies, zelfs met alle kleine dingen, dit artikel zou ongeveer 2 jaar oud zijn voor mij, oh, hoe zou het me helpen met mijn eerste project. En je hebt iets in javascript in je arsenaal, alleen mensen van jouw opleidingsniveau zijn altijd interessanter om de oude dingen te lezen.
Denis Chernikov antwoordde:
23 maart 2014 om 12:12 uur
Sergey, ik handel soms in lay-out, maar ik hou er niet van om in al waardeloze code te graven om de draad te vinden die de hele site heeft vernietigd! Het is gemakkelijker voor mij om het vanaf het begin te doen dan om te zoeken naar fouten op de sites van klanten. En voor scripts heb ik een uitstekende tovenaar die alles vakkundig en mooi doet!
Sergei antwoordde:
23 maart 2014 om 23:59
Nee, ik heb geen programmeur nodig, maar informatie voor een lik-demon, ik zag echt al op je site een hele sectie over javascript, in het algemeen, bedankt voor je hulpbron, zeer informatief.
Help, ik kan stijlen.css niet bewerken vanuit het beheerderspaneel. Ik ga "uiterlijk - editor", selecteer een stijlbestand, maar het opent leeg. op ftp wordt alles bewerkt, maar het is niet handig voor mij.
hulp bij het uploaden van een zelfgeschreven site naar WP (ik betaal)
Dennis, heel erg bedankt voor het artikel! Zeer waardevolle en nuttige informatie. Ik zal het zeker gebruiken wanneer ik mijn sjabloon helemaal opnieuw maak.
Maar voor nu is er een kant-en-klaar thema voor de site gekozen, en ik ben slechts een "theepot" ... Ik zou erg dankbaar zijn voor uw hulp! Dus ik moest nieuws op pagina "A" alleen weergeven van categorie "A". Ik kopieerde de index.php-pagina, voegde er een regel code aan toe en selecteerde "A" als de sjabloon voor de pagina. Nu worden alleen de noodzakelijke items erop weergegeven, maar het hele ontwerp is verdwenen ...) zodat het ontwerp van deze pagina niet afwijkt van het ontwerp van de site, moet u iets toevoegen aan de stylesheet? Of heb ik in eerste instantie alles verkeerd gedaan? Bedankt)
Denis Chernikov antwoordde:
30 maart 2014 om 21:35
Elena, ik geef zulke consulten niet! Ik heb geen idee wat je daar doet, maar de beschrijving is niet altijd even duidelijk!
Elena antwoordde:
1 april 2014 om 16:51
Denis, ik zal de vraag veranderen: is het mogelijk om alleen artikelen uit kop "A" weer te geven op een pagina met de naam "A", en artikelen alleen uit kop "B" op een pagina met de naam "B"? Bedankt.
Sergei antwoordde:
30 maart 2014 om 22:37
Elena Ik weet niet zeker of dit bij je past, maar ik zou je probleem oplossen met behulp van 2 plug-ins. Display Widgets is een plug-in die de weergave van widgets op elke gewenste pagina bepaalt en deze Recent Posts Widget Extended maakt een prachtige weergave van nieuws, maar ik herhaal dat ik dit zou doen
Sergei antwoordde:
30 maart 2014 om 22:41
Toch realiseerde ik me na het lezen en heroverwegen dat deze optie niet erg goed is voor je Elena-vraag.
Elena antwoordde:
1 april 2014 om 17:16
Sergey, bedankt voor je antwoord! Ik heb de plug-in Recent Posts Widget Extended geprobeerd. Een handig ding) Ik zou precies dezelfde uitvoer van artikelen hebben, maar niet in widgets, maar op de hoofdpagina) Bedankt !!
Denis, help me het onderwerp uit te zoeken.
Je thema uit de post is als basis genomen. Ik heb alles voor mezelf opnieuw gedaan, alles past bij mij, maar er zijn geen opmerkingen zichtbaar. Er is een vorm van reacties, ze gaan voor moderatie, maar na goedkeuring wordt alleen het aantal reacties op het bericht en het formulier zelf weergegeven, en zijn de reacties niet zichtbaar.
Ik dacht dat ik ergens over wreef terwijl ik met bestanden aan het werken was, maar nee...
Heb je origineel geïnstalleerd, hetzelfde probleem, vertel me wat er aan de hand kan zijn, ik zal je erg dankbaar zijn.
Schl. Ik denk dat het punt misschien is dat de motor is geüpdatet en na de update is er iets misgegaan. Er is nog een andere optie om te proberen de php-versie van de hoster te wijzigen.
Denis, hartelijk dank voor de beschikbare informatie voor het begrip. Ik ben al heel lang op zoek naar een site met standaard sjablonen die als bron voor elk onderwerp kunnen dienen. Overal wordt het als volgt beschreven: er wordt een index.html-bestand gemaakt, dat vervolgens wordt versnipperd en in delen in .php-mappen wordt verspreid. Tegelijkertijd wordt voor het voorbeeld gewone en gestippelde tekst in index.html geplaatst. Maar tenslotte is er in elk onderwerp in eerste instantie geen tekst (deze is al door de gebruiker geschreven na het maken van een pagina of bericht). Na jouw artikel viel alles op zijn plek. Losse fragmenten van het mozaïek in mijn hoofd vormden één beeld. Nogmaals bedankt!
Goedemiddag, Denis, ik heb het artikel gelezen. Ik deed alles zoals je het schreef, MAAR met je aantekeningen en kleuren werkte ALLES. Het is goed))
VRAAG: Hoe de zijbalk te verplaatsen zodat deze aan de linkerkant wordt, en de tweede vraag: heeft u een artikel over hoe u uw eigen afbeeldingen in uw sjabloon kunt plaatsen (dat wil zeggen, het ontwerp in PSD is al gesneden, ik wil samenvoegen met de sjabloon).
Alvast bedankt voor uw antwoord.
