Een paar Joomla tips

Afdrukken
Details
Categorie: Windows and Android
Hits: 42119
Ster inactiefSter inactiefSter inactiefSter inactiefSter inactief
 

Een paar Joomla tips

Ik heb mijn oude website overgezet in Joomla CMS (Content Management System) en daarbij loop je, zo hier en daar, tegen iets aan waar je een oplossing voor moet zien te vinden. Nu ga ik hier geen workshop houden maar pen wel wat oplossingen neer waar je misschien ook wat mee kunt.
Wat voor een editor kun je het beste gebruiken? (laat je verrassen, zie verderop) En waar laat je je Javascripts en CSS styles?
Op deze vragen geef ik hier een antwoord, maar er zijn ook andere oplossingen. Welke? Zoek dat maar op in het ruime aanbod van extensies, maar dat is in veel gevallen alleen maar lastige ballast.

Lastig, dat steeds inloggen als je een kopje koffie hebt gedronken:
Dat is makkelijk te wijzigen onder Global Configuration>System>Session Settings.
Zet Session Lifetime op een hogere waarde, bijvoorbeeld 300 (minutes).

Welke editors zijn te gebruiken:
De meeste Joomla editor plugins strippen bij het opslaan je HTML van Embedded CSS en Scripts. Dat is niet alleen vervelend voor het resultaat, je bent dan ook de betreffende code kwijt. Nu is hier wel een eenvoudige oplossing voor door in plaats van een wysiwyg (wat je ziet is wat je krijgt) een pure tekst editor te gebruiken. Die zit ook standaard in Joomla maar daarbij zie je het resultaat pas als je de webpagina in je browser opent. Mijn oplossing is simpel, geeft gelijk een back-up en is ook nog eens gratis. Zie mijn Microsoft Expresion Web 4 artikel voor gratis download. Daar staat ook een optie voor een Microsoft Office Spell Checker bij.
Ga naar Joomla Global Configuration en onder het tabblad Site kies je bij Default Editor* Editor - CodeMirror.
In Microsoft Expression Web 4 maak je dan zeer comfortabel je pagina's op, kopieer de code en plak het in CodeMirror. Zo heb je gelijk een kopie van je webpagina's op je eigen harddisk staan. Verderop in dit artikel nog wat tips over hoe Expression Web voor Joomla te gebruiken.


Template aanpassen

