German flagEnglish flagSpanish flag

Website

Die Planungserfahrungen auf den zahlreichen Reiseblogs waren für unsere eigene Reiseplanung ein grosse Hilfe. Aus diesem Grund möchten wir unsere Erfahrungen wiederum dokumentieren, damit andere davon profitieren können. Für die technisch Interessierten, hier eine kurze Zusammenstellung der eingesetzten Software:

Hosting

Die Seite ist bei METANET gehosted, ein schweizer Hoster mit ausgezeichnetem Preis-/Leistungsverhältnis und unglaublich schnellem und kompetenten Support. Das von uns gewählt Produkt METAhost beinhaltet 17 GB Speicherplatz, unbeschränkte Anzahl Domains und die üblichen Services wie PHP, mysql etc. Der Preis für das Angebot ist nur CHF 7.70 pro Monat. Falls ihr euch ebenfalls für dieses Angebot entscheidet könnt ihr bei der Anmeldung gerne meine ‘Mediatoren-Nummer’ 1004082 angeben. So erhalte ich pro Anmeldung grosszügige 50 CHF Provision von METANET

Web-Blog Software

Wir haben die auf PHP und mysql basierende Blog-Software WordPress für unseren Blog verwendet. WordPress ist kostenlos, sehr einfach zu installieren und kann durch unzählige Plugins und Themes beliebig erweitert werden.

Theme

Das Aussehen des Blogs lässt sich durch “Themes” schnell und einfach verändern. Nach langer Suche haben wir uns für das kostenpflichtige Theme PureLight entschieden. Die einmalige Gebühr von 27 US$ beinhaltet ebenfalls Support. Meine Anfragen an den Entwickler des Themes wurden in kürzester Zeit zu meiner vollsten Zufriedenheit beantwortet. Ich kann das Theme somit nur weiterempfehlen.

Plugins

Die Funktionalität kann mit Plugins nach Belieben erweitert werden. Wir haben uns für folgende Plugins entschieden:

  • Geocache Stat Bar Badge in der Sidebar, welcher die Anzahl gefundener und versteckter Geocaches anzeigt
  • Global Translator Plugin, welches die Seite in so gut wie allen Sprachen übersetzten kann
  • Google Analyticator Generiert Statistiken über die Besucher der Seite
  • NextGEN Gallery Bilder Gallerie für WordPress
  • Subscribe2 Plugin um bei neuen Beiträgen automatisch Emails an bestimmte Personen zu versenden
  • W3 Total Cache erhöht die Performance der Site durch Cachen des Inhalts
  • WP Wall Gästebuch für WordPress
  • XML Google Maps Stellt GPX Dateien von einem GPS auf Google Maps zur Verfügung
  • Auto SyntaxHighlighter
  • IDrive for WordPress Erstellt ein Backup des kompletten Blogs (inkl. Files und DB) und speichert es auf dem IDrive ab. Es werden nur Änderungen gesichert, nach der ersten Sicherung dauert das Diff-Backup also nur noch wenige Sekunden/Minuten. IDrive bietet 2GB Speicherplatz – kostenlos. Für die letzten 10 Tage werden Snapshots erstellt.
  • WordPress Database Backup Schickt täglich ein Dump der Datenbank an eine beliebige Emailadresse
  • WordPress File Monitor Überwacht alle Änderungen im Filesystem und alarmiert wenn neue Files hinzugefügt werden, bestehende bearbeitet oder gelöscht werden
  • Google XML Sitemaps Erstellt ein XML Sitemap für verschiedene Search-Engines
  • Core Control
  • TOC For WordPress Erstellt eine Inhaltsübersicht von Posts oder Pages aufgrund der Überschriften h4, h3, h2, etc..

Good articel about hardening WordPress, definitly worth reading. Other helpful articels on WordPress developing:

Theme Mods

One-column template

One-column page templates can be created as described on the following site http://wordpress.org/support/topic/317673

  • Create a copy of the page.php file and name it onecolumn.php
  • Add the following to the top of the file onecolumn.php. This way you can choose from this new template in the wordpress admin backend when creating a new page.
<?php
/*
Template Name: 1-Column
*/
?>
  • Remove the following code (sidebar) in order that the sidebar will not be displayed anymore
<?php get_sidebar(); ?>
  • Change the default css style for posts be editing the following line from
<div class="post" id="post-<?php the_ID(); ?>" >

to

<div class="post_wide" id="post-<?php the_ID(); ?>" >
  • Add the following lines to the style.css file right below div#content div.post after line 87:
