YAML | «Simple Project» Template

Massnahmen und Hilfe bei der Installation meiner Module.

Als erstes brauchen wir die jQuery Themes und Scripte. Du findest sie auf unserer Downloadseite und besteht aus 2 Teilen und installieren diese in einen Ordner. Ab WB 2.8 sollen diese in das /include/ Verzeichnis. Also dort einfach einen Ordner jquery anlegen und die Pfade in den hier aufgeführten Beispielen anpassen.

Jetzt machen wir uns Gedanken die Ladezeit der Seite zu optimieren. Setze deine Stylesheets für dein Layout in den HEAD Bereich. Die Scripte in unteren Bodybereich vor </body>

<!-- Externes Stylesheet einbinden -->
<link href="<?php echo TEMPLATE_DIR; ?>/css/my_layout.css" rel="stylesheet" type="text/css"/>
<!--[if lte IE 7]>
<link href="<?php echo TEMPLATE_DIR; ?>/css/patches/patch_my_layout.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="<?php echo WB_URL; ?>/framework/jquery/themes16/redmond/ui.all.css" media="screen" rel="stylesheet" type="text/css" />

Danach bitte folgende PHP Anweisung zum Laden der Modulstylesheets einbinden

<?php

if(function_exists('register_frontend_modfiles')) {

register_frontend_modfiles('css');

}

?>

Jetzt binden wir die Javascripte und Aufrufe der Funktionen vor </body> ein

<script language="JavaScript" type="text/javascript">
var URL = '<?php echo WB_URL ?>';
var URL_SLIDER = '<?php echo WB_URL ?>/modules/wysiwyg_slider/';
var horz = true;
</script>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="<?php echo WB_URL; ?>/jquery/ui/minified/jquery-ui-min.js" type="text/javascript"></script>
<script src="<?php echo WB_URL; ?>/jquery/ui/jquery.insert.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
  if($("a[rel^='lightbox']").length) {
        $.insert("<?php echo WB_URL; ?>/jquery/themes16/base/jquery.slimbox2.css");
        $.insert("<?php echo WB_URL ?>/jquery/ui/minified/jquery.slimbox2.min.js");
      }
  if($(".rounded").length) {
     $.insert("<?php echo WB_URL ?>/jquery/ui/jquery.corner.js");
        $(function() {
                $(".rounded").corner('round 15px'); /* test for rounding */
        });
      }
/*-- Only for coder --*/
  if($("[class^=brush]").length) {
      $.insert("<?php echo WB_URL ?>/framework/dp.SyntaxHighlighter/styles/shCore.css");
      $.insert("<?php echo WB_URL ?>/framework/dp.SyntaxHighlighter/styles/shThemeDefault.css");
      $.insert("<?php echo WB_URL ?>/framework/dp.SyntaxHighlighter/scripts/shCore.all.js");
          $(function(){
            SyntaxHighlighter.config.stripBrs = false;
            SyntaxHighlighter.config.bloggerMode = true;
            SyntaxHighlighter.config.clipboardSwf = "<?php echo WB_URL ?>/framework/dp.SyntaxHighlighter/scripts/clipboard.swf";
            SyntaxHighlighter.defaults['gutter'] = true;
            SyntaxHighlighter.defaults['smart-tabs'] = true;
            SyntaxHighlighter.defaults['wrap-lines'] = true;
            SyntaxHighlighter.defaults['html-script'] = true;
            SyntaxHighlighter.all();
         });
       };
/*-- Only for coder --*/

</script>

<?php
if(function_exists('register_frontend_modfiles')) {
  register_frontend_modfiles('js');
}
?>

Zu dem sind wir laufend dabei, die Optimierung der Ladezeit zu verbessern. Dies erreichen wir dadurch, dass Scripte und Stylesheets unserer Module erst beim Aufruf geladen werden. Es werden im Quelltext Selectoren abgefragt die eine bestimmte Aktion ausführen sollen.

So z. B. eine Box mit runden Ecken erreichen wir so

<p style="text-align: left;" class="benefits rounded">
So z. B. eine Box mit runden Ecken erreichen wir so
</p>

Oder anderes Beispiel: Du möchtest ein Bild a la Lightbox aufrufen. Kein Problen, siehe hier

<a rel="lightbox" title="Aufruf eines Bildes  mit jquery slimbox sctipt" href="http://www.wdsnet.de/wb/media/fotoalben/IMG_3411.JPG"><strong>hier</strong></a>