Open het frond-end template (dus die je pagina's aan je bezoekers tonen) en plaats daar je eigen CSS- en JS-bestanden in, dat doe je ook met eventuele inline scripts (bv. statcounter of Fancybox).
Kies Menubar>Extensions>Template Manager en klik onder kopje Template op de naam van Default Site template (bv. Protostar).
Onder Template Master Files open je Edit main page template.

Als voorbeeld: Zoek dit op (in ieder geval onder <head> en eventuele <meta....> tags):

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="&lt;?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
En voeg hier je eigen code in (dit heb ik onder het bovenstaande tussengevoegd). 
  <!-- ##### MIJN CODE ##### -->
  <link href="/include/fancybox/source/jquery.fancybox.css" rel="stylesheet" type="text/css">
  <link href="/include/editor.css" rel="stylesheet" type="text/css">
  <script src="/media/jui/js/jquery.min.js" type="text/javascript"></script> ZIE BIJ Jquery: 
  <script src="/include/jquery.expander.min.js" type="text/javascript"></script>
  <script src="/include/fancybox/source/jquery.fancybox.pack.js" type="text/javascript"></script>
  <script type="text/javascript">
  $(document).ready(function() {
    var opts = {
      collapseTimer: 0, 
      expandEffect: 'fadeIn', 
      expandSpeed: 1000, 
      collapseEffect: 'fadeOut', 
      collapseSpeed: 1000, 
      userCollapse: true, 
      slicePoint: 50, 
      expandText: '&rArr;', 
      userCollapseText: '&lArr;', 
      widow: 2};
    $('dl.expander dd').slice(0).expander(opts);
    $('ul.expander li').expander({
      slicePoint: 50, 
      widow: 2, 
      expandSpeed: 0, 
      userCollapseText: '[^]'
  });
    $('div.expander').expander();
    $(".fancyBox").fancybox({
      beforeLoad: function() {this.title = $(this.element).attr('caption');}, 
      prevEffect: 'none', 
      nextEffect: 'none', 
      helpers: {title: {type: 'insite'}}});
      $(".fancyBox").fancybox({
        beforeLoad: function() {
          this.title = $(this.element).attr('caption');
        },
        prevEffect  : 'none',
        nextEffect  : 'none',
        helpers  : {
          title  : {
            type : 'insite'
          }
        }
      });
    });
  </script>  
<!-- ##### EINDE 'MIJN CODE' ##### -->

Zo voeg je dus zaken in die veelvuldig worden gebruikt. Voor ingebonden code kijk je bij de pagina Embedded CSS en Scripts.

LET OP:
Bij een Joomla update worden kopieën van standaard Joomla templates overschreven, dus ben je de aanvullingen weer kwijt. Dit kun je voorkomen door een kopie van de hele Default Site template-map naar je PC te verplaatsen. Als voorbeeld een kopie van /templates/protostar welke we op de PC omdopen in /templates/mijntemplate (kies zelf een naam voor mijntemplate).
Werkwijze:

  1. Wijzig in alle bestanden
    (gebruik zoek en vervangen in een (HTML) editor welke (sub)mappen doorzoekt of, wat omslachtiger, kladblok of wordpad)
    1. protostar in mijntemplate
    2. Protostar in Mijntemplate
    3. PROTOSTAR in MIJNTEMPLATE
  2. ZIP de map mijntemplate
  3. Upload en installeer mijntemplate.zip met Joomla's Extesion Manager

Jquery:
Joomla v3+ voegt zelf een jquery-script in maar, om de een of andere reden, ziet de browser dat niet. Indien je het er nog eens bij zet wordt het wel gezien. Merkwaardig is dat het bovenstaande jquery.min.js regel gewoon een kopie van die van Joomla is.
Bij vroegere oomla versies pas je de regel aan zodat ze naar de map wijst waar je zelf het bestand hebt opgeslagen.


CSS Style Sheets

Kies Menubar>Extensions>Template Manager en klik onder kopje Template op de naam van Default Site template (bv. Protostar). Bij je front-end template staat onder Stylesheets een css/template.css en, optioneel, ook een css/editor.css. De eerste wordt door het front-end template gebruikt en editor.css door de Joomla editors. Ontbreekt die laatste dan gebruiken de Joomla editors de system\editor.css. Hieruit kun je opmaken dat de css-opmaak in je editor en op de webpagina niet per definitie gelijk zijn.

Template stylesheets aanpassen:
Je kunt zelf een editor.css, met je eigen styles, aanmaken (of aanpassen) en in de bijbehorende template\css-folder plaatsen. Indien je Expression Web als editor gaat gebruiken dan sla je een kopie op in de website-folder op je eigen harddisk (later meer hier over). Kopieer de code van editor.css en plak deze bovenin template.css. Nu zijn beide stylesheets aan je eigen css-formats aangepast.

Extra stylesheets:
Natuurlijk kun je ook één of meerdere extra stylesheet(s) invoegen (zie vorige pagina bij fancybox.css).


Embedded CSS en Scripts

Embedded:
Soms is het voor een enkele pagina wel eens gewenst om over een eigen style en/of script te beschikken. Een formattering in een style- en/of script-tag is een ingebonden stylesheet en/of script:
(<style type="text/css"> ..... </style> en/of <script type="text/javascript"> ..... </script>)
Daar een Joomla site sowieso een moderne browser benodigd kun je Embedded CSS en/of Scripts domweg in je HTML-code plaatsen.

Joomla Smart Search en Embedded CSS en Scripts:
Indien je Smart Search hebt geïnstalleerd toont het de eerste regels van de gevonden pagina's. Als je Embedded CSS en/of Scripts vooraan in je HTML plaats dan wordt dat in plaats van de paginatekst getoond en dat is dan nogal slordig. Nu maakt het gelukkig niets uit waar je je Embedded CSS en Scripts neer pent, dus zet ze rustig helemaal onderaan in de code.


Page Break en Embedded

Wat op de vorige pagina staat is bij een Joomla Page Break per pagina van toepassing. Dus voor elke pagina een eigen Embedded CSS en/of Scripts invoegen.

Page Break:
Als je een externe editor gebruik, zoals Expression Web, dan heb je niets aan je daarvoor bestemde Joomla knop. Maar dat is helemaal geen probleem, je plaats gewoon een hr-tag (Horizontal Line uit toolbox of in code een <hr>) en past die aan voor Joomla.

Als voorbeeld die van de volgende pagina:

<hr alt="Van Expression Web naar Joomla" title="Van Expression Web naar Joomla" class="system-pagebreak" />

In alt de Table of Contents Alias (pagina menu) en in title de aanvulling voor Page Title. De class system-pagebreak is een Jooma opdracht om een nieuwe pagina te beginnen. Naar mijn mening kun je de tekst voor beiden beter gelijk houden.

Let op:
Een Page Break Tag altijd afsluiten met   /> anders wordt het niet als nieuwe pagina gezien.
HR-Tags (<hr> of <hr />) in pagina's met een Page Break worden soms niet gezien en dan ook niet wat er op die subpagina achteraan komt.


Backup je Joomla site

Een backup van je hele site, dus inclusies database, is een fluitje van een cent met de Akeeba extensie. Dat werkt eenvoudig en is wel heel erg snel.
Een backup bewaar je natuurlijk niet daar waar Akeeba het wegzet maar op een ander systeem, dus bijvoorbeeld thuis op je PC of netwerkdrive, of ergens in de wolken (cloud). Je backup vindt je hier: ftp://<JouwFtpPath>/administrator/components/com_akeeba/backup/
Wees wijs en vergeet de aanwijzingen voor een backup van je provider of Im/Export van phpMyAdmin en gebruik ook niet de up/download-optie uit Akeeba maar gebruik FileZilla. Dat gaat makkelijk, snel en is ook nog eens bestand tegen allerlei narigheid zoals transportfouten en onder- en afbreken. Na overdracht kun je met de Akeeba optie Manage Backups het backup-bestand op je webserver wissen.


Restore je Joomla site

Het zal je zijn opgevallen dat Akeeba Backup geen Restore kent. Dat is eigenlijk wel een beetje vreemd daar Akeeba een eenvoudige en snelle oplossing heeft in de vorm van een een PHP-bestand met de naam Kickstart. Maar goed, upload het uitgepakte Kickstart en je jpa-backup naar de root van je site en open in je browser kickstart.php. Volg de aanwijzingen en verbaas je hoe snel dit gaat. Bij eventuele problemen Googel je even op kickstart joomla.

Op deze wijze kun je je site ook naar een andere (locale)server verplaatsen of kopiëren. Het makkelijkste gaat dat als de database de zelfde namen, adres, user, password en andere gegevens heeft. Zo niet noteer dan al deze gegeven (zie phpMyAdmin scherm) en wijzig die als kickstart die van de backup toont.

Pas op:
Verwijder na restore, of het verplaatsen van je site, kikstart en de jpa-backup uit de root, want kickstart.php is natuurlijk door iedereen te openen.


Van Expression Web naar Joomla

Zie mijn Microsoft Expresion Web 4 artikel voor gratis download en Spell-check.

Hoe Expression Web gebruiken:
Een nieuwe of betaande pagina laden en dan eerst strippen.

  1. De tag <body> met alles wat er boven staat wissen.
  2. De tag </body> met alles wat er onder staat wissen.
  3. Helemaal aan het begin de link voor editor.css
    (eerder een kopie op je harddisk gezet - zie bij: CSS Style Sheets).
    <link href="/../include/editor.css" rel="stylesheet" type="text/css">
    (de folder-naam include aanpassen aan je eigen folder).
  4. Je pagina aan- en opmaken/wijzigen.
  5. Eventuele afbeeldingen en aanvullende CSS Stylesheets en/of Scripts in een zelfde folderstructuur opslaan als bij Joomla.
    (CSS Stylesheets en/of Scripts helemaal achteraan plaatsen - zie bij: Embedded CSS en Scripts)
  6. Eventuele afbeeldingen en aanvullende CSS Stylesheets en/of Scripts naar Joomla kopieren.
  7. De hele HTML-code, behalve <link href="/../include/editor.css" rel="stylesheet" type="text/css">, kopieeren en in de Joomla editor CodeMirror plakken.