div#content div.post_wide { width: 856px; background: #e3e3e3 url('images/post_bg.png') repeat; padding: 20px; clear: both; font-size: 12px; position: relative; border: 1px solid #d1d1d1; }

Changes to file purelight/style.css. Replace section div#header h1#logo after line 53

div#header h1#logo { width: 500px; height: 78px; position: absolute; display: block; left: 0px; top: 1px; background: url('images/logo.png') left top no-repeat; }

No header pic in first post

  • Add the following line to the index.php file (after line 45):
<?php if (is_home() && !($post == $posts[0]) && !is_paged()) { ?>
  • Also add this line right after line 53:
<? } ?>

Additional css in style.css

  • Green border for xml google maps plugin
.xmlgm {
	padding: 3px;
	background: #A7C443;
}
  • Border around images, replace the follwing lines in the style.css
div.post img.alignright { float: right; margin-right: 0px; }
div.post img.alignleft { float: left; margin-left: 0px; }

with the following

div.post img.alignright { float: right; padding: 5px; background-color: #e3e3e3; margin-left: 10px; margin-bottom: 5px; border-width: 1px; border-style: dotted; border-color: #A7C443; }
div.post img.alignleft { float: left; padding: 5px; background-color: #e3e3e3; margin-right: 12px; margin-bottom: 5px; border-width: 1px; border-style: dotted; border-color: #A7C443; }
  • Add the following CSS sniplet to show the mail icon
.s2_form_widget h4 {
	padding-top:25px;
	cursor: pointer;
}

.s2_form_widget {
    background-image: url('/wp-content/themes/purelight11/images/mail_icon_small.png');
	background-repeat: no-repeat;
	background-position: right top;
	margin-top:-25px;
	padding-top:65px;
}
  • Replace the following line
.sidebar_box { width: 236px; margin-bottom: 25px; background: url('images/sidebar_box_bg.png') center bottom no-repeat; position: relative; clear: both; padding: 40px 20px 10px; }

with

.sidebar_box { width: 236px; margin-bottom: 10px; background: url('images/sidebar_box_bg.png') center bottom no-repeat; position: relative; clear: both; padding: 30px 20px 10px; }
  • Changes to the info boxes: replace the following lines in the style.css
div#infoblock div.post_wrap div.post div.post_image img { height: 80px; width: 237px; margin: 0px; }

with the following

div#infoblock div.post_wrap div.post div.post_image img { height: 80px; width: 237px; margin: 0px; border:1px solid #A9A9A9; background-color:#FFFFFF; padding:4px; margin-bottom:8px;}
div#infoblock div.post_wrap div.post div.post_image img:hover { background-color:#A7C443;}
  • Add the following to the style.css for the impromptus jQuery Lightbox effect:
/*
------------------------------
	Impromptu's
------------------------------
*/
.jqifade{
	position: absolute;
	background-color: #000;
}
div.jqi{
	width: 400px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	position: absolute;
	background-color: #ffffff;
	font-size: 11px;
	text-align: left;
	border: solid 1px #eeeeee;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	padding: 7px;
}
div.jqi .jqicontainer{
	font-weight: bold;
}
div.jqi .jqiclose{
	position: absolute;
	top: 4px; right: -2px;
	width: 18px;
	cursor: default;
	color: #bbbbbb;
	font-weight: bold;
}
div.jqi .jqimessage{
	padding: 10px;
	line-height: 20px;
	color: #444444;
}
div.jqi .jqibuttons{
	text-align: right;
	padding: 5px 0 5px 0;
	border: solid 1px #eeeeee;
	background-color: #f4f4f4;
}
div.jqi button{
	padding: 3px 10px;
	margin: 0 10px;
	background-color: #2F6073;
	border: solid 1px #f4f4f4;
	color: #ffffff;
	font-weight: bold;
	font-size: 12px;
}
div.jqi button:hover{
	background-color: #728A8C;
}
div.jqi button.jqidefaultbutton{
	/*background-color: #8DC05B;*/
	background-color: #A7C443;
}
.jqiwarning .jqi .jqibuttons{
	background-color: #A7C443;
}

These lines will give some more space after the titles

div#content div.post h3 { font: 16px/20px Tahoma, Arial, Verdana, sans-serif; margin-top: 30px;}
div#content div.post h4 { font: 14px/18px Tahoma, Arial, Verdana, sans-serif; margin-top: 25px;}
div#content div.post h5 { font: 12px/16px Tahoma, Arial, Verdana, sans-serif; color: #000; margin-top: 20px;}

More spacing between lines in body text, change the existing lines

div#content div.post div.entry { line-height: 22px; font-size: 12px; padding: 0px; text-align: left; margin-bottom: 10px; }
div#content div.post div.entry p { line-height: 22px; font-size: 12px; }

IE6 compatibility

Add the following to the ie6.css file in the path /httpdocs/wp-content/themes/purelight11/css

.s2_form_widget h4 {
	padding-top:25px;
	cursor: pointer;
    	height:1px;
}

.s2_form_widget {
    	background-image: url('/wp-content/themes/purelight11/images/mail_icon_small.png');
	background-repeat: no-repeat;
	background-position: right top;
	margin-top:-25px;
	padding-top:65px;
    	height:1px;
}

Changes in the header.php file

  • Remove/comment line 18-20 where jQuery and other JS scripts gets loaded, we want to load it the proper way with wp_enqueue_script
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fancy.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/load.js"></script>
  • Load jQuery right before the line (29) with <?php wp_head(); ?>
<?php wp_enqueue_script("jquery"); ?>
  • Right after this line we are going to load all jQuery dependent scripts (including the jQuery Slider for the Newsletter):
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/fancy.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/load.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-impromptu.3.1.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
  //hide the all of the element with class msg_body
  jQuery(".newsletter_body").hide();
  //toggle the componenet with class msg_body
  jQuery(".s2_form_widget h4").click(function()
  {
    jQuery(this).next(".newsletter_body").slideToggle(200);
  });
});
</script>
  • Replace the following block
