StudioMoio

De tweede helft van mijn tweede schooljaar heb ik stage gelopen bij StudioMoio. Ik heb hier voornamelijk een nieuwe website ontwikkeld die focused op het makkelijker maken van inhoud toe voegen.
De nieuwe site is gemaakt in WordPress. Ik ben begonnen met het migreren van alle inhoud naar WordPress. Daarna heb ik page templates gemaakt met postloops voor elke categorie zodat alle posts handig gesorteerd kunnen worden en samen op een pagina kunnen staan.


Custom post loop page template

Page Template

<?php
/**
 * The template for listing posts for evenementen
 *
 * Template Name: list evenementen
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */
 
get_header(); ?>
 
<div id="primary" class="content-area">
	<main id="main" class="site-main" role="main">
 
		<?php
		// TO SHOW THE PAGE CONTENTS
		while ( have_posts() ) : the_post(); ?> <!--Because the_content() works only inside a WP Loop -->
			<h1 class="custom-page-title">
			<?php wp_title(''); ?>
			</h1>
			<div class="entry-content-page">
				<?php the_content(); ?> <!-- Page Content -->
			</div><!-- .entry-content-page -->
			<hr/>
 
		<?php
		endwhile; //resetting the page loop
		wp_reset_query(); //resetting the page query
		?>
 
		<div class="custom-loop">
		<?php
 
			query_posts('category_name=evenementen');
 
			while ( have_posts() ) : the_post();
 
				// Include the page content template.
				get_template_part( 'template-parts/content', 'list' );
 
				// If comments are open or we have at least one comment, load up the comment template.
				if ( comments_open() || get_comments_number() ) {
					comments_template();
				}
 
				// End of the loop.
			endwhile;
		?>
		</div>
		<hr/>
	</main><!-- .site-main -->
 
	<?php get_sidebar( 'content-bottom' ); ?>
 
</div><!-- .content-area -->
 
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Hierin word deze file gelinkt die bepaald hoe de posts worden weergegeven in de loop. Op de voorpagina staat onderaan elke post ook nog de categorie van de post.


Post content template

<?php
/**
 * The template used for displaying page content
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */
?>
 
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 
	<a href="<?php the_permalink(); ?>">	
	<?php
		the_post_thumbnail();
		the_title( '<h3 class="custom-title">', '</h3>' );
	?>
	</a>
	<?php
		the_excerpt();
 
		wp_link_pages( array(
			'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentysixteen' ) . '</span>',
			'after'       => '</div>',
			'link_before' => '<span>',
			'link_after'  => '</span>',
			'pagelink'    => '<span class="screen-reader-text">' . __( 'Page', 'twentysixteen' ) . ' </span>%',
			'separator'   => '<span class="screen-reader-text">, </span>',
		) );
		?><a href="<?php the_permalink(); ?>">Lees verder!</a>	
 
	<?php
		edit_post_link(
			sprintf(
				/* translators: %s: Name of current post */
				__( 'Edit<span class="screen-reader-text"> "%s"</span>', 'twentysixteen' ),
				get_the_title()
			),
			'<footer class="entry-footer"><span class="edit-link">',
			'</span></footer><!-- .entry-footer -->'
		);
	?>
 
</article><!-- #post-## -->

Op de pagina waarop de mensen worden afgebeeld heb ik een leuk trucje geprobeerd die erg positief is ontvangen. waneer je de muis over een foto houd veranderd die in een andere foto van dezelfde persoon, om wat extra karakter aan de pagina te geven. Dit is gedaan met een simpel stukje javascript. er is maar een probleem. Als je de pagina opend in de visual editor word alle javascript weggehaald. Om dit te voorkomen zodat de pagina normaal bewerkt kan worden heb ik een plugin geschreven die een shortcode genereerd. Shortcodes worden namelijk gewoon met rust gelaten door de WordPress editor. Hieronder vind je de shortcode en bijbehordende code.


Image hover plugin

shortcode

[imgh id1="1122" id2="1123"]

Image-hover-plugin.php

<?php
   /*
   Plugin Name: Image Hover Shortcodes
   Plugin URI: https://caspernouwens.nl
   Description: a plugin to make shortcodes for image hover effects
   Version: 0.1
   Author: Casper Nouwens
   Author URI: https://caspernouwens.nl
   License: GPL2
   */
 
function imgh_shortcode($atts = [], $content = null, $tag = '')
{
    $atts = array_change_key_case((array)$atts, CASE_LOWER);
 
    $imgh_atts = shortcode_atts([
		 'id1' => '',
		 'id2' => '',
		 'size' => '100%',
	 ], $atts, $tag);
 
    $imgh_o = '';
 
    $imgh_o .= '<img class="alignleft size-full"';
    $imgh_o .= ' width ="'.$imgh_atts[size].'" src="';
    $imgh_o .= wp_get_attachment_url( $imgh_atts[id1]);
    $imgh_o .= '" onmouseover="this.src=\'';
    $imgh_o .= wp_get_attachment_url($imgh_atts[id2]);
    $imgh_o .= '\'" onmouseout="this.src=\'';
    $imgh_o .= wp_get_attachment_url( $imgh_atts[id1]);
    $imgh_o .= '\'"> '; 
    if (!is_null($content)) {
        $content = apply_filters('the_content', $content);
 
        $imgh_o .= do_shortcode($content);
    }
 
    return $imgh_o;
}
 
function imgh_shortcodes_init()
{
    add_shortcode('imgh', 'imgh_shortcode');
}
 
add_action('init', 'imgh_shortcodes_init');
 
 
add_action('media_buttons', 'add_my_media_button', 15);
 
function add_my_media_button() {
    echo '<a href="#" id="insert-my-media" class="button"> [ ] Add Image shortcode</a>';
}
 
function include_media_button_js_file() {
    wp_enqueue_script('media_button', '/wp-content/plugins/image-hover-shortcodes/media_button.js', array('jquery'), '1.0', true);
}
 
add_action('wp_enqueue_media', 'include_media_button_js_file');

Media_button.js

Dank aan Jérémy Heleine voor de media button code!
jQuery(function($) {
    $(document).ready(function(){
            $('#insert-my-media').click(open_media_window);
        });
 
	function open_media_window() {
		if (this.window === undefined) {
			this.window = wp.media({
					title: 'Select two images',
					library: {type: 'image'},
					multiple: true,
					button: {text: 'Insert'}
				});
 
			var self = this; // Needed to retrieve our variable in the anonymous function below
			this.window.on('select', function() {
					var files = self.window.state().get('selection').toArray();
					var first = files[0].toJSON();
					var second = files[1].toJSON();
					wp.media.editor.insert('[imgh id1="' + first.id + '" id2="' + second.id + '"/]');
				});
		}
 
		this.window.open();
		return false;
	}
 
});

Image change on hover

Plaatjes veranderen op mouseover


Bekijk de site!

Vist StudioMoio