Share
Gedurende deze zesdelige beginners-tot-masterreeks zullen we de geavanceerde functies van WordPress gebruiken om ons eigen portfolio en blog te maken, compleet met een optiespagina, meerdere stijlen en ondersteuning voor de nieuwe WordPress 2.7-functies. Vandaag zullen we alles samen binden.
In het laatste deel van WordPress Week maken we een eenvoudige aangepaste widget voordat deze wordt afgehandeld Innovatie een beetje plastische chirurgie met een alternatief kleurenschema.
Er zijn nog steeds verschillende tekstelementen die we nog niet hebben gestileerd en daarom niet goed lijken, zoals bijschriften voor afbeeldingen, blockquote, pre, code en adres.
Voeg het volgende toe aan style.css:
p.wp-caption-text font-size: 0.8em; lettertype-stijl: cursief; blockquote font-size: 0.9em; marge: 15px 0 15px 15px; opvulling: 0 15px; pre font-family: "Courier New", Courier, monospace; lettergrootte: 0.9em; marge: 10px 0 20px 0; code background-color: #efefef; kleur: # 000; font-family: "Courier New", Courier, monospace; lettergrootte: 1em; marge: 0 3px; opvulling: 0 3px; adres font-size: 0.9em; font-family: Georgia, "Times New Roman", Times, serif; regelhoogte: 1.5em; margin-bottom: 15px;
En dit in deepblue.css:
p.wp-caption-text color: # 555; blockquote border-left: 2px solid # e3e8ed;
We gaan een widget maken (hieronder) waarin de vijf laatste blogberichten worden weergegeven - met de eerste afbeelding waarop de post is aangepast en wordt gebruikt als voorbeeldafbeelding.
Het is ontworpen om te worden gebruikt op het widgetgebied van de startpagina.
De widget is in feite een aangepaste WordPress-lus die wordt aangeroepen vanuit een functie die deze in een widget verandert.
Binnen in de / Inc / map maak een bestand met de naam bloglist-widget.php en start het met het volgende:
van de blog
De hele lus wordt ingepakt in een nieuwe functie recentblogposts () (je mag het noemen wat je maar wilt). Op de volgende twee regels registreren we twee objecten als 'globaal' - dit geeft ons toegang tot de WordPress-database ($ wpdb) en post ($ bericht) klassen in de widget. Hierna nemen we de var.php het dossier.
Volgende:
Een normale aangepaste lus, met de portfolio-categorie uitgesloten, beperkt tot vijf berichten en caller_get_posts = 1 is een nieuwe parameter in WP 2.7 die de lus instelt om oude 'Stickied'-berichten te negeren.
Nu wordt het interessant:
Accentsconagua
berichten. "WHERE post_parent = '". $ post-> ID. "'EN post_type =' bijlage 'ORDER BY' post_date 'ASC LIMIT 0,1"; $ post_attachments = $ wpdb-> get_results ("$ queryattach"); if ($ post_attachments) $ image = $ post_attachments [0] -> guid; ?> De bovenstaande code doorzoekt de database om de URL van de eerste gearceerde afbeelding voor de huidige post op te halen en plaatst deze erin image $. Merk op dat de afbeelding moet zijn attatched en niet gelinkt van ergens anders.
Zie een andere post die ik met behulp van deze code heb geschreven op de ThemeForest Blog: "Image Resizing with WordPress".
; ?>/inc/thumb.php? src =<?php echo $image; ?>& w = 50 & h = 50 )
Als een gearceerde afbeelding is gevonden, wordt deze door het TimThumb-script geparseerd om 50x50 px te zijn. De titel en datum van het bericht worden dan ook weergegeven.
De lus en functie worden dan gesloten:
Vervolgens wordt de widget compatibel gemaakt met de sjabloon door deze in de te wikkelen $ before_widget en $ after_widget tags gedefinieerd in de sjabloon:
eindelijk, de register_sidebar_widget () functie wordt gebruikt om de widget in het Dashboard te registreren. 'Recente blogberichten' is de naam van de widget die in het dashboard wordt gebruikt.
Binnen functions.php voeg het volgende toe om de nieuwe widget in de sjabloon op te nemen:
include (TEMPLATEPATH. "/inc/bloglist-widget.php");
Open in het dashboard Vormgeving -> Widgets en zet de 'Recente blogposts' neer (niet te verwarren met de 'Recente berichten' van WordPress-standaard) widget in het 'Homepage Bottom'-gebied:
De styling is vrij eenvoudig. Het beeld wordt zijdelings verplaatst en de grootte en het gewicht van de tekst worden gewijzigd. Voeg dit toe aan style.css:
ul.bloglist marge: 0; ul.bloglist li duidelijk: beide; lettergrootte: 1em; regelhoogte: 1.3em; lijststijl: geen; margin-bottom: 17px; overloop verborgen; ul.bloglist li img border: none; zweven: links; margin-right: 7px; ul.bloglist li .posttitle, ul.bloglist li .postdate display: block; lettergrootte: 0.9em; ul.bloglist li .posttitle font-weight: bold; margin-top: 2px; ul.bloglist li .postdate font-size: 0.8em; lettertype-stijl: cursief; font-gewicht: normaal; ul.bloglist li a: link, ul.bloglist li a: bezocht display: block; opvulling: 2px; overloop verborgen; ul.bloglist li a: hover, ul.bloglist li a: actief, ul.bloglist li a: focus text-decoration: none;
En voeg wat kleur toe aan de links wanneer u er in zweeft deepblue.css:
ul.bloglist li a: link, ul.bloglist li a: visited color: # 333; ul.bloglist li a: hover, ul.bloglist li a: actief, ul.bloglist li a: focus background-colour: # e3e8ed;
Dat is het! Zoals je hebt geleerd, creëer je een heel basiswidget is net zo eenvoudig als het omwikkelen van een normale aangepaste lus in een widgetfunctie. :)
Ik zou willen beginnen met mijn verontschuldigingen aan te bieden dat we dit laatste deel van de serie in verband met de problemen van Internet Explorer moeten vernietigen; maar het is een browser die nog steeds vrij goed gebruikt wordt en het is onze plicht om tegemoet te komen aan die slechte mensen die het gebruiken.
We zullen eerst omgaan met IE7 en daarna met IE6's problemen.
Binnen in de / Inc / map maak een nieuwe map met de naam / Css / en erin, twee bestanden: ie.css en ie6.css. Deze twee bestanden worden opgenomen in de header in een IE-voorwaardelijke verklaring. Voeg het volgende direct toe voordat de Javascript-jQuery-bestanden zijn opgenomen in de gedeelte van header.php:
Deze IE-voorwaardelijke verklaringen zorgen ervoor dat de ie.css bestand wordt alleen opgenomen in versies van Internet Explorer lager dan IE8; en ie6.css wordt ook gebruikt in versies lager dan IE7.
Het eerste probleem is in het gedeelte Opmerkingen, waar IE7 niet lijkt te werken met de lettertypegroottes op dezelfde manier als andere browsers, en het maken van elke opmerking met een schroefdraad kleiner wordt dan de opmerking van de bovenliggende opmerking:
Voeg het volgende toe ie.css om de lettergrootte in opmerkingen in pixels in te stellen (in tegenstelling tot de em's die in de hoofdstijlpagina worden gebruikt):
.commentaarlijst cite, .commentlist span font-size: 14px; zweven: links; opvulling rechts: 4px; .commentlist p font-size: 13px; regelhoogte: 16px; .commentmetadata font-size: 13px; regelhoogte: 14 px; .commentlist .reply font-size: 13px;
Nog een probleem: het zoekformulier en kopteksten in de zijbalk hebben besloten dat ze liever een 15px tekst-inspringing willen:
Laat het volgende achterwege om het terug te forceren:
#sidebar ul li * text-indent: -15px; #sidebar ul li ul * text-indent: 0;
Nu naar de IE6-problemen. De eerste en meest voor de hand liggende is dat de achtergrond van de navigatiebalk niet werkt omdat het een transparante PNG is:
Er zijn verschillende IE6 PNG-fixes beschikbaar, ik gebruik DD_belatedPNG. Sla het .js-bestand op in de / Inc / map.
Direct onder uw andere voorwaardelijke Voorwaardelijke Verklaringen in header.php toevoegen: (Zorg ervoor dat u de .js-bestandsnaam bewerkt als de uwe geen naam heeft DD_belatedPNG_0.0.7a-min.js)
Binnen DD_belatedPNG.fix () we passeren twee argumenten. Dit zijn eenvoudig de CSS-selectors van de elementen om de PNG-fix toe te passen.
Toevoegen aan ie6.css om een paar problemen met het widgetgebied van de startpagina op te lossen en we zijn klaar:
.extra's display: inline; ul.bloglist li a: hover, ul.bloglist li a: actief, ul.bloglist li a: focus background: none; cursor: pointer; tekstdecoratie: onderstrepen; ul.bloglist li width: 300px; ul.twitter li.twitter-item float: left; breedte: 260 px;
Al onze inspanningen om kleurstijlen van de rest van onze CSS te scheiden, waren om het gemakkelijker te maken om alternatieve kleurenschema's te maken die op de optiepagina kunnen worden geselecteerd. In dit laatste deel van de serie, Innovatie gaat onder het mes door met de redspace schema:
Binnen in de / Stijlen / map, maak een nieuwe map met de naam / Redspace / en binnenin, kopiëren in de search.png en bullet.gif bestanden van de /Diepblauw/ map.
Maak ook een kopie van deepblue.css zoals redspace.css.
Sla de volgende drie afbeeldingen op in de / Redspace / map als bg.jpg, trans.png en transred.png respectievelijk:
Het is nu net zo eenvoudig als het omwisselen van de blauwe kleurcodes met rode in redspace.css:
/ * Innovatie rode stijl - redspace.css * / body background: url ("redspace / bg.jpg") repeat-x # 140a05 0 bovenzijde; kleur: # 333; a: link, a: visited color: # 941919; #head h1 color: #fff; #head h3 color: # c4acaa; #nav background: url ("redspace / trans.png") herhalen; rand: 1px vast # 5b2022; #nav ul li a: link, #nav ul li a: visited color: # b99e94; #nav ul li.current_page_item a: link, #nav ul li.current_page_item a: bezocht background: url ("redspace / transred.png") herhalen; kleur: # cdb9b2; #nav ul li a: hover, #nav ul li a: active, #nav ul li a: focus color: # cdb9b2; #content background-colour: # f9f9f3; rand: 1px vast # 5b2022; border-top: geen; .work a: link img, .work a: visited img border: 5px solid # f2e9ea; .work a: hover img, .work a: active img, .work a: focus img border: 5px solid # 8d4846; .work a: link, .work a: visited color: # 333; ul.twitter li.twitter-item background-color: # f6f5ed; border: 1px solid # eae9de; .flickr a: link img, .flickr a: visited img border: 3px solid # f2e9ea; .flickr a: hover img, .flickr a: active img, .flick a: focus img border: 3px solid # 8d4846; .blogpost, .worksearch border-bottom: 1px solid # e8e3c8; h2 a: link, h2 a: visited color: # 333; ul.meta li border-left: 1px solid # e3e8ed; #sidebar ul li # zoekformulier #s background: url ("redspace / search.png") no-repeat right # f6f6ec; rand: 1px vast # E8E3C8; #sidebar ul li # zoekformulier #s: focus border: 1px solid # dad4b6; #sidebar ul li ul background-colour: # f6f6ec; rand: 1px vast # E8E3C8; #sidebar ul li ul li list-style: url ("redspace / bullet.gif"); #sidebar ul li a: link, #sidebar ul li a: visited color: # 333; p.footer color: # 554740; p.footer a: link, p.footer a: visited color: # 554740; border-bottom: 1px gestreept; p.footer a: hover border-bottom: 1px solid; tekstdecoratie: geen; / * Commentaarlijst * / .commentlist li .avatar border: 2px solid # f2e9ea; .commentlist cite a: link, .commentlist cite a: visited color: # 333; .commentlist .commentmetadata a: link: first-child, .commentlist .commentmetadata a: visited: first-child color: # 333; .thread-alt achtergrondkleur: # F6F6EC; .thread-even achtergrondkleur: # F9F9F3; .depth-1 border: 1px solid # E8E3C8; .even, .alt border-left: 1px solid # E8E3C8; input, textarea background-colour: # F6F6EC; rand: 1px vast # E8E3C8; invoer: focus, textarea: focus border: 1px solid # dad4b6; p.wp-caption-text color: # 555; blockquote border-left: 2px solid # e3e8ed; ul.bloglist li a: link, ul.bloglist li a: bezocht color: # 333; ul.bloglist li a: hover, ul.bloglist li a: actief, ul.bloglist li a: focus background-colour: # f2e9ea; Open vanuit het dashboard de pagina Opties voor innovatie en selecteer redspace.css uit de optie 'Kleurenschema' - de pagina heeft het document al gescand / Stijlen / map en vermeldde de .css-bestanden daar.
Klik op toepassen en we zijn klaar!
In deze serie heb je een aantal vaardigheden geleerd die nodig zijn om allerlei soorten sites van stroom te voorzien met het WordPress-systeem! De meeste bestanden van Innovation kunnen opnieuw worden gebruikt voor uw nieuwe projecten om uw ontwikkelingsproces te versnellen.
Download de bronbestanden van dit deel en er is een extra (meer elementair) kleurenschema beschikbaar - SoftLight:
Heb je hulp nodig met Innovation? Wil je je nieuwe kleurenschema's delen? Ga naar danharper.me/innovation/ en klik op de link Forums.
Bedankt voor het lezen en ik hoop echt dat je deze serie nuttig hebt gevonden!
- Dan
Liefdevolle WordPress? Heb meer nodig? Ik heb een snelle samenvatting van een aantal van mijn favoriete WordPress-bronnen verzameld.
In de loop van het boek bouw je DRLE WordPress-thema's, een blog, een portfoliosite en een algemene site met menu's en submenu's. Elk thema demonstreert verschillende aspecten van WordPress-thema's.
Lees verder
U vroeg, en wij reageerden! Vanwege de grote vraag lanceren we een nieuwe videoserie die naast de screencasts "In PHP" zal worden uitgevoerd. We hopen dat deze twee series, die u van achteren hebt bekeken, u in een dynamiet PHP / WordPress-ontwerper veranderen..
Bezoek Series
Thema-ontwikkeling, de codex is duidelijke en goed geschreven documentatie. Komende van de makers van WordPress, kun je niet fout gaan volgens de instructies.
Bezoek Codex
Een video-screencastserie over ontwerpen voor WordPress. Het is een driedelige serie die betrekking heeft op het downloaden en installeren van WordPress op een server helemaal tot een voltooid thema.
Bezoek Series
Uw visuele bron voor alle dingen WordPress.
Bezoek Site
Ik laat je zien hoe je een Wordpress-thema helemaal zelf kunt maken in deze 3 delen van de tutorialseries. Ik zal ingaan op Structuring, ontwerpen in Photoshop, slicen, coderen in volledig css-gebaseerde html en tenslotte wordpress-implementatie.
Bezoek Series
Het is duidelijk, maar als u wat extra WordPress-lezen nodig heeft, bekijk dan de eerdere handleidingen!
Bezoek Site
Het mooie van WordPress is dat het niet beperkt hoe de inhoud wordt weergegeven, maar biedt een 'raamwerk' van manieren om dit te doen. Sterker nog, het is mogelijk om de weergave te veranderen op basis van de inhoud.
Bezoek Tutorial
De flexibiliteit van de WordPress-engine is fenomenaal: u kunt alles publiceren, van een basisblog tot een forum, van een webshowcase tot een zakelijke CMS-site! Hier bekijken we enkele van de geweldige manieren waarop WordPress tot nu toe is gebruikt.
Bezoek artikel
We bekijken hoe een populair premium WordPress-thema de geavanceerde functies van WordPress gebruikt om een sjabloon te maken dat echt duwt waar WordPress in staat is!
Bezoek artikel
WordPress staat bekend om zijn verbazingwekkende verzameling gratis plug-ins. Er is er een voor bijna elke behoefte die u maar kunt bedenken, van het maken van een back-up van uw WordPress-installatie tot het vragen van een kopje koffie of het bestrijden van spam.
Bezoek artikel
Deze tutorial beschrijft de implementatie van een Wordpress-plug-in die helemaal opnieuw begint. De plug-in maakt verbinding met een externe OSCommerce-database en geeft willekeurige producten weer op uw Wordpress-site. Het implementeert ook een configuratiepagina voor het Wordpress-adminpaneel.
Bezoek Tutorial
'WordPress Hacks' behandelt de wereld rondom WordPress, inclusief de nieuwste WordPress-hacks, nieuws, tips, tricks en how-to's van de populaire opensource-blogsoftware.
Bezoek Site
Een nieuwe blog om antwoorden op WordPress-vragen te posten, en snelle maar zeer nuttige recepten over mijn favoriete blogplatform.
Bezoek Site
De eerste stap naar succes is om te beseffen dat welk probleem je ook hebt, iemand anders het eerder heeft gehad. Een eenvoudige Google-zoekopdracht biedt u een oplossing voor de meeste hobbels op de weg die u tegenkomt bij het ontwikkelen voor WordPress.
Bezoek Site
