Block-API-Beispiele

Sie hätten gerne ein Beipsiel zum Herunterladen? Werfen Sie einen Blick auf unseren Beispiel-Block auf GitHub.

Vollständige Dateistruktur

Diese Beispiele zeigen die komplette Struktur der benötigten PHP, um einen angepassten (custom) Block auszuführen. Einige Platzhalter wie „my block“ oder „my selector“ werden als Beispiele verwendet. Detaillierte Beispiele sehen Sie in den nachfolgenden Abschnitten.

.php Hauptdatei

	<?php
		define('MY_BLOCK_VERSION', '1.0');
		add_action('after_setup_theme', 'my_block_register');
		function my_block_register {
			if ( !class_exists('Headway') )
				return;
			require_once 'block.php';
			require_once 'block-options.php';
			return headway_register_block('HeadwayMyBlock', plugins_url(false, __FILE__));
		}
		add_action('init', 'my_block_extend_updater');
		function my_block_extend_updater() {
			if ( !class_exists('HeadwayUpdaterAPI') )
				return;
			$updater = new HeadwayUpdaterAPI(array(
				'slug' => 'my-block',
				'path' => plugin_basename(__FILE__),
				'name' => 'My Block',
				'type' => 'block',
				'current_version' => MY_BLOCK_VERSION
			));
		}

block.php

Umfasst alle optionalen Methoden (entfernen Sie alle Methoden, die Sie nicht verwenden):

	<?php
		class HeadwayMyBlock extends HeadwayBlockAPI {
  			public $id = 'my-block';
  			public $name = 'My Block Name';
  			public $options_class = 'HeadwayMyBlockOptions';
  			public $description = 'My description.'
			function enqueue_action($block_id) {
				/* CODE FOR OPTIONAL METHOD */
				return;
			}
			function init_action($block_id) {
				/* CODE FOR OPTIONAL METHOD */
				return;
			}
			function dynamic_js($block_id) {
				/* CODE FOR OPTIONAL METHOD */
				return;
			}
			function dynamic_css($block_id) {				
				/* CODE FOR OPTIONAL METHOD */
				return;
			}
			function setup_elements() {
				$this->register_block_element(array(
					'id' => 'element1-id',
					'name' => 'Element 1 Name',
					'selector' => '.my-selector1',
					'properties' => 'array('property1', 'property2', 'property3'),
					'states' => array(
						'Selected' => '.my-selector1.selected',
						'Hover' => '.my-selector1:hover',
						'Clicked' => '.my-selector1:active'
					)
				));
			}
			function content($block) {
				/* CODE HERE */
			}
		}

block-options.php

	<?php
	class HeadwayMyBlockOptions extends HeadwayBlockOptionsAPI {
		public $tabs = array(
			'my-only-tab' => 'Settings'
		);
		public $inputs = array(
			'my-only-tab' => array(
				'text-input' => array(
					'type' => 'image',
					'name' => 'logo',
					'label' => 'Logo',
					'tooltip' => 'Put anything relevant about the input in this tooltip.'
				)
			)
		);
	}

Beispiel zum Einbinden von Aktionen (block.php)

Diese Funktion initialisert FlexSlider, ein jQuery-Karussell. Wenn keine Bilder oder nur eines vorhanden ist, wird FlexSlider nicht geladen.

	function enqueue_action($block_id, $block) {
		$images = parent::get_setting($block, 'images', array());
		wp_enqueue_style('flexslider', headway_url() . '/library/blocks/slider/assets/flexslider.css');
		if ( count($images) <= 1 )
			return false;
		wp_enqueue_script('flexslider', headway_url() . '/library/blocks/slider/assets/jquery.flexslider-min.js', array('jquery'));
	}

Beispiel zur Anmeldung einer Seitenleiste (Sidebar) oder Menüs (block.php)

Diese Funktion meldet den Block bei WordPress als Widget-Bereich an, sodass in der Admin-Leiste Widgets hinzugefügt werden können.

	function init_action($block_id, $block) {
		$widget_area_name = HeadwayBlocksData::get_block_name($block) . ' — ' . 'Layout: ' . HeadwayLayout::get_name($block['layout']);
		$widget_area = array(
			'name' => $widget_area_name,
			'id' => 'widget-area-' . $block['id'],
			'before_widget' => '<li id="%1$s">' . "\n",
			'after_widget' => '</li><!-- .widget -->' . "\n",
			'before_title' => '<span>',
			'after_title' => '</span>' . "\n",
		);
		register_sidebar($widget_area);
	}

Beispiel zum Einfügen von JavaScript (block.php)

Diese Funktion basiert auf dem Beispiel zum Einbinden einer Aktion, indem ein jQuery-Script ausführt wird. Sie nutzt die Werte aus den Block-Einstellungen, die zum Erstellen der Parameter verwendet wurden.

	function dynamic_js($block_id, $block) {
		$images = parent::get_setting($block, 'images', array());
		if ( count($images) <= 1 )
			return false;
			return '
				jQuery(document).ready(function(){
					jQuery(\'#block-' . $block['id'] . ' .flexslider\').flexslider({
						animation: "' . (parent::get_setting($block, 'animation', 'slide-horizontal') == 'fade' ? 'fade' : 'slide') . '",
						direction: "' . (parent::get_setting($block, 'animation', 'slide-horizontal') == 'slide-vertical' ? 'vertical' : 'horizontal') . '",
						slideshow: ' . (parent::get_setting($block, 'slideshow', true) ? 'true' : 'false') . ',
						slideshowSpeed: ' . (parent::get_setting($block, 'animation-timeout', 6) * 1000) . ',
						animationSpeed: ' . (parent::get_setting($block, 'animation-speed', 500)) . ',
						randomize: false,
						controlNav: ' . (parent::get_setting($block, 'show-pager-nav', true) ? 'true' : 'false') . ',
						directionNav: ' . (parent::get_setting($block, 'show-direction-nav', true) ? 'true' : 'false') . ',
						randomize: ' . (parent::get_setting($block, 'randomize-order', false) ? 'true' : 'false') . '
					});
				});' . "\n";
	}

