Bootstrap voor omzetten van html5/css3 naar wordpress

[LikeAKing]

Hey, ik heb een vraagje,

Ik heb momenteel een website online staan voor school en om een stageplek te vinden (portfolio erop etc) en die is gecodeerd in html5/css3, nu is de vraag. Ik heb overal op internet gezocht om zo'n pagina om te zetten voor wordpress, maar ik heb geen kennis van php. Zou bootstrap hiervoor kunnen werken en is dit moeilijk te doen? Ik ben een totale newb in deze omgeving en heb ook geen idee of mijn topic goed staat maar het valt te proberen.

Heeft er iemand wat tips te delen wat een snelle / valide manier is om zoiets om te zetten. De ene tutorial duurt 10 uur en de andere 20 minuten maar ik weet zo snel niet of dat de tutorials waren die ik zocht. Dus misschien dat bootstrap handig is?

als je je de website wilt zien, zeg het dan even

[dev10]

Met Bootstrap neem ik aan dat je Twitter Bootstrap bedoelt? Bootstrap staat namelijk tot PHP/WordPress zoals appels staan tot peren. Bootstrap is een library waarmee je heel snel een prototype voor een website op kunt zetten en dus niet precies wat jij zoekt.

Als je nu al een website hebt, is het een eitje om deze om te zetten naar PHP als je de handleiding van Wordpress voor het ontwikkelen van een thema bij de hand houdt: http://codex.wordpress.org/Theme_Development

[NMe]

Wat, je denkt op magische wijze je huidige site om te kunnen zetten naar een WP-template zonder daar iets voor hoeven te doen? Ik heb nooit met WP gewerkt maar ik kan me niet voorstellen dat het zo simpel is. Gezien je het hebt over een website "gecodeerd in html5/css3" weet ik niet of je de juiste persoon bent om dit zelf te doen, maar je zou kunnen kijken naar de vele tutorials voor het maken van een WP-theme.

[LikeAKing]

dev10 schreef op maandag 21 januari 2013 @ 10:58:
Met Bootstrap neem ik aan dat je Twitter Bootstrap bedoelt? Bootstrap staat namelijk tot PHP/WordPress zoals appels staan tot peren. Bootstrap is een library waarmee je heel snel een prototype voor een website op kunt zetten en dus niet precies wat jij zoekt.

Als je nu al een website hebt, is het een eitje om deze om te zetten naar PHP als je de handleiding van Wordpress voor het ontwikkelen van een thema bij de hand houdt: http://codex.wordpress.org/Theme_Development

Het ziet er ingewikkeld uit, maar ik zou eens een kijkje nemen

NMe schreef op maandag 21 januari 2013 @ 10:59:
Wat, je denkt op magische wijze je huidige site om te kunnen zetten naar een WP-template zonder daar iets voor hoeven te doen? Ik heb nooit met WP gewerkt maar ik kan me niet voorstellen dat het zo simpel is. Gezien je het hebt over een website "gecodeerd in html5/css3" weet ik niet of je de juiste persoon bent om dit zelf te doen, maar je zou kunnen kijken naar de vele tutorials voor het maken van een WP-theme.

Ik moet het doen voor een school opdracht, maar we moeten het meeste gewoon zelf uitzoeken

[Nedra]

LikeAKing schreef op maandag 21 januari 2013 @ 11:11:
[...]

Het ziet er ingewikkeld uit, maar ik zou eens een kijkje nemen


[...]

Ik moet het doen voor een school opdracht, maar we moeten het meeste gewoon zelf uitzoeken

Nee hoor, zo moeilijk is het niet! kijk er even goed naar en je kan je huidige template zo omzetten naar een wordpress template. Je kan natuurlijk ook een bestaand template ontleden en kijken wat daar allemaal mee gebeurd om zo je eigen template te bouwen.

mbt bootstrap: hier een tutorial om bootstrap direct om te zeten naar een WP theme

http://blog.teamtreehouse...-bootstrap-theme-tutorial

[LikeAKing]

Nedra schreef op maandag 21 januari 2013 @ 11:52:
[...]

Nee hoor, zo moeilijk is het niet! kijk er even goed naar en je kan je huidige template zo omzetten naar een wordpress template. Je kan natuurlijk ook een bestaand template ontleden en kijken wat daar allemaal mee gebeurd om zo je eigen template te bouwen.

