Zip-Datei hochladen und entpacken via Settings-API

Es gibt mindestens zwei gute Gründe, Webfonts selbst zu hosten. Einer ist Performance, denn das Warten auf... den anderen Server fällt grundsätzlich weg. Der andere ist, woran man auf den ersten Blick vielleicht nicht denkt, Privatsphäre. Denn Google Fonts können für Tracking genutzt werden.

Ich mag Google Fonts, und verwende sie, auch in diesem Blog. Allerdings habe ich die Schriftdateien heruntergeladen, in Webfonts konvertiert, und direkt auf diesem Webserver bereitgestellt.

Aktuell erwäge ich, ein Custom Control zu entwickeln, mit dem statt Google Fonts selbst gehostete Fonts über den Customizer wählbar aind. Die Schriftpakete gelangen Als Zip-Archiv über ein file-Input auf den Server. Das Archiv soll dann in einem Verzeichnis unter uploads entpackt werden. Upload und Entpacken lassen sich recht einfach über die Settings API bewerkstelligen (was allerdings nur einen kleinen Teil der Gesamtanforderungen abdeckt).

Beispiel-Upload und Entpacken einer Zip-Datei als Testplugin

<?php
/*
 * Plugin Name: FLXO Demo Upload And Unzip
 * Plugin URI: 	https://webentwicklerin.at/
 * Description: Upload a zip-File and unzip it
 * Author: 	Gabriele Laesser
 * Author URI: 	https://blog.webentwicklerin.at/
 * Version: 	x
 */
 
define ( 'FLXO_FONT_UPLOADS_DIR', trailingslashit( WP_CONTENT_DIR ) . 'uploads/flxo-fonts' );
define ( 'FLXO_FONT_UPLOADS_URI', trailingslashit( WP_CONTENT_URL ) . 'uploads/flxo-fonts' );
 
class FLXO_Demo_Upload {
	
	/*
	 * the hooks
	 */
	function __construct() {
		add_action( 'admin_init', array( $this, 'flxo_register_setting' ) );
		add_action( 'admin_menu', array( $this, 'flxo_option_page' ) );
	}
	
	function flxo_register_setting() {
		register_setting(
			'flxo_fontface_upload',
			'flxo_fontface_upload',
			array( $this, 'upload_font_archive' )
		);
	}

	function flxo_option_page() {
		add_options_page(
			__( 'FLXO Demo', 'flxo-fontface-control' ),
			__( 'FLXO Demo', 'flxo-fontface-control' ),
			'manage_options',	
			'flxo-fontface-control',
			array( $this, 'options_page' )
		);
	}
	
	function options_page() {
    ?>
		<form enctype="multipart/form-data" method="post" action="options.php">
		<h2><?php echo __( 'FLXO Fontface Control' , 'flxo-fontface-control' ); ?></h2>
		<?php
			settings_fields( 'flxo_fontface_upload' );
			do_settings_sections( 'flxo_fontface_upload' );	
			echo '<input type="file" name="flxo_fontface_upload">';
			submit_button(); ?>
		</form>		
    <?php		
	}
	
	function upload_font_archive() {
	
		/* Initialises and connects the WordPress Filesystem Abstraction classes */
		WP_Filesystem();

		/* only working with tmp-file */
		if ( !empty( $_FILES['flxo_fontface_upload']['tmp_name'] ) ) {
			$uploadedfile = $_FILES['flxo_fontface_upload']['tmp_name'];

			wp_mkdir_p( FLXO_FONT_UPLOADS_DIR );	
			
			$unzipfile = unzip_file( $uploadedfile, FLXO_FONT_UPLOADS_DIR );
			   
			if ( is_wp_error( $unzipfile ) ) {
				echo __('There was an error unzipping the file.', 'flxo-fontface-control'); 
				die();
			}

		}
	}

}

$init_flxo = new FLXO_Demo_Upload();

Nachtrag 20.03.2021: Mittlerweile gibt es Plugins und auch Themes, die ausgewählte Google Fonts auf derm eigenen Server speichern. Das Theme Kadence zum Beispiel kümmert sich darum mit nur einem Klick. Immer mehr Themes bieten den Upload eigener Schriften an, sodass man bei weitem nicht nur auf Google Fonts beschränkt ist.