Beispiel zum Einfügen von CSS (block.php)

Diese Funktion prüft zunächst, ob der Block gespiegelt wird (mirror), und falls ja, werden diese Einstellungen verwendet. Falls nicht, wird der zusätzliche CSS-Code hinzugefügt.

	function dynamic_css($block_id, $block, $original_block = null) {
		$selector = '#block-' . $block_id;
			if ( is_array($original_block) ) {
				$block_id = $original_block['id'];
				$block = $original_block;
				$selector .= '.block-original-' . $block_id;
			}
		$block_height = HeadwayBlocksData::get_block_height($block);
			return '
				' . $selector . ' .nav-horizontal ul.menu > li > a,
				' . $selector . ' .nav-search-active .nav-search {
					height: ' . $block_height . 'px;
					line-height: ' . $block_height . 'px;
				}';
	}

Beispiel zur Anmeldung von Elementen (block.php)

Diese Funktion teilt dem Visual Editor mit, dass – sobald Ihr Block (den wir hier „X Block“ nennen) in der Optionsleiste ausgewählt wird – drei Unterlemente zur Gestaltung verfügbar sind: Title, Tab und Content. Da dies der X Block ist, und um unsere IDs und Selektoren einmalig zu gestalten, stellen wir einigen Werten ein „x“ voran.

	function setup_elements() {
		$this->register_block_element(array(
			'id' => 'xtitle',
			'name' => 'Title',
			'selector' => '.xtitle',
			'properties' => 'array('fonts', 'borders', 'padding', 'text-shadow')
		));
		$this->register_block_element(array(
			'id' => 'xtab',
			'name' => 'Tab',
			'selector' => '.xtab',
			'properties' => 'array('fonts', 'borders', 'padding', 'text-shadow', rounded-corners'),
			'states' => array(
				'Selected' => '.xtab.selected',
				'Hover' => '.xtab:hover',
				'Clicked' => '.xtab:active'
			)
		));
		$this->register_block_element(array(
			'id' => 'xcontent',
			'name' => 'Content',
			'selector' => '.xcontent',
			'properties' => 'array('fonts', 'padding', 'text-shadow')
		));
	}

Beispiel für Block Inhalte (block.php)

Dieses Beispiel zeigt Ihnen, wie Text aus der Datenbank abgerufen und im Block dargestellt wird. Der dritte Befehl in dieser Funktion (in diesem Beispiel „null“) wird ausgegeben, wenn die Einstellung in der Datenbank nicht vorliegt.

	function content($block) {
		$sample_input_value = parent::get_setting($block, 'sample-input', null);
		if ( $sample_input_value == null ) {
			echo '<p>The sample input has nothing in it yet!</p>';
		} else {
			echo '<p>Here\'s what the sample input has for a value: ' . $sample_input_value . '</p>';
		}
	}

Beispiel für Block Optionen (block-options.php)

Dieses Beispiel hat zwei Reiter mit je zwei Eingaben, darunter als Beispiel eine JavaScript-Rückruffunktion zur ersten Eingabe.

	class HeadwayExampleBlockOptions extends HeadwayBlockOptionsAPI {
		public $tabs = array(
			'my-tab-1' => 'My First Tab',
			'my-tab-2' => 'My Second Tab',
		);
		public $inputs = array(
			'my-tab-1' => array(
				'input-1' => array(
					'type' => 'text',
					'name' => 'Input 1',
					'default' => '',
					'tooltip' => 'Input 1 help.',
					'callback' => "
						if ( value.length > 0 ) {
							block.find('.block-content p').text('Here\'s what the example input has for a value:' + value);
						} else {
							block.find('.block-content p').text('The example input has nothing in it yet!');
						}
					"
				)
				'input-2' => array(
					'type' => 'checkbox',
					'name' => 'Input 2',
					'default' => true,
					'tooltip' => ''
				)
			)
			'my-tab-2' => array(
				'input-3' => array(
					'type' => 'select',
					'name' => 'Input 3',
					'options' => array(
						'' => 'None',
						'eyes' => 'Eyes',
						'nose' => 'Nose',
						'mouth' => 'Mouth'
					)
					'default' => '',
					'tooltip' => 'Input 3 help.'
				)
				'input-4' => array(
					'type' => 'slider',
					'name' => 'Input 4',
					'default' => 10,
					'unit' => %,
					'slider-min' => 0,
					'slider-max' => 100,
					'slider-interval' => 1,
					'tooltip' => 'Input 4 help.'
				)
			)
		);
	}

Dieser Artikel wurde zuletzt für Headway Version 3.6.3 aktualisert.

Letztes Update: 19. Mai 2014