mbt bootstrap: hier een tutorial om bootstrap direct om te zeten naar een WP theme

http://blog.teamtreehouse...-bootstrap-theme-tutorial

hmm, misschien is bootstrap toch relevanter voor mij dan ik dacht hoor

[NMe]

Lees dat artikel voor de grap nog eens goed dan.

[LikeAKing]

NMe schreef op maandag 21 januari 2013 @ 12:22:
Lees dat artikel voor de grap nog eens goed dan.

Ah, maar het is een soort foundation toch? Dan heb je dus meestal al basic codes en kan ik mijn html / css daar gewoon in omzetten? Voor mij is dit allemaal wat lastig aangezien ik dus meer een designer ben dan developer. (interactieve vormgeving)

[Barryvdh]

Het was waarschijnlijk alleen mogelijk geweest als je dus je eerste website ook in Bootstrap had gemaakt
Bootstrap is gewoon een front-end framework met wat standaard opmaak/css/componenten, om het makkelijker te maken snel een site te maken.

[LikeAKing]

Barryvdh schreef op maandag 21 januari 2013 @ 13:19:
Het was waarschijnlijk alleen mogelijk geweest als je dus je eerste website ook in Bootstrap had gemaakt
Bootstrap is gewoon een front-end framework met wat standaard opmaak/css/componenten, om het makkelijker te maken snel een site te maken.

Ah ok, dan voeg ik gewoon php codes toe in mijn huidige html/css om hem om te zetten naar een template.

[ Voor 12% gewijzigd door LikeAKing op 21-01-2013 13:49 ]

[TheNephilim]

Ik vind Bootstrap ingewikkelder dan Wordpress

Nee, Bootstrap !== dan Wordpress. Opzich kun je zonder kennis van PHP best een Wordpress thema maken. Alle functies zijn netjes gedocumenteerd en met enig knip en plak werk kom je een heel eind.

Of je dat moet willen, dat weet ik niet. Bootstrap + Wordpress gebruiken als je geen ervaring hebt met beide is (lijkt me iig) erg lastig. Ga dus eerst eens een simpel thema maken in Wordpress alvorens je begint met Bootstrap en Wordpress tegelijk.

[Barryvdh]

Mja, maar voordeel is wel dat als je Bootstrap snapt, je stuk simpeler een basis Bootstrap theme kan aanpassen voor Wordpress/Drupal etc. Maar dat is voor deze discussies niet echt nuttig nog inderdaad

[LikeAKing]

Barryvdh schreef op maandag 21 januari 2013 @ 14:53:
Mja, maar voordeel is wel dat als je Bootstrap snapt, je stuk simpeler een basis Bootstrap theme kan aanpassen voor Wordpress/Drupal etc. Maar dat is voor deze discussies niet echt nuttig nog inderdaad

Nope

@TheNephilim; Het heeft een beetje tijdsnood dus eigenlijk zoek ik de snelste manier

[NMe]

LikeAKing schreef op maandag 21 januari 2013 @ 13:48:
[...]

Ah ok, dan voeg ik gewoon php codes toe in mijn huidige html/css om hem om te zetten naar een template.

Er komt anders doorgaans bar weinig PHP kijken bij het maken van templates. Lees nou die tutorial hierboven even goed door.

Trouwens, we spreken in de devwereld niet over "codes" maar over "code". Daarnaast is HTML geen code, en CSS ook niet: dat zijn respectievelijk markup en styling.

[Nedra]

De snelste manier? Pak een relatief simpel bestaand template (bijv twentytwelve die vol met 'best-practices' van WP zit). Ontleed het en pas het aan. Het is in principe niet zo moeilijk, je hebt nog steeds je HTML en CSS, alleen komt daar nu een paar functies bij. Die zijn uiteraard PHP, maar zijn bijna allemaal al voor je geschreven! Het enige wat jij hoeft te doen is de functie aanroepen op de juiste plek.

Ik heb zelf overigens heel veel geleerd van dit template van automattic - http://wordpress.org/extend/themes/toolbox. Het is erg duidelijk, goed gedocumenteerd, veel comments. Probeer die eens om te bouwen naar wat jij wilt hebben, gegarandeerd dat je een hele hoop leert over WP

[Grijze Vos]

