Innhold
- Hvordan er concrete5 annerledes?
- Starter
- Trinn 1: Installer betong 5
- Trinn 2: Sette opp temastrukturen
- Trinn 3: Sette opp filene
- Trinn 4: Sette opp hoved-HTML
- Trinn 5: Aktiver temaet ditt
- Trinn 6 Legge til innhold
Denne artikkelen dukket først opp i nummer 233 av .net magazine - verdens mest solgte magasin for webdesignere og utviklere.
De fleste designere, utviklere og klienter har en tendens til å lene seg mot de velkjente innholdsstyringssystemene (CMSer) som WordPress eller Joomla, i stedet for å velge en plattform som er fremmed for dem.
Hvordan er concrete5 annerledes?
Med concrete5 er en viktig forskjell at du kan redigere innhold på siden du ser i nettleseren din. Denne funksjonaliteten alene er et verdifullt salgsargument, spesielt for dine mindre kunnskapsrike kunder. Kundene dine vil like å redigere og legge til innhold på nettstedet deres, og glade kunder gir en lønnsom virksomhet.
Men denne brukervennligheten går ikke på kompromiss med funksjonaliteten. Mens det innfødte rammeverket er utrolig kraftig, er det også svært utvidbart. Følgende opplæring viser deg hvordan du kan gjøre HTML-koden om til et fullverdig CMS concrete5-nettsted på kort tid.
Starter
For denne opplæringen vil vi anta at du allerede har bygget nettstedets frontend-sider i HTML og har alt CSS, innhold og bilder klare til bruk. Jo mer du bruker betong5, jo mer kunnskapsrik vil du bli når du konfigurerer all CSS på forhånd for de forskjellige funksjonene den og tilleggene tilbyr. Du må nå opprette en konto og laste ned den nyeste versjonen av concrete5. Vi anbefaler at du registrerer en konto hos concrete5, slik at du kan administrere nettstedene dine gjennom ditt eget prosjektområde. Last opp alle filene dine til serveren din, eller (L) AMP-stakken, og sett opp en ren database. For å finne ut systemkravene for betong5, sjekk her.
Trinn 1: Installer betong 5
Åpne nettleseren din og skriv inn URL-en som nettstedsfilene sitter på. Du vil bli presentert for et installasjonsskjermbilde som viser eventuelle feil eller konfigurasjoner som fortsatt kreves. Hvis du har grønne flått over hele linja, klikker du på Fortsett til installasjonen knapp. På neste skjerm, skriv inn databaseinformasjonen din og opprett et brukernavn og passord. Hvis du ønsker det, kan du installere prøveinnholdet som følger med betong5. Ellers velg tomt sted. Installer betong 5. Når du er installert, svever du over Dashbord på den øverste redigeringslinjen og velg Forleng betong5. Koble nettstedet til kontoen du registrerte.
Trinn 2: Sette opp temastrukturen
concrete5 fungerer ved å bruke temaer og sidetyper (sidemaler). Lag en mappe i temamappen på toppnivå og gi den et navn som er relevant for nettstedet ditt. I dette tilfellet vil vi ringe mappen klarhetslov.
Opprett følgende filer og mapper i denne mappen: beskrivelse.txt, en mappe som heter elementer (inne i dette lager du filene header.php og footer.php), home.php, default.php, en mappe som heter Bilder, høyre_sidebar.php (dette er egentlig din hovedsidesmal), screen.css (din viktigste CSS-fil), thumbnail.png, typography.css (plasser alle fontstilene dine i dette slik at concrete5s redaktør kan hente dem), og til slutt a view.php fil. Designet vårt bruker også en tilpasset skrift, i dette tilfellet Museo. Plasser en mappe som heter skrifttyper inn i temakatalogen og opprett en egen CSS-fil for skriftene dine.
Trinn 3: Sette opp filene
Første redigering beskrivelse.txt. Dette brukes til å vise malnavnet i adminområdet. Vi plasserer normalt klientens navn på første linje og et "nettsted produsert av ..." på andre linje. Lagre filen. Deretter oppretter / åpner du thumbnail.png fil i bildeditoren du velger, og lag en grafikk for temaet ditt. Dette bør settes til 120x90px. Lagre filen. Kopier alle bildene på nettstedet ditt til bildemappen og alle skrifter, hvis noen, til skrifttyper mappe.
Åpne din screen.css fil og kopier og lim inn alle CSS-ene dine, bortsett fra skriftstiler (h1, h2, s tagger og så videre) inn i denne filen. Lagre. Åpne din typography.css fil og kopier og lim inn alle skriftstilene dine i denne filen. Lagre. Hvis du har egendefinerte skrifttyper, kan du åpne / opprette en fil som heter fontface.css og skriv inn de viktigste @fontface-stilene CSS og lenke dem til din skrifttyper mappe. Hvis du ikke bruker @ font-face, kan du lese dokumentasjonen for det valgte systemet.
Åpne de to filene i elementer mappe, header.php og footer.php. Innenfor header.php skriv inn følgende kode:
? php-definert (’C5_EXECUTE’) eller die (_ ("Access Denied.")); ?> var13 ->! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // NO" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> html xmlns = "http://www.w3.org/1999/xhtml"> head> meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8" /> meta name = "robots "content =" index, follow "/> link rel =" stylesheet "media =" screen "type =" text / css "href ="? php echo $ this-> getThemePath ()?> / fontface.css "/> link rel = "stylesheet" media = "screen" type = "text / css" href = "? php echo $ this-> getThemePath ()?> / screen.css" /> link rel = "stylesheet" media = "screen "type =" text / css "href ="? php echo $ this-> getThemePath ()?> / typography.css "/>? php Loader :: element ('header_required'); ?> var13 -> / hode>
For å la CSS-en din koble riktig til temamappen til nettstedet ditt, må du ha ? php echo $ this-> getThemePath ()?> / foran navnet på CSS-filen. Du kan også endre DOCTYPE hvis du trenger det og legge til annen metainformasjon. Ikke legg til en metatittel, beskrivelse eller nøkkelord, men når du gjør dette ved hjelp av concrete5 sideegenskaper en gang logget inn på administratorområdet for nettstedet ditt. Lagre denne filen. Vi kommer tilbake til footer.php fil.
Trinn 4: Sette opp hoved-HTML
Nå tar du HTML-en og gjør den konkret5-klar. For dette må du vite tre typer PHP-koder for å gjøre områder på nettstedet ditt redigerbare. Disse er:
? php $ this-> inc (’elements / your-file.php’); ?> var13 ->
Dette brukes til å inkludere topp- og bunntekstfilene.
? php $ a = new GlobalArea (‘Editable Area Name’); $ a-> display ($ c); ?> var13 ->
Dette brukes til globale områder på nettstedet. For eksempel vil selskapets logo vises på hver side. Bruker GlobalArea tag vil gjøre det mulig å skrive inn innhold en gang, og det vil fylle på hele nettstedet.
? php $ a = new Area (‘Editable Area Name’); $ a-> display ($ c); ?> var13 ->
Dette brukes til redigerbare områder som ikke er globale.
Åpne HTML-siden til startsiden i redaktøren du ønsker. I dette tilfellet bruker vi Dreamweaver. Åpen home.php og lim inn koden fra startsiden din. Slett alle hode> / hode> kode og erstatt med:
? php $ this-> inc (’elements / header.php’); ?> var13 ->
Erstatt alt innhold som kan anses som globalt med ? php $ a = new GlobalArea (‘Editable Area Name’); $ a-> display ($ c); ?> var13 ->. Erstatte Redigerbart område navn med navnet på innholdet du erstatter. For klarhetslovdesignet lager vi logoen, sosiale ikoner, telefonnummer, hovednavigering, tagline, ring til handling-knapp, Twitter-overskrift, Twitter-feed, kontaktskjema, kontaktdetaljer og fem bunntekstkolonner i globale områder. For andre ikke-globale aspekter du vil redigere, erstatt innholdet ditt med ? php $ a = new Area (‘Editable Area Name’); $ a-> display ($ c); ?> var13 ->. Igjen, erstatt Redigerbart område navn med navnet på innholdet. Vi har brukt Intro tekst, Lysbildefremvisning, og Hoved. (betong5 gjenkjenner Hoved som hovedinnholdsområde: vi anbefaler å bruke dette). Lagre filen.
Åpen footer.php ligger i elementer mappe. Innenfor home.php, uthev og klipp ut all bunntekst, men hold slutten / kropp> og / html> koder. Lim dette inn i din footer.php fil. Deretter plasserer vi i kode som viser logget på en knapp brukere kan bruke til å logge på og redigere nettstedet. Skriv inn denne koden i bunnteksten, over et av de redigerbare områdene:
? php $ a = ny GlobalArea (‘Tagline’); $ a-> display ($ c); ?> var13 -> p> ©? php echo date ('Y')?> a href = "? php echo DIR_REL?> /">? php echo SITE?> / a>? php $ u = new User ( ); hvis ($ u-> isRegistered ()) {?> var13 ->? php if (Config :: get ("ENABLE_USER_PROFILES")) {$ userName = 'a href = "'. $ this-> url ('/ profil ').' "> '. $ u-> getUserName (). ’/ A>’; } annet {$ userName = $ u-> getUserName (); }?> var13 -> span>? php echo t ('For øyeblikket pålogget som b>% s / b>.', $ userName)?> a href = "? php echo $ this-> url ('/ login ',' logout ')?> ">? php echo t (' Sign Out ')?> / a> / span>? php} else {?> var13 -> span> a href ="? php echo $ this -> url ('/ login')?> ">? php echo t ('Logg på for å redigere dette nettstedet')?> / a> / span>? php}?> var13 -> / p>
Til slutt skriver du inn følgende kodelinje på slutten av footer.php fil:
? php Loader :: element (’footer_required’); ?> var13 ->
Lagre din footer.php og lukk. Tilbake i home.php, Tast inn:
? php $ this-> inc (’elements / footer.php’); ?> var13 ->
Dette inkluderer din footer.php fil. Lagre. Enten duplisere home.php eller kopier koden og lim inn default.php. Lagre. For undersidene dine kan det hende du har et annet oppsett enn hjemmesiden din, så følg den samme prosessen som i trinn 5. For klarhetsloven bruker vi en mal på hele nettstedet, slik at du enten kan duplisere home.php og gi nytt navn høyre_sidebar.php eller kopier og lim inn koden i denne filen. Lagre. Til slutt, åpne view.php. Denne filen brukes til sider som automatisk genereres av concrete5 som ikke krever en egen tilpasset mal. Dette kan for eksempel brukes til påloggingssiden og siden som ikke ble funnet. Lim inn home.php-koden din i view.php. Enten over eller under ? php $ a = nytt område (’Main’); $ a-> display ($ c); ?> var13 -> PHP-tagg, skriv inn følgende kode:
? php print $ innerContent; ?> var13 ->
Lagre filen. Last opp temakatalogen din til serveren din.
Trinn 5: Aktiver temaet ditt
Besøk hjemmesiden for installasjonen av betong5 og rull over Dashbord på den øverste linjen i nettleservinduet. Klikk på Temaer lenke. Du vil bli presentert med vinduet for valg av tema. Klikk på Installere -knappen ved siden av det nyopprettede temaet. Neste vindu viser filene som skal installeres. Klikk OK. Nå må du aktivere den. Klikk på Tilbake til temaer og deretter på Aktiver -knappen ved siden av temaet ditt. Det vil spørre om du vil aktivere temaet på hele nettstedet. Klikk OK. Det er det. Du har nå forvandlet HTML-en din til et innholdsstyrt nettsted!
Trinn 6 Legge til innhold
Nå kan du legge til innhold på nettstedet ditt. Først begynte jeg å laste opp bildene til nettstedet ditt (som firmalogo og lysbildefremvisning) til betong5. Rull over Dashbord og velg filbehandler. Klikk last opp flere og så Legg til filer i popup-vinduet. Naviger til bildemappen og velg claritylaw-scotland.webp og temp-image01-05.jpeg. Start opplasting. Når du er lastet opp, gå tilbake til hovedfilbehandlervinduet, og du vil se en liste over alle bildene. Klikk avkrysningsruten ved siden av alle temp-bildefilene, og velg i rullegardinmenyen Settene. Klikk Legg til nytt sett og heter dette lysbildefremvisning. Klikk Oppdater.
Hold markøren over dashbordet og velg Stabler. Med stabler kan du bruke blokkeringer flere steder på nettstedet ditt. Fordi vi har tildelt globale områder til HTML-koden vår, bør du se en liste over globale stabler som allerede er på plass. Klikk på Logo stabelen og deretter Legg til blokk. Vi ønsker å legge til innhold, så velg Innholdsblokk. Dette viser en TinyMCE-editor. Klikk Legg til bilde og velg logoen vi lastet opp tidligere. Klikk Legge til. Tilbake i stabellisten, klikk Tagline Stack, og klikk igjen Legg til blokk og velg innholdsblokk. Legg til teksten i redigeringsprogrammet. Du kan velge skriftstiler hvis du ønsker det, men her vil vi beholde det som avsnittstag. Klikk Legge til. Fortsett og legg til resten av innholdet ditt ved hjelp av innholdsblokken, bortsett fra Kontakt skjema, Twitter-feed og Topptekst Nav stabler.
Når alt det globale innholdet er på plass, velger du Topptekst Nav fra stablelisten din. Vi vil legge til Auto Nav blokkere. Herfra har du en rekke alternativer for hvordan du vil at navigasjonen skal vises. Hvis nettstedet ditt har en rullegardinmeny, kan du angi hvor mange nivåer av barnesider du vil vise. Vi bruker standardinnstillingene, så klikk Legge til. Klikk deretter på Twitter-feed stable. Avhengig av hvordan du implementerer Twitter-feedene dine, kan du velge HTML-blokken og legge til feedkoden som genereres av Twitter.
Her bruker vi en av concrete5s gratis tillegg, Tweetcrete. Du kan installere tillegg fra betong5-dashbordet, eller via kontoen din. I stakkelisten din klikker du på Twitter-feed stable og legg til Tweetbetong blokkere. Følg instruksjonene for å autorisere med Twitter-kontoen din, og klikk Legge til. Klikk deretter på Kontakt skjema stable. Velg Skjema blokkere. Legg til feltene du ønsker: her bruker vi Navn, E-post, Telefon, Tjenester og Beskjed. I alternativfanen legger du til e-postadressen du vil at skjemaet skal sendes til, og eventuelle Captcha-filtre du vil ha fra concrete5s tilleggsseksjon. Klikk Legge til.
Klikk på Gå tilbake til nettstedet i øverste redigeringslinje. Du vil se hjemmesiden din begynner å ta form. Det siste er å legge til en lysbildefremvisning. Hold markøren over Redigere og velg Rediger side. En gang i denne modusen vil du se alle områdene som kan redigeres på denne siden, uthevet med en stiplet linje.
Du kan redigere hvilken som helst av blokkene direkte på siden. Redigering av globale områder vil omdirigere deg til den aktuelle bunken. Klikk på Lysbildefremvisning området og velg Legg til blokk og velg deretter Lysbildefremvisning blokkere. Under Type rullegardinmeny, velg Bilder fra filsett. Velg settet vi opprettet tidligere, kalt Lysbildefremvisning. Klikk Legge til. Svev nå over Redigere og velg Publiser side. Bildene trekkes automatisk inn.
Det er det. Du har nå en fullført hjemmeside med innhold på plass. Fordi vi setter opp de globale områdene, blir alt gjentatt innhold automatisk plassert på siden hver gang du legger til en ny side på nettstedet, slik at du bare kan legge til innhold som er spesifikt for den siden.
Oppdag 35 inspirerende eksempler på CSS på søstersiden vår, Creative Bloq.