<script type="text/javascript">
$(document).ready(function() {
	$('#featured').jqFancyTransitions({
	width: 920,
	height: 260,
	strips: 25,
	delay: <?php echo $pl_slidedelay ?>,
	links: <?php echo $pl_slidelink ?>,
	direction: 'random',
	position: 'top',
	<?php if ($pl_slideeffect != "default") { ?>
	effect: '<?php echo $pl_slideeffect ?>',
	<? } ?>
	stripDelay: 40,
	titleSpeed: 1200,
	navigation: true
	});
	});
</script>

with

<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery('#featured').jqFancyTransitions({
	width: 920,
	height: 260,
	strips: 25,
	delay: <?php echo $pl_slidedelay ?>,
	links: <?php echo $pl_slidelink ?>,
	direction: 'random',
	position: 'top',
	<?php if ($pl_slideeffect != "default") { ?>
	effect: '<?php echo $pl_slideeffect ?>',
	<? } ?>
	stripDelay: 40,
	titleSpeed: 1200,
	navigation: true
	});
	});
</script>

Plugin Mods

WP Wall

  • CSS Changes in wp-wall.css
#wallcomments p
{
	margin-bottom:15px;
	clear:both;
	border-bottom: 1px dotted #789819;
}
#wall_post input  {
	border: 1px solid #cccccc;
	width: 225px;
}
#wall_post textarea {
	border: 1px solid #cccccc;
	width: 225px;
}
.wall-alt {
	background: #d9e2d2;
}

#wall_post_toggle  {
	cursor:pointer;
	font-weight:bold;
}

.wallnav {
	text-align:center;
	margin:5px 0px 0px 0px;
}
.wallcomment {
	line-height: 21px;
	font-weight:normal;
}

add the following block:

#wp_latest {
	color:#999;
	width: 100%;
	text-indent:10px;
	font-size: x-small;
	background-color:#efefef;
	margin-bottom: 10px;
	border-bottom:1px dotted;
}

We also change some text in the wp-wall.php file on line 227 from

$result='<div id="wp_latest">Latest on '.$latest_comment.'</div>'.$result;

to

$result='<div id="wp_latest">Letzer Eintrag: '.$latest_comment.'</div>'.$result;

We want to display the navigation arrows below the comments we move the following block below the <div id="wallcomments"> block

	<div class="wallnav">
					<img alt="Previous" id="img_left" src="<?php echo $wp_wall_plugin_url; ?>/i/left.png" />
					<img alt="Next" id="img_right" src="<?php echo $wp_wall_plugin_url; ?>/i/right.png" />
					<?php if ( $show_all ) : ?>
					<a  href="<?php echo get_permalink($pageId) ?>">All</a>
					<?php endif; ?>
  	</div>

NextGEN Gallery

CSS changes

Changes in nggallery.css