NMe schreef op maandag 21 januari 2013 @ 15:22:
[...]
Daarnaast is HTML geen code, en CSS ook niet: dat zijn respectievelijk markup en styling.

vandale.nl:
1. verzameling van overeengekomen woorden en tekens met een afgesproken betekenis

Html is ook gewoon code hoor. Instructies voor een layout algoritme, tegenover instructies voor een <Foo> compiler/interpreter.

[LikeAKing]

Nedra schreef op maandag 21 januari 2013 @ 15:28:
De snelste manier? Pak een relatief simpel bestaand template (bijv twentytwelve die vol met 'best-practices' van WP zit). Ontleed het en pas het aan. Het is in principe niet zo moeilijk, je hebt nog steeds je HTML en CSS, alleen komt daar nu een paar functies bij. Die zijn uiteraard PHP, maar zijn bijna allemaal al voor je geschreven! Het enige wat jij hoeft te doen is de functie aanroepen op de juiste plek.

Ik heb zelf overigens heel veel geleerd van dit template van automattic - http://wordpress.org/extend/themes/toolbox. Het is erg duidelijk, goed gedocumenteerd, veel comments. Probeer die eens om te bouwen naar wat jij wilt hebben, gegarandeerd dat je een hele hoop leert over WP

Danku, dan maar even wordpress hier installeren op mijn desktop.

[ Voor 4% gewijzigd door LikeAKing op 21-01-2013 16:29 ]

[Nedra]

LikeAKing schreef op maandag 21 januari 2013 @ 16:29:
[...]

Danku, dan maar even wordpress hier installeren op mijn desktop.

