Innehåll
- Hur är betong5 annorlunda?
- Komma igång
- Steg 1: Installera betong5
- Steg 2: Ställa in din temastruktur
- Steg 3: Ställa in filerna
- Steg 4: Ställa in huvud-HTML
- Steg 5: Aktivera ditt tema
- Steg 6 Lägga till innehåll
Den här artikeln publicerades först i nummer 233 av tidningen .net - världens bästsäljande tidning för webbdesigners och utvecklare.
De flesta designers, utvecklare och kunder tenderar att luta sig mot de välkända innehållshanteringssystemen (CMS) som WordPress eller Joomla, snarare än att välja en plattform som är främmande för dem.
Hur är betong5 annorlunda?
Med concrete5 är en viktig skillnad att du kan redigera innehåll på sidan du visar i din webbläsare. Denna funktion ensam är en värdefull försäljningsargument, särskilt för dina mindre internetkunniga kunder. Dina kunder kommer att tycka om att redigera och lägga till innehåll till sin webbplats, och nöjda kunder gör ett lönsamt företag.
Men denna användarvänlighet äventyrar inte funktionaliteten. Även om det inhemska ramverket är otroligt kraftfullt, är det också mycket utdragbart. Följande handledning visar hur du kan förvandla din HTML-kod till en fullfjädrad CMS concrete5-webbplats på kort tid.
Komma igång
För den här självstudien kommer vi att anta att du redan har byggt webbplatsens frontend-sidor i HTML och har allt CSS, innehåll och bilder redo att gå. Ju mer du använder betong5 desto smartare blir du när du konfigurerar alla CSS i förväg för de olika funktionerna och dess tillägg erbjuder. Du måste nu skapa ett konto och ladda ner den senaste versionen av concrete5. Vi rekommenderar att du registrerar ett konto hos concrete5 så att du kan hantera dina webbplatser via ditt eget projektområde. Ladda upp alla dina filer till din server eller (L) AMP-stack och skapa en ren databas. För att ta reda på systemkraven för betong5, se här.
Steg 1: Installera betong5
Öppna din webbläsare och ange webbadressen som webbplatsfilerna för närvarande sitter på. Du får en installationsskärm som visar eventuella fel eller konfigurationer som fortfarande krävs. Om du har gröna fästingar över hela linjen klickar du på Fortsätt till installationen knapp. På nästa skärm anger du din databasinformation och skapar ett användarnamn och lösenord. Om du vill kan du installera provinnehållet som medföljer betong5. Välj annars tom webbplats. Installera betong5. När du är installerad, sväva över instrumentbräda på den övre redigeringsfältet och välj Förläng betong5. Anslut webbplatsen till det konto du registrerade.
Steg 2: Ställa in din temastruktur
concrete5 fungerar med teman och sidtyper (sidmallar). Skapa en mapp i temamappen på högsta nivå och ge den ett namn som är relevant för din webbplats. I det här fallet kommer vi att ringa till mappen tydlighet_lag.
Skapa följande filer och mappar i den här mappen: description.txt, en mapp som heter element (inuti detta skapar du filerna header.php och footer.php), home.php, default.php, en mapp som heter bilder, right_sidebar.php (det här är i huvudsak din huvudsidesmall), screen.css (din huvudsakliga CSS-fil), thumbnail.png, typography.css (placera alla dina typsnitt i detta så att concrete5: s redaktör kan plocka upp dem) och slutligen en view.php fil. Vår design använder också ett anpassat teckensnitt, i detta fall Museo. Placera en mapp som heter teckensnitt in i temakatalogen och skapa en separat CSS-fil för dina teckensnitt.
Steg 3: Ställa in filerna
Första redigeringen description.txt. Detta används för att visa mallnamnet inom adminområdet. Vi placerar normalt kundens namn på första raden och en ”webbplats producerad av ...” på andra raden. Spara filen. Nästa skapa / öppna thumbnail.png fil i bildredigeraren efter eget val och skapa en grafik för ditt tema. Detta bör ställas in på 120x90px. Spara din fil. Kopiera alla dina webbplatsbilder till bildmappen och alla teckensnitt, om några, till teckensnitt mapp.
Öppna din screen.css fil och kopiera och klistra in alla dina CSS, förutom teckensnittsformaten (h1, h2, sid taggar och så vidare) i den här filen. Spara. Öppna din typography.css fil och kopiera och klistra in alla dina typsnitt i den här filen. Spara. Om du har anpassade teckensnitt, öppna / skapa en fil som heter fontface.css och ange de viktigaste @fontface-stilarna CSS och länka dem till din teckensnitt mapp. Om du inte använder @ font-face läs dokumentationen för ditt valda system.
Öppna de två filerna i element mapp, header.php och footer.php. Inom header.php ange följande kod:
? php definierad (’C5_EXECUTE’) eller die (_ ("Access nekad.")); ?> var13 ->! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "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 "/> länk rel =" stylesheet "media =" screen "typ =" text / css "href ="? php echo $ this-> getThemePath ()?> / fontface.css "/> länk rel = "stylesheet" media = "skärm" typ = "text / css" href = "? php echo $ this-> getThemePath ()?> / screen.css" /> länk rel = "stylesheet" media = "skärm "type =" text / css "href ="? php echo $ this-> getThemePath ()?> / typography.css "/>? php Loader :: element ('header_required'); ?> var13 -> / head>
För att låta din CSS länka ordentligt till webbplatsens temamapp måste du ha ? php echo $ this-> getThemePath ()?> / före namnet på din CSS-fil. Du kan också ändra DOCTYPE om du behöver och lägga till annan metainformation. Lägg inte till en metatitel, beskrivning eller nyckelord, eftersom du gör det med concrete5 sidegenskaper en gång loggat in på webbplatsens administratörsområde. Spara den här filen. Vi kommer tillbaka till footer.php fil.
Steg 4: Ställa in huvud-HTML
Ta nu din HTML och gör den konkret5-redo. För detta måste du känna till tre typer av PHP-taggar för att göra områden på din webbplats redigerbara. Dessa är:
? php $ this-> inc (’elements / your-file.php’); ?> var13 ->
Detta används för att inkludera sid- och sidfilerna.
? php $ a = new GlobalArea ('Editable Area Name'); $ a-> display ($ c); ?> var13 ->
Detta används för globala områden på webbplatsen. Till exempel kommer företagets logotyp att visas på alla sidor. Använda GlobalArea -taggen gör att du kan ange innehåll en gång och det kommer att fyllas på hela webbplatsen.
? php $ a = new Area (‘Editable Area Name’); $ a-> display ($ c); ?> var13 ->
Detta används för redigerbara områden som inte är globala.
Öppna HTML-hemsidan i din redaktör. I det här fallet använder vi Dreamweaver. Öppna home.php och klistra in koden från din startsida. Ta bort alla huvud> / huvud> kod och ersätt med:
? php $ this-> inc (’elements / header.php’); ?> var13 ->
Ersätt allt innehåll som skulle anses globalt med ? php $ a = new GlobalArea ('Editable Area Name'); $ a-> display ($ c); ?> var13 ->. Byta ut Redigerbart områdesnamn med namnet på det innehåll du ersätter. För Clarity Law-designen skapar vi logotypen, sociala ikoner, telefonnummer, huvudnavigering, tagline, uppmaningsknapp, Twitter-rubrik, Twitter-flöde, kontaktformulär, kontaktinformation och fem sidkolumner i globala områden. För andra icke-globala aspekter du vill redigera, ersätt ditt innehåll med ? php $ a = nytt område ('Redigerbart områdesnamn'); $ a-> display ($ c); ?> var13 ->. Återigen, byt ut Redigerbart områdesnamn med namnet på innehållet. Vi har använt Introtext, Bildspeloch Main. (betong5 känner igen Main som huvudinnehållsområde: vi rekommenderar att du använder detta). Spara din fil.
Öppna footer.php ligger i element mapp. Inom home.php, markera och klipp ut all sidkod, men behåll slutet / kropp> och / html> taggar. Klistra in detta i din footer.php fil. Därefter placerar vi i kod som visar tecknet på en knapp som användarna kan använda för att logga in och redigera webbplatsen. Ange den här koden i sidfoten ovanför ett av de redigerbara områdena:
? php $ a = new 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 ( ); if ($ u-> isRegistered ()) {?> var13 ->? php if (Config :: get ("ENABLE_USER_PROFILES")) {$ userName = 'a href = "'. $ this-> url ('/ profil ').' "> '. $ u-> getUserName (). ’/ A>’; } annat {$ userName = $ u-> getUserName (); }?> var13 -> span>? php echo t ('Inloggad för närvarande 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 ('Logga in för att redigera den här webbplatsen')?> / a> / span>? php}?> var13 -> / p>
Slutligen anger du följande kodrad i slutet av footer.php fil:
? php Loader :: element (’footer_required’); ?> var13 ->
Spara din footer.php och stäng. Tillbaka in home.php, stiga på:
? php $ this-> inc (’elements / footer.php’); ?> var13 ->
Detta inkluderar din footer.php fil. Spara. Antingen duplicera home.php eller kopiera koden och klistra in default.php. Spara. För dina undersidor kan du ha en annan layout till din startsida, så följ samma process som i steg 5. För Clarity Law använder vi en mall över hela webbplatsen, så att du kan antingen duplicera home.php och byta namn right_sidebar.php eller kopiera och klistra in koden i den här filen. Spara. Slutligen öppna view.php. Den här filen används för sidor som genereras automatiskt av concrete5 som inte kräver en separat anpassad mall. Detta kan till exempel användas för inloggningssidan och sidan som inte hittades. Klistra in din home.php-kod i view.php. Antingen över eller under ? php $ a = nytt område ('Main'); $ a-> display ($ c); ?> var13 -> PHP-tagg, ange följande kod:
? php print $ innerContent; ?> var13 ->
Spara din fil. Ladda upp din temakatalog till din server.
Steg 5: Aktivera ditt tema
Besök hemsidan för din installation av betong5 och rulla över instrumentbräda -knappen, placerad i det övre fältet i webbläsarfönstret. Klicka på Teman länk. Du kommer att presenteras med temavalningsfönstret. Klicka på Installera bredvid ditt nyskapade tema. Nästa fönster visar de filer som kommer att installeras. Klick OK. Nu måste du aktivera det. Klicka på Tillbaka till teman och klicka sedan på Aktivera bredvid ditt tema. Det kommer att fråga om du vill aktivera temat över hela webbplatsen. Klick OK. Det är allt. Du har nu förvandlat din HTML till en innehållshanterad webbplats!
Steg 6 Lägga till innehåll
Nu kan du lägga till innehåll på din webbplats. Först började jag ladda upp webbplatsens bilder (som företagslogotyp och bildspel) till betong5. Rulla över instrumentbräda och välj filhanterare. Klick ladda upp flera och då lägga till filer i popup-fönstret. Navigera till bildmappen och välj claritylaw-scotland.webp och temp-image01-05.jpeg. Börja ladda upp. Efter uppladdning, gå tillbaka till huvudfönstret för filhanteraren så ser du en lista över alla bilder. Klicka på kryssrutan bredvid alla temporära bildfiler och välj i rullgardinsmenyn Uppsättningar. Klick Lägg till ny uppsättning och namnge detta bildspel. Klick uppdatering.
Håll muspekaren över instrumentpanelen och välj Travar. Med staplar kan du återanvända block på flera platser på din webbplats. Eftersom vi har tilldelat globala områden till vår HTML-kod bör du se en lista över globala staplar som redan finns. Klicka på Logotyp stack och sedan Lägg till block. Vi vill lägga till innehåll, så välj Innehållsblock. Detta visar en TinyMCE-redigerare. Klick Lägg till bild och välj logotypen som vi laddade upp tidigare. Klick Lägg till. Tillbaka i stapellistan, klicka på Tagline Stack och klicka igen Lägg till block och välj innehållsblock. Lägg till din text i redigeraren. Du kan välja dina teckensnittsstilar om du vill, men här behåller vi det som ett stycke. Klick Lägg till. Fortsätt och lägg till resten av ditt innehåll med hjälp av innehållsblocket, bortsett från Kontaktformulär, Twitter flöde och Rubrik Nav staplar.
När allt globalt innehåll är på plats, välj Rubrik Nav från din stacklista. Vi vill lägga till Auto Nav blockera. Härifrån har du en rad alternativ för hur du vill att din navigering ska visas. Om din webbplats har en rullgardinsmeny kan du ställa in hur många nivåer av barnsidor du vill visa. Vi använder standardinställningarna, så klicka Lägg till. Klicka sedan på Twitter flöde stack. Beroende på hur du implementerar dina Twitter-flöden kan du välja HTML-block och lägga till den flödeskod som genereras av Twitter.
Här använder vi en av concrete5s gratis tillägg, Tweetcrete. Du kan installera tillägg från betong5-instrumentpanelen eller via ditt konto. I din stapellista klickar du på Twitter flöde stapla och lägg till Tweetbetong blockera. Följ instruktionerna för att auktorisera med ditt Twitter-konto och klicka Lägg till. Klicka sedan på Kontaktformulär stack. Välj Form blockera. Lägg till de fält du önskar: här använder vi namn, E-post, Telefon, Tjänster och Meddelande. På alternativfliken, lägg till det e-postmeddelande du vill att formuläret ska skickas till och eventuella Captcha-filter du vill ha från concrete5s tilläggssektion. Klick Lägg till.
Klicka på Återgå till webbplatsen -knappen i det övre redigeringsfältet. Du kommer att se din hemsida börjar ta form. Det sista är att lägga till ett bildspel. Håll muspekaren över Redigera och välj Redigera sida. En gång i detta läge ser du alla områden som kan redigeras på den här sidan, markerade med en prickad linje.
Du kan redigera valfritt block direkt på sidan. Redigering av globala områden leder dig vidare till just den stacken. Klicka på Bildspel och välj Lägg till block och välj sedan Bildspel blockera. Under Typ rullgardinsmeny, välj Bilder från filuppsättningen. Välj den uppsättning vi skapade tidigare, kallad Bildspel. Klick Lägg till. Håll muspekaren över Redigera och välj Publicera sidan. Bilderna dras automatiskt in.
Det är allt. Du har nu en färdig hemsida med innehåll på plats. Eftersom vi ställer in de globala områdena, kommer varje upprepat innehåll varje gång du lägger till en ny sida på webbplatsen automatiskt på sidan, så att du bara kan lägga till innehåll som är specifikt för den sidan.
Upptäck 35 inspirerande exempel på CSS på vår systersida, Creative Bloq.