.ngg-gallery-thumbnail img:hover {
	background-color: #A7C443;
}
/* ----------- Single picture -------------*/
.ngg-singlepic {
	border:1px solid #A9A9A9;
	background-color:#FFFFFF;
	display:block;
	padding:4px;
	margin-bottom:8px;
}
.ngg-left {
	float: left;
	margin-right:15px;
}
.ngg-right {
	float: right;
	margin-left:15px;
}
.ngg-widget img {
	border:1px solid #A9A9A9;
	margin:4px 0px 4px 5px;
	padding:4px;
}
.ngg-galleryoverview {
    overflow: hidden;
    margin: -5px;
    width: 100%;
    clear:both;
    display:block !important;
}
.ngg-gallery-thumbnail-box {
    float: left;
    margin-bottom: 10px;
}
  • Alle Pfade zu .png Dateien für InternetExplorer im Abschnitt /* IE */ müssen ergänzt werden. Beispielsweise muss der Pfad /fancybox/fancy_loading.png nach /wp-content/plugins/nextgen-gallery/fancybox/fancy_loading.png geändert werden.

New sections:

a:hover img {
	background-color:#A7C443;
}
.ngg-widget img:hover {
	background-color: #A7C443;
}

Fancybox integration

  • Download and extract Fancybox into the nextgen-gallery folder inside the plugin folder (wp-content/plugins/nextgen-gallery)
  • Make all necessary modifications as discribed at the bottom of this post
  • IMPORTANT: the activation of the fancybox within the function load_scripts() section needs to be done at the very bottom
  • Include the css file of fancybox in the file nggallery.php in wp-content/plugins/nextgen-gallery below the line function load_styles()
// activate modified Custom
if ( ($this->options['thumbEffect'] == 'custom') )
	wp_enqueue_style('custom', NGGALLERY_URLPATH .'fancybox/jquery.fancybox-1.3.1.css', false, '1.3.0', 'screen');
  • Create a new file called fancyboxConf.js inside wp-content/plugins/nextgen-gallery/fancybox and add the following code
function FancyBoxReload() {
    /* This is basic - uses default settings */

	jQuery("a.fancybox").fancybox({
		'titlePosition'	: 'over',
		'overlayOpacity' : 0.6,
		'overlayColor' : '#444',
 		'titleFormat'       : function(title, currentArray, currentIndex, currentOpts) {
				    return '<span id="fancybox-title-over">' + (title.length ? '  ' + title : '') + '<br>Bild ' + (currentIndex + 1) + ' von ' + currentArray.length  + '</span>';
		},
		'cyclic'		: false,
		'onComplete'	:	function() {
			$("#fancybox-wrap").hover(function() {
				$("#fancybox-title").show();
			}, function() {
				$("#fancybox-title").hide();
			});
		}
	});
}

jQuery(document).ready(function() {
	FancyBoxReload();
});

Display Title/Description in View Mode of Picture

Change opacity of title overlay background in View Mode of Picture

  • Adjust the png /httpdocs/wp-content/plugins/nextgen-gallery/fancybox/fancy_title_over.png according to your desire.

Global Translator

Fix permissions

All cache files which are created by the scripts should have 777 permissions. By default the cache files will be created with the user “apache” and 755. This way it is not possible to remove cache files with the default FTP users.

  • Add the following line into the script wp-content/plugins/global-translator/translator.php right after line 1191
chmod($filename, 0777);

Flags in the header

  • Add the following lines to the header.php of your theme right after the line 54 wp_nav_menu( $menu_set );  ?>
<?php
  if(function_exists("gltr_build_flags_bar")) {
  gltr_build_flags_bar();
  }
?>

CSS changes

  • Choose the option “Enclose the flags inside a DIV (for CSS customization)” in the Settings menu of Global Translator
  • Add the following lines to the style.css file from the used theme
/********************* TRANSLATION BAR *************************/
/***************************************************************/

div#translation_bar {
	padding: 11px;
	outline: none;
	float: right;
}

a#flag_de, a#flag_en {
	margin: 0px 12px 0px 0px;
}

Subscribe2

Messages should appear in a jQuery light box. Change the file subscribe2.php file on line 83 (for the ‘Confirmation mail message’):

$this->confirmation_sent = "<script type=\"text/javascript\">jQuery.prompt('A confirmation message is on its way!')</script><p>" . __('A confirmation message is on its way!', 'subscribe2') . "</p>";

TOC for WordPress

There should not be a blank line before the TOC

Remove the &nbsp; between the <div> tags on line 338 from

$out .= "<div class='toc-end'>&nbsp;</div>";

to

$out .= "<div class='toc-end'></div>";

Less list indent

Change the following in the setting of the plugin:

.toc ul ul, .toc ol ol {
		margin: 0 0 0 0;
}

Leave a Reply

You must be logged in to post a comment.