realiseer je wel dat je lokaal een server heb moeten draaien (stokoud, maar relevant: http://webdesignerwall.co...talling-wordpress-locally)

[LikeAKing]

Yes sir, ik weet hoe dat werkt
Ik ben alleen een no-no in Mysql, javascript, php stuff over het algemeen,

edit:
http://www.developerdrive...e-into-a-wordpress-theme/

heb dit gevonden. Dit begrijp ik allemaal wel, als het goed is is dit ook alles. Of niet

[ Voor 100% gewijzigd door LikeAKing op 22-01-2013 16:57 ]

[LikeAKing]

Ik wou jullie even laten weten dat het allemaal niet is gelukt. Mijn windows heeft problemen met xampp en wampserver en de php codes lukken allemaal niet. Iemand die in staat is mij iets persoonlijker te helpen? (evt zelfs in een privé bericht ofzo )

[ Voor 4% gewijzigd door LikeAKing op 24-01-2013 16:51 ]

[frG]

Ik kan je WebMatrix 2 aanraden, dit werkt erg makkelijk...

Je kan kiezen uit een app van de gallery en kiest dan voor WordPress, rest gaat eigenlijk vanzelf...

[LikeAKing]

frG schreef op donderdag 24 januari 2013 @ 17:01:
Ik kan je WebMatrix 2 aanraden, dit werkt erg makkelijk...

Je kan kiezen uit een app van de gallery en kiest dan voor WordPress, rest gaat eigenlijk vanzelf...

Bedankt, zal er even naar kijken. Dan leer ik het later allemaal wel.

[merauder]

Voor het Wordpress verhaal.

http://themeshaper.com/20...hemes-templates-tutorial/

Een aardige tutorial die je een hele template van scratch laat maken. Het doorlopen geeft inzicht in welke onderdelen Wordpress globaal heeft, en hoe je het e.e.a. aanpakt.

[LikeAKing]

merauder schreef op donderdag 24 januari 2013 @ 19:14:
Voor het Wordpress verhaal.

http://themeshaper.com/20...hemes-templates-tutorial/

Een aardige tutorial die je een hele template van scratch laat maken. Het doorlopen geeft inzicht in welke onderdelen Wordpress globaal heeft, en hoe je het e.e.a. aanpakt.

Hey bedankt, snel doorgenomen, ziet er begrijpelijk uit

Over webmatrix2;
The specified password for user account 'root' is not valid, or failed to connect to the database server.

Get more information online: http://go.microsoft.com/fwlink/?LinkId=245971

Ik ben niet zo goed qua mysql dingetjes enzo, maar ik heb de hele tijd al problemen met mysql en het aanzetten van de apache op xampp etc. En dat soort dingen. Geen idee wat ik heb lopen doen, maar ik heb geen idee hoe ik ergens op inlog en al die dingen aan krijg. Apache bleek niet te werken met C:\xampp ofzo. of in elk geval wat conflicten

[merauder]

Als ik het goed heb, moet je in XAMPP zonder wachtwoord in MySQL kunnen inloggen. Als dat niet werkt raad ik aan om alles (Dus XAMPP, WebMatrix) te verwijderen, je computer opnieuw op te starten en kijken of MySQL en Apache ook echt verwijderd zijn.

Xampp is overigens een Webserver. Je hebt een map, zo uit het hoofd C:\XAMPP\htDocs, oftewel je document root waar je de PHP en HTML bestanden neerzet. Je kan kijken of hij het doet door een browser te openen en naar http://localhost , of http://localhost:8080 te gaan.

Als je nog niet veel van Apache begrijpt, raad ik af om in de configuratiebestanden te gaan hakken.

[LikeAKing]

merauder schreef op vrijdag 25 januari 2013 @ 19:35:
Als ik het goed heb, moet je in XAMPP zonder wachtwoord in MySQL kunnen inloggen. Als dat niet werkt raad ik aan om alles (Dus XAMPP, WebMatrix) te verwijderen, je computer opnieuw op te starten en kijken of MySQL en Apache ook echt verwijderd zijn.

Xampp is overigens een Webserver. Je hebt een map, zo uit het hoofd C:\XAMPP\htDocs, oftewel je document root waar je de PHP en HTML bestanden neerzet. Je kan kijken of hij het doet door een browser te openen en naar http://localhost , of http://localhost:8080 te gaan.

Als je nog niet veel van Apache begrijpt, raad ik af om in de configuratiebestanden te gaan hakken.

Bedankt zal het even proberen. Geen verstand van apache inderdaad, dus ik zal het alleen gebruiken voor een wordpress login.

[w.l]

Als alternatief voor XAMPP kan je evt ook Usbwebserver uitproberen. Hoef je niets te installeren. Gewoon de executable runnen en alle services starten. http://www.usbwebserver.net/nl/

Neemt niet weg dat je ook voor Usbwebserver wachtwoorden moet invullen.

[Ventieldopje]

Het klinkt hier meer alsof een Amish een automonteur wil worden ... begin bij het begin en ga eens onderzoeken hoe de standaard meegeleverde thema's van Wordpress in elkaar zitten en hoe je lokaal een webservertje aan het draaien krijgt.

Xampp/Wamp/Zend Server CE zijn pretty much installeren en draaien. Thema's zitten heel simpel in elkaar en op de codex van Wordpress is een duidelijk schematisch overzicht te vinden voor welk template bestand wanneer aan wordt geroepen en waarom etc.

http://codex.wordpress.org/Template_Hierarchy

Begin dus bij het begin, kijk eens hoe een meegeleverd thema als TwentyTwelve in elkaar steekt. Weet zeker dat je dan binnen no-time door hebt hoe je je html5/css3 pagina om kan zetten naar een template.

[Wary87]

Dat is mogelijk maar gaat niet vanzelf. Ik werk zelf veel met Bootstrap gecombineerd met Wordpress (als front-end developer). Wat ik zelf heb gedaan is een lokaal sandbox theme gemaakt lokaal waarbij ik eerst een Bootrap onderdelen helemaal in orde heb gemaakt en daarna een custom Wordpress template gemaakt. Dat is een kwestie van dynamische onderdelen koppelen, de theme in stukken hakken: header.php, footer.php, sidebar.php etc en natuurlijk de goede loop op verschillende pagina's meenemen. Ik begon met 0 PHP ervaring en had het binnen een maand onder de knie. Het kost wel wat tijd en uitzoekwerk maar heb wel al jarenlang ervaring met HTML, CSS, Javascript etc..

[Anoniem: 483123]

Wary87 schreef op zondag 27 januari 2013 @ 15:23:
Dat is mogelijk maar gaat niet vanzelf. Ik werk zelf veel met Bootstrap gecombineerd met Wordpress (als front-end developer). Wat ik zelf heb gedaan is een lokaal sandbox theme gemaakt lokaal waarbij ik eerst een Bootrap onderdelen helemaal in orde heb gemaakt en daarna een custom Wordpress template gemaakt. Dat is een kwestie van dynamische onderdelen koppelen, de theme in stukken hakken: header.php, footer.php, sidebar.php etc en natuurlijk de goede loop op verschillende pagina's meenemen. Ik begon met 0 PHP ervaring en had het binnen een maand onder de knie. Het kost wel wat tijd en uitzoekwerk maar heb wel al jarenlang ervaring met HTML, CSS, Javascript etc..

Zo aan je verhaal te lezen zou een beginneling in de code wereld eigenlijk ook met deze combinatie een "decent" website kunnen neerzetten binnen ... een paar maanden? Of moet men toch vele jaren html/css ervaring hebben hiervoor?

[LikeAKing]

Anoniem: 483123 schreef op zondag 27 januari 2013 @ 21:05:
[...]


Zo aan je verhaal te lezen zou een beginneling in de code wereld eigenlijk ook met deze combinatie een "decent" website kunnen neerzetten binnen ... een paar maanden? Of moet men toch vele jaren html/css ervaring hebben hiervoor?

Als je html/css onder de knie hebt dan kun je al wel heel wat hoor.

[LikeAKing]

Ik zit hele tutorials door te lezen, lukt het nog steeds niet

Beschadigde thema's

De volgende thema's zijn geïnstalleerd, maar incompleet. Thema's moeten een stylesheet en een template bevatten.

Naam Beschrijving
template1 Template ontbreekt.

Wat doe ik verkeerd? Ik weet dat mijn website geen comments, sidebar.php enzo nodig heeft en mijn <footer> zit in mijn content divje.

[Nedra]

LikeAKing schreef op maandag 28 januari 2013 @ 15:19:
Ik zit hele tutorials door te lezen, lukt het nog steeds niet

Beschadigde thema's

De volgende thema's zijn geïnstalleerd, maar incompleet. Thema's moeten een stylesheet en een template bevatten.

Naam Beschrijving
template1 Template ontbreekt.

Wat doe ik verkeerd? Ik weet dat mijn website geen comments, sidebar.php enzo nodig heeft en mijn <footer> zit in mijn content divje.

Wat heb je op dit moment aangemaakt? In principe kan je een wordpress thema maken met uitsluitend een index.php en een style.css. Ze moeten wel beiden in de root van de template directory staan. Je style.css moet wat info over het template bevatten zoals hier bij het twentytwelve theme:

code:

/*
Theme Name: Twenty Twelve
Theme URI: http://wordpress.org/extend/themes/twentytwelve
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, gray, white, one-column, two-columns, right-sidebar, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: twentytwelve

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

[Wary87]

Anoniem: 483123 schreef op zondag 27 januari 2013 @ 21:05:
[...]


Zo aan je verhaal te lezen zou een beginneling in de code wereld eigenlijk ook met deze combinatie een "decent" website kunnen neerzetten binnen ... een paar maanden? Of moet men toch vele jaren html/css ervaring hebben hiervoor?

Bootstrap framework moet je wel HTML en CSS kennis voor in huis hebben maar het is niet heel moeilijk. Het zit heel logisch en goed in elkaar waarbij belangrijke elementen zoals: responsive, LESS, veel goede javascript elementen zoals de carrousel slider, tooltip, collapse, dropdown al in verwerkt zitten. En er zit een goede handleiding bij net als bij Wordpress.

Beste is zoals iemand anders al zei om te beginnen met een index.php en style.css zodat je al de zooi van twentytwelve niet mee krijgt en dan stuk voor stuk je bootstrap html template omzet naar PHP. Zo leer je ook het beste en kan je gebruik maken van snippets uit twentytwelve en forums etc..

[LikeAKing]

Nedra schreef op maandag 28 januari 2013 @ 17:18:
[...]

Wat heb je op dit moment aangemaakt? In principe kan je een wordpress thema maken met uitsluitend een index.php en een style.css. Ze moeten wel beiden in de root van de template directory staan. Je style.css moet wat info over het template bevatten zoals hier bij het twentytwelve theme:

code:

/*
Theme Name: Twenty Twelve
Theme URI: http://wordpress.org/extend/themes/twentytwelve
Author: the WordPress team
Author URI: http://wordpress.org/
Description: The 2012 theme for WordPress is a fully responsive theme that looks great on any device. Features include a front page template with its own widgets, an optional display font, styling for post formats on both index and single views, and an optional no-sidebar page template. Make it yours with a custom menu, header image, and background.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, gray, white, one-column, two-columns, right-sidebar, flexible-width, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready
Text Domain: twentytwelve

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Dat had ik, het probleem was dat ik de css in een mapje had staan, alles uit het mapje gehaald etc en gelinked. verder heb ik deze tutorial gevolgd:
http://thethemefoundry.com/blog/html-wordpress/

heel simpel. 10 minuten maar als ik hem test in wordpress heb ik helemaal geen css!

Als ik die sandbox theme download en alles erin pleur werkt mijn website wel gewoon, behalve dan dat er ontzettend veel crap tussen staat. Maar vanuit scratch zeg maar werkt de css op een één of andere manier niet

edit: Ik zit hier en daar te klooien, ik kom al stappen dichterbij. Maar nu heb ik de css voor elkaar, alle images in de css werken, maar de image in de html werkt niet (logo). Hoe verhelp ik dit?

[ Voor 4% gewijzigd door LikeAKing op 29-01-2013 12:30 ]

[Nedra]

Heb je wel naar je CSS gelinked in de header van de index of in de index.php? als je de bron bekijkt van wat jij gemaakt hebt, kan je dan een link naar de CSS vinden? Als je de CSS even inline plaatst, werkt het dan wel?

[LikeAKing]

Nedra schreef op dinsdag 29 januari 2013 @ 12:29:
Heb je wel naar je CSS gelinked in de header van de index of in de index.php? als je de bron bekijkt van wat jij gemaakt hebt, kan je dan een link naar de CSS vinden? Als je de CSS even inline plaatst, werkt het dan wel?

css is gelukt, nu heb ik nog maar 3 echte probleempjes Even uitgewerkt via paint.


Ik mis de user interface en de logo op mijn website ( logo geplaastst in de html ) en dat is de enigste image die ik in de html heb staan, maar hij linkt niet . Verder mist de hele user interface.

verder heb ik dit:


Ik wil dit wat gecentreerd hebben. Het ziet er verder ook niet echt mooi uit, maar dit staat binnen mijn div, maar ik kan het niet echt "stylen" zeg maar, het ziet er simpel maar onnozel uit en dat het links staat is ook niet zo mooi. Hoe verhelp ik dit op zijn minst naar gecentreerd?

[Nedra]

Je Wordpress toolbar is er waarschijnlijk niet omdat je er geen wp footer hook in hebt. Plaats dit eens voor je sluitende </body> tag: <?php wp_footer(); ?>

Je logo is waarschijnlijk niet goed gelinkt. Als je de link naar de afbeelding kopieert, wat is dat dan? Je kan gemakkelijk het pad naar je template opvragen met get_template_directory_uri(), dus zoiets.

code:

<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="logo"/></a>

Met betreft CSS zeg ik, veel lezen en veel leren!

[LikeAKing]

Nedra schreef op dinsdag 29 januari 2013 @ 12:58:
Je Wordpress toolbar is er waarschijnlijk niet omdat je er geen wp footer hook in hebt. Plaats dit eens voor je sluitende </body> tag: <?php wp_footer(); ?>

Je logo is waarschijnlijk niet goed gelinkt. Als je de link naar de afbeelding kopieert, wat is dat dan? Je kan gemakkelijk het pad naar je template opvragen met get_template_directory_uri(), dus zoiets.

code:

<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" alt="logo"/></a>

Met betreft CSS zeg ik, veel lezen en veel leren!

Css snap ik in principe wel hoor, maar natuurlijk valt er nog veel te leren.
Zal het even proberen zo, ik laat het nog weten

edit: het is gelukt! het was inderdaad een andere path die ik moest nemen, geen idee dat dit dus in php moest. Nu alleen nog de editable content boxjes centreren.

[ Voor 9% gewijzigd door LikeAKing op 29-01-2013 13:24 ]

[Nedra]

Nouja dat hoeft dus niet in php, maar dat maakt het leven wel makkelijker. de 'get_template_direcotry' function is één van de vele functies die het leven makkelijker maakt. In plaats van een volledig pad neer te zetten (site.com/wp-content/themes/myfirsttheme/images/image.jpg) gebruik je dus zoiets. Op die manier zorg je ook gelijk dat je de paden niet hoeft te veranderen wanneer je je template / website migreert. succes!

[Wary87]

Je moet altijd een styles.css hebben. Deze zet je ook altijd als aller laatste stylesheet zodat het altijd je eerste stylesheets overwrite.

Bootstrap hoef je niet over te kopieren in je styles.css ik roep het altijd zo aan:
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/assets/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/assets/css/bootstrap-responsive.min.css" type="text/css" />

Ik deze bestanden moet je ook geen aanpassingen maken want die ben je kwijt als je een nieuwe versie van bootstrap inlaad. Dus daar komt de style.css van pas om per thema de tweaks in het design te maken.

Vergeet ook geen <?php wp_head(); ?> en <?php wp_footer(); ?> aan te roepen anders werken je plugins niet goed. Het meeste spreekt voor zich je moet wel even de Wordpress docs goed doorlezen om te snappen welke codes je nodig hebt en waar je deze moet neerzetten. Als dit allemaal goed staat in de bootstrap template heb je een mooie 1.0 sandbox waarvanuit je websites kan gaan maken en verder kan ontwikkelen.

[LikeAKing]

Wary87 schreef op dinsdag 29 januari 2013 @ 17:19:
Je moet altijd een styles.css hebben. Deze zet je ook altijd als aller laatste stylesheet zodat het altijd je eerste stylesheets overwrite.

Bootstrap hoef je niet over te kopieren in je styles.css ik roep het altijd zo aan:
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/assets/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/assets/css/bootstrap-responsive.min.css" type="text/css" />

Ik deze bestanden moet je ook geen aanpassingen maken want die ben je kwijt als je een nieuwe versie van bootstrap inlaad. Dus daar komt de style.css van pas om per thema de tweaks in het design te maken.

Vergeet ook geen <?php wp_head(); ?> en <?php wp_footer(); ?> aan te roepen anders werken je plugins niet goed. Het meeste spreekt voor zich je moet wel even de Wordpress docs goed doorlezen om te snappen welke codes je nodig hebt en waar je deze moet neerzetten. Als dit allemaal goed staat in de bootstrap template heb je een mooie 1.0 sandbox waarvanuit je websites kan gaan maken en verder kan ontwikkelen.

Bedankt, ik zal dit even onthouden of evt noteren voor in de toekomst. wp head heb ik niet, maar de wp footer heb ik wel. Zelf is deze opdracht qua widgets niet belangrijk en ging het meer om het inladen van de template op je homepage en dat je een beetje inzicht van wordpress zelf krijgt.
Ik heb alleen een standaard: HOME ABOUT CONTACT pagina etc, maar hoe laad ik die in? Krijg ik dan een index2.php ofzo?

[Nedra]

In principe kan je alles met de index.php laden, maar da's natuurlijk niet aan te raden. Voor pagina's kan je bijv. één page.php aanmaken. Je kan ook voor elke pagina een apart template maken. Maak het zo moeilijk of makkelijk als je zelf wilt .

Dit is een mooie cheatsheet om te zien welke pagina's gebruiken van welke templates: http://codex.wordpress.org/Template_Hierarchy

[LikeAKing]

Nedra schreef op woensdag 30 januari 2013 @ 11:56:
In principe kan je alles met de index.php laden, maar da's natuurlijk niet aan te raden. Voor pagina's kan je bijv. één page.php aanmaken. Je kan ook voor elke pagina een apart template maken. Maak het zo moeilijk of makkelijk als je zelf wilt .

Dit is een mooie cheatsheet om te zien welke pagina's gebruiken van welke templates: http://codex.wordpress.org/Template_Hierarchy

Ze hebben dezelfde layout alleen wat andere content, maar als ik een nieuwe pagina maak zie ik hem nergens op mijn pagina staan, behalve de hyperlink dan.

[LikeAKing]

Kleine dubbelpost en een bumpje haha, ik kan een pagina maken, maar die werkt alleen als ik op bekijken klik na het publiceren, maar die komt niet op mijn index zeg maar tevoorschijn, hoe?

Verder kon ik nergens iets duidelijks vinden over page.php en uberhaupt hoe ik mijn "over mij" pagina die normaal gesproken about.html is, hoe ik die in about.php krijg als een lokale hyperlink, ik heb gewoon een .php bestand gemaakt met getheader, e.d. erin, maar dat blijkt ook niet te werken. Is hier een speciale path voor? Er was geen duidelijke overview van pages.php, behalve van wordpress zelf, maar daar was geen tutorial.

In principe waren dit mijn laatste vragen over wordpress, en zal ik zoveel mogelijk blijven oefenen en mijzelf hierin verbeteren uiteraard. Het is zeker leuk om te designen > html/css en daarna om te zetten naar wordpress of elk ander cms systeem. Alleen lastig om door het leerproces even heen te komen. Het kan soms nog eens ietwat tricky zijn.

[Nedra]

LikeAKing schreef op woensdag 30 januari 2013 @ 18:34:
Kleine dubbelpost en een bumpje haha, ik kan een pagina maken, maar die werkt alleen als ik op bekijken klik na het publiceren, maar die komt niet op mijn index zeg maar tevoorschijn, hoe?

Verder kon ik nergens iets duidelijks vinden over page.php en uberhaupt hoe ik mijn "over mij" pagina die normaal gesproken about.html is, hoe ik die in about.php krijg als een lokale hyperlink, ik heb gewoon een .php bestand gemaakt met getheader, e.d. erin, maar dat blijkt ook niet te werken. Is hier een speciale path voor? Er was geen duidelijke overview van pages.php, behalve van wordpress zelf, maar daar was geen tutorial.

In principe waren dit mijn laatste vragen over wordpress, en zal ik zoveel mogelijk blijven oefenen en mijzelf hierin verbeteren uiteraard. Het is zeker leuk om te designen > html/css en daarna om te zetten naar wordpress of elk ander cms systeem. Alleen lastig om door het leerproces even heen te komen. Het kan soms nog eens ietwat tricky zijn.

Er verschijnt sowieso niets op jouw index als jij niet aangeeft dat het er moet verschijnen. Om een menu te maken zal je een menu moeten aanmaken binnen worpdress en de wp_nav_menu() functie moeten aanroepen: http://codex.wordpress.org/Function_Reference/wp_nav_menu (of een andere functie creeeren die alle top-level pagina's als menu neerzet)

Wat betreft pagina's, je zou in ieder geval een standaard page template moeten maken (strict gezien hoeft 't niet, maar 't is verstandig) genaamd page.php. In die page.php moet er dan wel gechecked worden voor posts. Voorbeeld:

code:

<div id="primary">
    <?php while ( have_posts() ) : the_post(); ?>   

    <article>                   
         <h2><?php the_title();?></h2>
         <p><?php the_content();?></h2>
    </article>

    <?php endwhile; // end of the loop. ?>

</div><!-- #primary -->

Dat gaat dan uiteraard tussen je header en footer in. Als je gebruik maakt van get_header() en get_footer() (niet te verwarren met wp_head en wp_footer) moet je ook wel een header.php en footer.php hebben.
Om specifieke pagina's aan specifieke templates te koppelen kan je een pagina aanmaken die page-{slug}.php heet. In het geval van een pagina die de slug 'about' heeft (valt te zien in het back-end) kan je de pagina page-about.php noemen. Die 'override' dan de page.php (zoals te zien in het template hierarchy cheatsheet wat ik hiervoor plaatste). Je kan ook één template voor meerdere pagina's gebruiken door bovenaan, nog voor de header call zoiets te plaatsen:

code:

<?php
/**
 * Template Name: Full-width, no sidebar
 * Description: A full-width template with no sidebar
 *
 * 
 */

get_header(); ?>

Ik hoop dat dit je weer een beetje op weg helpt. Voor de rest begrijp ik dat het even lastig is om alles te bevatten, maar dat wordt ter zijner tijd echt wel makkelijker. Wat ik je vooral wil adviseren is het standaard twentytwelve theme compleet te ontleden. Het zit vol met 'best practices' voor zowel wordpress als css en html en er staat overal duidelijk commentaar bij wat het doet. Al weet je iets niet kan je het altijd googlen, maar het beste helpt aanpassen of verwijderen en kijken wat het doet.

[LikeAKing]

Ik denk dat ik het even een 3e keer moet lezen voordat ik alles begrijp, maar ik heb er zeker wat aan, haha!
Danku, ik zal het even uitvogelen