6 Commits

Author SHA1 Message Date
Dome 74e4b59a31 Update style.css 2026-05-03 01:15:34 +02:00
Dome 0a2bbcbef8 refactor: modularize theme structure and clean up functions.php
- moved performance-related logic into /inc/performance/performance.php
- relocated image optimization logic into dedicated image-optimizer module
- simplified functions.php to act as bootstrap and theme setup only
- introduced consistent module loading via require_once
- improved file structure with clear separation of concerns (customizer, utilities, tools, performance)

theme setup improvements:
- consolidated editor styles setup into zeitfresser_setup()
- removed redundant hooks and improved readability

assets:
- added script dependency (scripts -> navigation) to prevent load order issues
- improved stylesheet dependency handling

result:
- cleaner architecture
- better maintainability and scalability
- reduced risk of side effects during future feature development
2026-05-03 01:07:15 +02:00
Dome 61da5b15e5 fix file conflict 2026-05-03 00:24:39 +02:00
Dome ca7101489a Update code-block.php 2026-05-03 00:23:21 +02:00
Dome eda333d17a feat: add native code block feature and optimize asset loading
- Implemented custom code block system with Prism.js highlighting (YAML)
- Added Gutenberg block with modal editor for better handling of large code snippets
- Added Classic Editor button with dialog for structured code input
- Implemented copy-to-clipboard functionality with hover-based UI
- Introduced dedicated styling (code.css)

Performance improvements:
- Load Prism.js and code block assets only when a code block is present
- Reduced unnecessary JS and CSS on pages without code snippets
- Improved overall frontend performance and resource efficiency

UI/UX improvements:
- Adapted code block styling to match theme design (rectangular layout, accent border, integrated color scheme)
- Refactored sidebar search styling for consistent appearance
- Removed conflicting wrapper borders causing double border rendering
- Applied single-border input pattern with clean focus state
- Fixed invalid CSS !important syntax issues
- Aligned search input design with comments and code block components

Result:
- Cleaner UI with consistent component styling
- Improved performance through conditional asset loading
- Better authoring experience for structured YAML content
2026-05-03 00:22:55 +02:00
Dome 1ee3574d03 load code-block code only if needed 2026-05-02 17:37:19 +02:00
7 changed files with 870 additions and 721 deletions
+16 -4
View File
@@ -9,20 +9,32 @@
Code block wrapper Code block wrapper
------------------------------------------------------------------------- */ ------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------
Code block wrapper
------------------------------------------------------------------------- */
.ztfr-code { .ztfr-code {
position: relative; position: relative;
background-color: var(--footer-color); background-color: var(--footer-color);
color: var(--light-color); color: var(--light-color);
padding: 1.1rem 1.2rem;
padding: 1rem 1.2rem;
margin: 1rem 0; margin: 1rem 0;
border-radius: 6px;
border-radius: 0;
border: 1px solid rgba(248, 248, 242, 0.08);
border-left: 4px solid var(--hover-color);
max-width: 100%; max-width: 100%;
overflow-x: auto; overflow-x: auto;
font-family: var(--secondary-font); font-family: var(--secondary-font);
font-size: 0.870rem; font-size: 0.85rem;
line-height: 1.6; line-height: 1.6;
font-weight: 400; font-weight: 400;
border: 1px solid rgba(248, 248, 242, 0.08);
box-shadow: none;
} }
/* ------------------------------------------------------------------------- /* -------------------------------------------------------------------------
+143 -37
View File
@@ -1,6 +1,21 @@
(function () { (function () {
'use strict'; 'use strict';
/**
* Escape HTML before saving it into the code block markup.
*
* @param {string} text Raw code.
* @returns {string} Escaped code.
*/
function escapeHtml(text) {
return String(text)
.replace(/&/g, '&')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
}
/** /**
* Gutenberg block * Gutenberg block
*/ */
@@ -16,10 +31,114 @@
const element = window.wp.element; const element = window.wp.element;
const i18n = window.wp.i18n; const i18n = window.wp.i18n;
const blockEditor = window.wp.blockEditor; const blockEditor = window.wp.blockEditor;
const components = window.wp.components;
const el = element.createElement; const el = element.createElement;
const __ = i18n.__; const __ = i18n.__;
const PlainText = blockEditor.PlainText; const PlainText = blockEditor.PlainText;
const Button = components.Button;
const Modal = components.Modal;
const TextareaControl = components.TextareaControl;
const useState = element.useState;
const useEffect = element.useEffect;
const Fragment = element.Fragment;
function EditCodeBlock(props) {
const content = props.attributes.content || '';
const setAttributes = props.setAttributes;
const state = useState(false);
const isDialogOpen = state[0];
const setDialogOpen = state[1];
function updateCode(value) {
setAttributes({ content: value });
}
useEffect(function () {
if (!isDialogOpen) {
return;
}
window.setTimeout(function () {
const textarea = document.querySelector('.ztfr-code__modal-textarea textarea');
if (textarea) {
textarea.focus();
textarea.setSelectionRange(textarea.value.length, textarea.value.length);
}
}, 50);
}, [isDialogOpen]);
return el(
Fragment,
null,
el(
'div',
{
className: 'ztfr-code is-editor-preview',
'data-language': 'yaml'
},
el(
'div',
{ className: 'ztfr-code__editor-actions' },
el(
Button,
{
variant: 'secondary',
onClick: function () {
setDialogOpen(true);
}
},
__('Edit code', 'zeitfresser')
)
),
el(
'pre',
{ className: 'language-yaml' },
el(PlainText, {
tagName: 'code',
className: 'language-yaml',
value: content,
placeholder: __('Write or paste YAML code here…', 'zeitfresser'),
onChange: updateCode
})
)
),
isDialogOpen &&
el(
Modal,
{
title: __('Edit code block', 'zeitfresser'),
onRequestClose: function () {
setDialogOpen(false);
},
className: 'ztfr-code__modal'
},
el(TextareaControl, {
label: __('Code', 'zeitfresser'),
value: content,
onChange: updateCode,
help: __('Paste your YAML code here. Indentation and line breaks are preserved.', 'zeitfresser'),
rows: 18,
className: 'ztfr-code__modal-textarea'
}),
el(
'div',
{ className: 'ztfr-code__modal-actions' },
el(
Button,
{
variant: 'primary',
onClick: function () {
setDialogOpen(false);
}
},
__('Done', 'zeitfresser')
)
)
)
);
}
blocks.registerBlockType('ztfr/code-block', { blocks.registerBlockType('ztfr/code-block', {
title: __('Code', 'zeitfresser'), title: __('Code', 'zeitfresser'),
@@ -36,30 +155,7 @@
} }
}, },
edit: function (props) { edit: EditCodeBlock,
const content = props.attributes.content || '';
return el(
'div',
{
className: 'ztfr-code is-editor-preview',
'data-language': 'yaml'
},
el(
'pre',
{ className: 'language-yaml' },
el(PlainText, {
tagName: 'code',
className: 'language-yaml',
value: content,
placeholder: __('Write or paste YAML code here…', 'zeitfresser'),
onChange: function (value) {
props.setAttributes({ content: value });
}
})
)
);
},
save: function (props) { save: function (props) {
const content = props.attributes.content || ''; const content = props.attributes.content || '';
@@ -81,19 +177,23 @@
* Classic Editor TinyMCE button * Classic Editor TinyMCE button
*/ */
if (window.tinymce && window.tinymce.PluginManager) { if (window.tinymce && window.tinymce.PluginManager) {
function escapeHtml(text) {
return String(text)
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#039;');
}
window.tinymce.PluginManager.add('ztfr_code_block', function (editor) { window.tinymce.PluginManager.add('ztfr_code_block', function (editor) {
function insertCodeBlock() { function insertCodeBlockFromDialog() {
const selectedText = editor.selection.getContent({ format: 'text' }); editor.windowManager.open({
const code = selectedText || 'your_key: your_value'; title: 'Insert code block',
body: [
{
type: 'textbox',
name: 'code',
label: 'Code',
multiline: true,
minWidth: 700,
minHeight: 350,
value: ''
}
],
onsubmit: function (event) {
const code = event.data.code || 'your_key: your_value';
const safeCode = escapeHtml(code); const safeCode = escapeHtml(code);
editor.insertContent( editor.insertContent(
@@ -101,12 +201,18 @@
safeCode + safeCode +
'</code></pre><p></p>' '</code></pre><p></p>'
); );
editor.focus();
return true;
}
});
} }
editor.addButton('ztfr_code_block', { editor.addButton('ztfr_code_block', {
text: 'Code', text: 'Code',
icon: false, icon: false,
onclick: insertCodeBlock onclick: insertCodeBlockFromDialog
}); });
}); });
} }
+33 -518
View File
@@ -27,82 +27,38 @@ if ( ! defined( 'ZEITFRESSER_IMAGE_OPTIMIZATION_VERSION' ) ) {
* Customizer * Customizer
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
*/ */
require get_template_directory() . '/inc/customizer/core-settings.php'; require_once get_template_directory() . '/inc/customizer/core-settings.php';
require get_template_directory() . '/inc/customizer/general-settings.php'; require_once get_template_directory() . '/inc/customizer/general-settings.php';
require get_template_directory() . '/inc/customizer/layout-settings.php'; require_once get_template_directory() . '/inc/customizer/layout-settings.php';
require get_template_directory() . '/inc/customizer/toc-settings.php'; require_once get_template_directory() . '/inc/customizer/toc-settings.php';
require get_template_directory() . '/inc/customizer/social-settings.php'; require_once get_template_directory() . '/inc/customizer/social-settings.php';
require get_template_directory() . '/inc/customizer/image-optimizer-settings.php'; require_once get_template_directory() . '/inc/customizer/image-optimizer-settings.php';
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Utilities * Utilities
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
*/ */
require get_template_directory() . '/inc/utilities/helpers.php'; require_once get_template_directory() . '/inc/utilities/helpers.php';
require get_template_directory() . '/inc/utilities/template-tags.php'; require_once get_template_directory() . '/inc/utilities/template-tags.php';
require get_template_directory() . '/inc/utilities/template-functions.php'; require_once get_template_directory() . '/inc/utilities/template-functions.php';
require get_template_directory() . '/inc/utilities/pagination.php'; require_once get_template_directory() . '/inc/utilities/pagination.php';
require get_template_directory() . '/inc/utilities/toc.php'; require_once get_template_directory() . '/inc/utilities/toc.php';
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Tools * Tools
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
*/ */
require get_template_directory() . '/inc/tools/image-optimizer.php'; require_once get_template_directory() . '/inc/tools/image-optimizer.php';
require get_template_directory() . '/inc/tools/code-block.php'; require_once get_template_directory() . '/inc/tools/code-block.php';
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
* Upload Handling (Original File Tracking) * Performance
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
*/ */
function zeitfresser_capture_original_upload( $upload, $context ) { require_once get_template_directory() . '/inc/performance/performance.php';
if ( empty( $upload['file'] ) ) {
return $upload;
}
// Store temporarily (request-scoped)
$GLOBALS['zeitfresser_last_uploaded_file'] = $upload['file'];
return $upload;
}
add_filter( 'wp_handle_upload', 'zeitfresser_capture_original_upload', 10, 2 );
/**
* Persist original file path to attachment meta
*/
function zeitfresser_store_original_file( $attachment_id ) {
if ( ! wp_attachment_is_image( $attachment_id ) ) {
return;
}
if ( empty( $GLOBALS['zeitfresser_last_uploaded_file'] ) ) {
return;
}
$file = $GLOBALS['zeitfresser_last_uploaded_file'];
// Safety: ensure file still exists
if ( ! file_exists( $file ) ) {
return;
}
// Prevent overwrite if already set
if ( get_post_meta( $attachment_id, '_zeitfresser_original_file', true ) ) {
return;
}
update_post_meta(
$attachment_id,
'_zeitfresser_original_file',
$file
);
}
add_action( 'add_attachment', 'zeitfresser_store_original_file' );
/** /**
* ------------------------------------------------------------------------ * ------------------------------------------------------------------------
@@ -117,6 +73,10 @@ function zeitfresser_setup() {
add_theme_support( 'title-tag' ); add_theme_support( 'title-tag' );
add_theme_support( 'post-thumbnails' ); add_theme_support( 'post-thumbnails' );
// Editor Styles
add_theme_support( 'editor-styles' );
add_editor_style( 'assets/css/editor.css' );
add_theme_support( 'html5', array( add_theme_support( 'html5', array(
'search-form', 'search-form',
'comment-form', 'comment-form',
@@ -192,7 +152,9 @@ add_action( 'widgets_init', 'zeitfresser_widgets_init' );
*/ */
function zeitfresser_scripts() { function zeitfresser_scripts() {
// Base stylesheet (theme root) /**
* Base stylesheet
*/
wp_enqueue_style( wp_enqueue_style(
'zeitfresser', 'zeitfresser',
get_template_directory_uri() . '/style.css', get_template_directory_uri() . '/style.css',
@@ -202,14 +164,16 @@ function zeitfresser_scripts() {
: ZEITFRESSER_VERSION : ZEITFRESSER_VERSION
); );
// Styles /**
* Additional styles (versioned helper)
*/
$fonts = zeitfresser_asset_versioned('/css/fonts.css'); $fonts = zeitfresser_asset_versioned('/css/fonts.css');
$colors = zeitfresser_asset_versioned('/css/colors.css'); $colors = zeitfresser_asset_versioned('/css/colors.css');
wp_enqueue_style( wp_enqueue_style(
'zeitfresser-fonts', 'zeitfresser-fonts',
$fonts['url'], $fonts['url'],
[], ['zeitfresser'],
$fonts['version'] $fonts['version']
); );
@@ -220,7 +184,9 @@ function zeitfresser_scripts() {
$colors['version'] $colors['version']
); );
// Scripts /**
* Scripts
*/
$nav = zeitfresser_asset_versioned('/js/navigation.js'); $nav = zeitfresser_asset_versioned('/js/navigation.js');
$scripts = zeitfresser_asset_versioned('/js/scripts.js'); $scripts = zeitfresser_asset_versioned('/js/scripts.js');
@@ -235,467 +201,16 @@ function zeitfresser_scripts() {
wp_enqueue_script( wp_enqueue_script(
'zeitfresser-scripts', 'zeitfresser-scripts',
$scripts['url'], $scripts['url'],
[], ['zeitfresser-navigation'],
$scripts['version'], $scripts['version'],
true true
); );
// WordPress native threaded comments /**
* WordPress native threaded comments
*/
if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) { if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
wp_enqueue_script( 'comment-reply' ); wp_enqueue_script( 'comment-reply' );
} }
} }
add_action( 'wp_enqueue_scripts', 'zeitfresser_scripts', 10 ); add_action( 'wp_enqueue_scripts', 'zeitfresser_scripts', 10 );
// Editor Styles
function zeitfresser_editor_styles_setup() {
add_theme_support( 'editor-styles' );
add_editor_style( 'assets/css/editor.css' );
}
add_action( 'after_setup_theme', 'zeitfresser_editor_styles_setup' );
/**
* ------------------------------------------------------------------------
* Performance Tweaks
* ------------------------------------------------------------------------
*/
/**
* ------------------------------------------------------------------------
* Defer non-critical JavaScript
* ------------------------------------------------------------------------
*
* Prevents JS from blocking page rendering.
*/
function zeitfresser_defer_scripts( $tag, $handle, $src ) {
$defer_scripts = array(
'zeitfresser-navigation',
'zeitfresser-scripts',
);
if ( in_array( $handle, $defer_scripts, true ) ) {
return str_replace( ' src=', ' defer src=', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'zeitfresser_defer_scripts', 10, 3 );
/**
* ------------------------------------------------------------------------
* Image Loading Optimization (LCP + Lazy Loading)
* ------------------------------------------------------------------------
*
* Ensures the first visible image loads immediately (LCP),
* while all other images are lazy-loaded for performance.
*/
function zeitfresser_optimize_image_attributes( $attr, $attachment, $size ) {
static $is_first = true;
if ( ! is_admin() ) {
if ( $is_first ) {
// First image (critical for LCP)
$attr['loading'] = 'eager';
$is_first = false;
} else {
// All other images
$attr['loading'] = 'lazy';
}
// Improve decoding performance
$attr['decoding'] = 'async';
}
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'zeitfresser_optimize_image_attributes', 10, 3 );
/**
* Lower the threshold for WordPress scaled originals when auto optimization is enabled.
*
* When automatic optimization is disabled, original uploads should remain untouched.
*
* @return int|false
*/
function zeitfresser_big_image_size_threshold() {
$auto_enabled = get_theme_mod( 'ztfr_auto_optimize', true );
$force_enabled = ! empty( $GLOBALS['zeitfresser_force_image_optimization'] );
if ( ! $auto_enabled && ! $force_enabled ) {
return false;
}
return 1800;
}
add_filter( 'big_image_size_threshold', 'zeitfresser_big_image_size_threshold' );
/**
* Skip generating oversized core intermediate sizes we do not use.
*
* @param array $sizes Registered intermediate sizes.
* @return array
*/
function zeitfresser_filter_intermediate_image_sizes( $sizes ) {
$auto_enabled = get_theme_mod( 'ztfr_auto_optimize', true );
$force_enabled = ! empty( $GLOBALS['zeitfresser_force_image_optimization'] );
if ( ! $auto_enabled && ! $force_enabled ) {
return $sizes;
}
unset(
$sizes['1536x1536'],
$sizes['2048x2048']
);
return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'zeitfresser_filter_intermediate_image_sizes' );
/**
* Improve attachment image attributes for layout stability and fetch priority.
*
* @param array $attr Image markup attributes.
* @param WP_Post $attachment Attachment post object.
* @param string|array $size Requested image size.
* @return array
*/
function zeitfresser_improve_attachment_dimensions( $attr, $attachment, $size ) {
if ( empty( $attr['width'] ) || empty( $attr['height'] ) ) {
$metadata = wp_get_attachment_metadata( $attachment->ID );
if ( is_array( $metadata ) && ! empty( $metadata['width'] ) && ! empty( $metadata['height'] ) ) {
if ( empty( $attr['width'] ) ) {
$attr['width'] = (int) $metadata['width'];
}
if ( empty( $attr['height'] ) ) {
$attr['height'] = (int) $metadata['height'];
}
}
}
if ( empty( $attr['fetchpriority'] ) && ! is_admin() && ! is_feed() ) {
static $did_set_high_priority = false;
if ( ! $did_set_high_priority && is_singular() ) {
$attr['fetchpriority'] = 'high';
$did_set_high_priority = true;
}
}
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'zeitfresser_improve_attachment_dimensions', 11, 3 );
/**
* ------------------------------------------------------------------------
* Preload critical fonts
* ------------------------------------------------------------------------
*
* Preloads only the fonts that are needed for initial rendering
* (headings + body text). This improves LCP and avoids render delays.
*/
function zeitfresser_preload_fonts() {
?>
<!-- Critical Fonts Only -->
<link rel="preload" href="<?php echo zeitfresser_asset('/fonts/oswald-400.woff2'); ?>" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="<?php echo zeitfresser_asset('/fonts/oswald-700.woff2'); ?>" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="<?php echo zeitfresser_asset('/fonts/roboto-400.woff2'); ?>" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="<?php echo zeitfresser_asset('/fonts/roboto-500.woff2'); ?>" as="font" type="font/woff2" crossorigin>
<?php
}
add_action('wp_head', 'zeitfresser_preload_fonts', 0);
/**
* Optimize font loading with preconnect
*/
add_filter( 'wp_resource_hints', function( $urls, $relation_type ) {
if ( 'preconnect' === $relation_type ) {
$urls[] = [
'href' => get_template_directory_uri(),
'crossorigin' => 'anonymous',
];
}
return $urls;
}, 10, 2 );
/**
* ------------------------------------------------------------------------
* Critical CSS (inline for faster first render)
* ------------------------------------------------------------------------
*
* We inline only the minimal CSS required for initial layout.
* This ensures the page structure renders immediately without
* waiting for the full stylesheet.
*/
function zeitfresser_inline_critical_css() {
?>
<style>
body {
margin: 0;
background: #1e1f29;
}
.container {
max-width: var(--container-width, 1140px);
margin: 0 auto;
padding: 0 70px;
}
@media (max-width: 800px) {
.container {
padding: 0 20px;
}
}
.custom-grid-view {
display: grid;
}
header.site-header {
background: var(--light-color);
}
</style>
<?php
}
add_action('wp_head', 'zeitfresser_inline_critical_css', 1);
function zeitfresser_performance_setup() {
if ( ! is_admin() ) {
wp_deregister_script( 'wp-embed' );
}
}
add_action( 'wp_enqueue_scripts', 'zeitfresser_performance_setup', 100 );
function zeitfresser_cleanup_wp_head() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'wp_generator' );
}
add_action( 'init', 'zeitfresser_cleanup_wp_head' );
/**
* Convert generated JPEG and PNG files to AVIF/WebP when enabled.
*
* Auto optimization can be disabled for uploads via Customizer.
* Manual optimization may still force conversion through a request-scoped flag.
*
* @param array $formats Output format map.
* @return array
*/
function zeitfresser_image_output_format( $formats ) {
$auto_enabled = get_theme_mod( 'ztfr_auto_optimize', true );
$force_enabled = ! empty( $GLOBALS['zeitfresser_force_image_optimization'] );
if ( ! $auto_enabled && ! $force_enabled ) {
return $formats;
}
if ( function_exists( 'wp_image_editor_supports' ) ) {
// Prefer AVIF if supported.
if ( wp_image_editor_supports( array( 'mime_type' => 'image/avif' ) ) ) {
$formats['image/jpeg'] = 'image/avif';
$formats['image/png'] = 'image/avif';
// Fallback to WebP.
} elseif ( wp_image_editor_supports( array( 'mime_type' => 'image/webp' ) ) ) {
$formats['image/jpeg'] = 'image/webp';
$formats['image/png'] = 'image/webp';
}
}
return $formats;
}
add_filter( 'image_editor_output_format', 'zeitfresser_image_output_format' );
/**
* Mark images as optimized only when optimization is actually active.
*
* @param array $metadata Attachment metadata.
* @param int $attachment_id Attachment ID.
* @return array
*/
function zeitfresser_mark_new_images_optimized( $metadata, $attachment_id ) {
if ( ! wp_attachment_is_image( $attachment_id ) ) {
return $metadata;
}
$auto_enabled = get_theme_mod( 'ztfr_auto_optimize', true );
$force_enabled = ! empty( $GLOBALS['zeitfresser_force_image_optimization'] );
if ( ! $auto_enabled && ! $force_enabled ) {
return $metadata;
}
update_post_meta(
$attachment_id,
'_zeitfresser_media_optimized_version',
ZEITFRESSER_IMAGE_OPTIMIZATION_VERSION
);
return $metadata;
}
add_filter( 'wp_generate_attachment_metadata', 'zeitfresser_mark_new_images_optimized', 20, 2 );
/**
* Auto Optimize Hook
*/
add_filter(
'wp_generate_attachment_metadata',
'zeitfresser_auto_optimize_on_upload',
15,
2
);
function zeitfresser_auto_optimize_on_upload( $metadata, $attachment_id ) {
// Only images
if ( ! wp_attachment_is_image( $attachment_id ) ) {
return $metadata;
}
// Feature toggle
if ( ! get_theme_mod( 'ztfr_auto_optimize', true ) ) {
return $metadata;
}
$file = get_attached_file( $attachment_id );
if ( ! $file || ! file_exists( $file ) ) {
return $metadata;
}
// DO NOT overwrite captured original
if ( ! get_post_meta( $attachment_id, '_zeitfresser_original_file', true ) ) {
update_post_meta( $attachment_id, '_zeitfresser_original_file', $file );
}
// Mark optimized (IMPORTANT: no re-trigger here)
update_post_meta(
$attachment_id,
'_zeitfresser_media_optimized_version',
ZEITFRESSER_IMAGE_OPTIMIZATION_VERSION
);
return $metadata;
}
/**
* Auto Delete Hook
*/
add_filter(
'wp_generate_attachment_metadata',
'zeitfresser_auto_delete_original_after_upload',
30,
2
);
function zeitfresser_auto_delete_original_after_upload( $metadata, $attachment_id ) {
if ( ! wp_attachment_is_image( $attachment_id ) ) {
return $metadata;
}
$auto_enabled = get_theme_mod( 'ztfr_auto_optimize', true );
$delete_enabled = get_theme_mod( 'ztfr_auto_delete', false );
if ( ! $auto_enabled || ! $delete_enabled ) {
return $metadata;
}
$original = get_post_meta(
$attachment_id,
'_zeitfresser_original_file',
true
);
if ( ! $original ) {
return $metadata;
}
$ext = strtolower( pathinfo( $original, PATHINFO_EXTENSION ) );
// Skip modern formats
if ( in_array( $ext, [ 'webp', 'avif' ], true ) ) {
update_post_meta( $attachment_id, '_zeitfresser_original_deleted', 1 );
return $metadata;
}
// 🔥 Wenn nichts mehr existiert → fertig
if ( ! zeitfresser_original_family_exists( $attachment_id, $original ) ) {
update_post_meta( $attachment_id, '_zeitfresser_original_deleted', 1 );
return $metadata;
}
// 🔥 HIER passiert der Fix
zeitfresser_delete_original_family_files( $attachment_id, $original );
// Final check
if ( ! zeitfresser_original_family_exists( $attachment_id, $original ) ) {
update_post_meta( $attachment_id, '_zeitfresser_original_deleted', 1 );
}
return $metadata;
}
/**
* Keep generated image quality balanced for file size and visual fidelity.
*
* @param int $quality Proposed image quality.
* @param string $mime_type Image mime type.
* @return int
*/
function zeitfresser_image_quality( $quality, $mime_type = 'image/jpeg' ) {
$auto_enabled = get_theme_mod( 'ztfr_auto_optimize', true );
$force_enabled = ! empty( $GLOBALS['zeitfresser_force_image_optimization'] );
if ( ! $auto_enabled && ! $force_enabled ) {
return $quality;
}
return match ($mime_type) {
'image/avif' => 50,
'image/webp' => 75,
default => 82,
};
}
add_filter( 'wp_editor_set_quality', 'zeitfresser_image_quality', 10, 2 );
/**
* Improve responsive image sizes attribute.
*
* @param string $sizes Existing sizes attribute.
* @param array $size Requested image size.
* @return string
*/
function zeitfresser_responsive_image_sizes( $sizes, $size ) {
// Single post content
if ( is_singular() ) {
return '(max-width: 768px) 100vw, (max-width: 1200px) 720px, 720px';
}
// Archive / blog overview
if ( is_home() || is_front_page() || is_archive() || is_search() ) {
return '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 400px';
}
return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'zeitfresser_responsive_image_sizes', 10, 2 );
+236
View File
@@ -0,0 +1,236 @@
<?php
/**
* Performance tweaks.
*
* @package Zeitfresser
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
/**
* ------------------------------------------------------------------------
* Defer non-critical JavaScript
* ------------------------------------------------------------------------
*
* Prevents JS from blocking page rendering.
*/
function zeitfresser_defer_scripts( $tag, $handle, $src ) {
$defer_scripts = array(
'zeitfresser-navigation',
'zeitfresser-scripts',
);
if ( in_array( $handle, $defer_scripts, true ) ) {
return str_replace( ' src=', ' defer src=', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'zeitfresser_defer_scripts', 10, 3 );
/**
* ------------------------------------------------------------------------
* Image Loading Optimization (LCP + Lazy Loading)
* ------------------------------------------------------------------------
*
* Ensures the first visible image loads immediately (LCP),
* while all other images are lazy-loaded for performance.
*/
function zeitfresser_optimize_image_attributes( $attr, $attachment, $size ) {
static $is_first = true;
if ( ! is_admin() ) {
if ( $is_first ) {
// First image (critical for LCP)
$attr['loading'] = 'eager';
$is_first = false;
} else {
// All other images
$attr['loading'] = 'lazy';
}
// Improve decoding performance
$attr['decoding'] = 'async';
}
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'zeitfresser_optimize_image_attributes', 10, 3 );
/**
* Lower the threshold for WordPress scaled originals when auto optimization is enabled.
*
* When automatic optimization is disabled, original uploads should remain untouched.
*
* @return int|false
*/
function zeitfresser_big_image_size_threshold() {
$auto_enabled = get_theme_mod( 'ztfr_auto_optimize', true );
$force_enabled = ! empty( $GLOBALS['zeitfresser_force_image_optimization'] );
if ( ! $auto_enabled && ! $force_enabled ) {
return false;
}
return 1800;
}
add_filter( 'big_image_size_threshold', 'zeitfresser_big_image_size_threshold' );
/**
* Skip generating oversized core intermediate sizes we do not use.
*
* @param array $sizes Registered intermediate sizes.
* @return array
*/
function zeitfresser_filter_intermediate_image_sizes( $sizes ) {
$auto_enabled = get_theme_mod( 'ztfr_auto_optimize', true );
$force_enabled = ! empty( $GLOBALS['zeitfresser_force_image_optimization'] );
if ( ! $auto_enabled && ! $force_enabled ) {
return $sizes;
}
unset(
$sizes['1536x1536'],
$sizes['2048x2048']
);
return $sizes;
}
add_filter( 'intermediate_image_sizes_advanced', 'zeitfresser_filter_intermediate_image_sizes' );
/**
* Improve attachment image attributes for layout stability and fetch priority.
*
* @param array $attr Image markup attributes.
* @param WP_Post $attachment Attachment post object.
* @param string|array $size Requested image size.
* @return array
*/
function zeitfresser_improve_attachment_dimensions( $attr, $attachment, $size ) {
if ( empty( $attr['width'] ) || empty( $attr['height'] ) ) {
$metadata = wp_get_attachment_metadata( $attachment->ID );
if ( is_array( $metadata ) && ! empty( $metadata['width'] ) && ! empty( $metadata['height'] ) ) {
if ( empty( $attr['width'] ) ) {
$attr['width'] = (int) $metadata['width'];
}
if ( empty( $attr['height'] ) ) {
$attr['height'] = (int) $metadata['height'];
}
}
}
if ( empty( $attr['fetchpriority'] ) && ! is_admin() && ! is_feed() ) {
static $did_set_high_priority = false;
if ( ! $did_set_high_priority && is_singular() ) {
$attr['fetchpriority'] = 'high';
$did_set_high_priority = true;
}
}
return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'zeitfresser_improve_attachment_dimensions', 11, 3 );
/**
* ------------------------------------------------------------------------
* Preload critical fonts
* ------------------------------------------------------------------------
*
* Preloads only the fonts that are needed for initial rendering
* (headings + body text). This improves LCP and avoids render delays.
*/
function zeitfresser_preload_fonts() {
?>
<!-- Critical Fonts Only -->
<link rel="preload" href="<?php echo zeitfresser_asset('/fonts/oswald-400.woff2'); ?>" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="<?php echo zeitfresser_asset('/fonts/oswald-700.woff2'); ?>" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="<?php echo zeitfresser_asset('/fonts/roboto-400.woff2'); ?>" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="<?php echo zeitfresser_asset('/fonts/roboto-500.woff2'); ?>" as="font" type="font/woff2" crossorigin>
<?php
}
add_action('wp_head', 'zeitfresser_preload_fonts', 0);
/**
* Optimize font loading with preconnect
*/
add_filter( 'wp_resource_hints', function( $urls, $relation_type ) {
if ( 'preconnect' === $relation_type ) {
$urls[] = [
'href' => get_template_directory_uri(),
'crossorigin' => 'anonymous',
];
}
return $urls;
}, 10, 2 );
/**
* ------------------------------------------------------------------------
* Critical CSS (inline for faster first render)
* ------------------------------------------------------------------------
*
* We inline only the minimal CSS required for initial layout.
* This ensures the page structure renders immediately without
* waiting for the full stylesheet.
*/
function zeitfresser_inline_critical_css() {
?>
<style>
body {
margin: 0;
background: #1e1f29;
}
.container {
max-width: var(--container-width, 1140px);
margin: 0 auto;
padding: 0 70px;
}
@media (max-width: 800px) {
.container {
padding: 0 20px;
}
}
.custom-grid-view {
display: grid;
}
header.site-header {
background: var(--light-color);
}
</style>
<?php
}
add_action('wp_head', 'zeitfresser_inline_critical_css', 1);
function zeitfresser_performance_setup() {
if ( ! is_admin() ) {
wp_deregister_script( 'wp-embed' );
}
}
add_action( 'wp_enqueue_scripts', 'zeitfresser_performance_setup', 100 );
function zeitfresser_cleanup_wp_head() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'wp_head', 'rsd_link' );
remove_action( 'wp_head', 'wlwmanifest_link' );
remove_action( 'wp_head', 'wp_generator' );
}
add_action( 'init', 'zeitfresser_cleanup_wp_head' );
+32
View File
@@ -16,6 +16,34 @@ if ( ! defined( 'ABSPATH' ) ) {
exit; exit;
} }
/**
* Check if current post content contains code blocks.
*
* @return bool
*/
function ztfr_has_code_block() {
if ( is_admin() ) {
return false;
}
if ( ! is_singular() ) {
return false;
}
global $post;
if ( ! isset( $post ) || empty( $post->post_content ) ) {
return false;
}
if ( has_block( 'ztfr/code-block', $post ) ) {
return true;
}
return false !== strpos( $post->post_content, '<pre' );
}
/** /**
* Get asset version from file modification time. * Get asset version from file modification time.
* *
@@ -41,6 +69,10 @@ function ztfr_enqueue_code_assets() {
return; return;
} }
if ( ! ztfr_has_code_block() ) {
return;
}
$code_css_version = ztfr_code_asset_version( '/assets/css/code.css' ); $code_css_version = ztfr_code_asset_version( '/assets/css/code.css' );
$prism_version = ztfr_code_asset_version( '/assets/js/prism.js' ); $prism_version = ztfr_code_asset_version( '/assets/js/prism.js' );
$code_js_version = ztfr_code_asset_version( '/assets/js/code-block.js' ); $code_js_version = ztfr_code_asset_version( '/assets/js/code-block.js' );
+266
View File
@@ -9,6 +9,272 @@ if ( ! defined( 'ABSPATH' ) ) {
exit; exit;
} }
/**
* ------------------------------------------------------------------------
* Upload Handling (Original File Tracking)
* ------------------------------------------------------------------------
*/
function zeitfresser_capture_original_upload( $upload, $context ) {
if ( empty( $upload['file'] ) ) {
return $upload;
}
// Store temporarily (request-scoped)
$GLOBALS['zeitfresser_last_uploaded_file'] = $upload['file'];
return $upload;
}
add_filter( 'wp_handle_upload', 'zeitfresser_capture_original_upload', 10, 2 );
/**
* Persist original file path to attachment meta
*/
function zeitfresser_store_original_file( $attachment_id ) {
if ( ! wp_attachment_is_image( $attachment_id ) ) {
return;
}
if ( empty( $GLOBALS['zeitfresser_last_uploaded_file'] ) ) {
return;
}
$file = $GLOBALS['zeitfresser_last_uploaded_file'];
// Safety: ensure file still exists
if ( ! file_exists( $file ) ) {
return;
}
// Prevent overwrite if already set
if ( get_post_meta( $attachment_id, '_zeitfresser_original_file', true ) ) {
return;
}
update_post_meta(
$attachment_id,
'_zeitfresser_original_file',
$file
);
}
add_action( 'add_attachment', 'zeitfresser_store_original_file' );
/**
* Convert generated JPEG and PNG files to AVIF/WebP when enabled.
*
* Auto optimization can be disabled for uploads via Customizer.
* Manual optimization may still force conversion through a request-scoped flag.
*
* @param array $formats Output format map.
* @return array
*/
function zeitfresser_image_output_format( $formats ) {
$auto_enabled = get_theme_mod( 'ztfr_auto_optimize', true );
$force_enabled = ! empty( $GLOBALS['zeitfresser_force_image_optimization'] );
if ( ! $auto_enabled && ! $force_enabled ) {
return $formats;
}
if ( function_exists( 'wp_image_editor_supports' ) ) {
// Prefer AVIF if supported.
if ( wp_image_editor_supports( array( 'mime_type' => 'image/avif' ) ) ) {
$formats['image/jpeg'] = 'image/avif';
$formats['image/png'] = 'image/avif';
// Fallback to WebP.
} elseif ( wp_image_editor_supports( array( 'mime_type' => 'image/webp' ) ) ) {
$formats['image/jpeg'] = 'image/webp';
$formats['image/png'] = 'image/webp';
}
}
return $formats;
}
add_filter( 'image_editor_output_format', 'zeitfresser_image_output_format' );
/**
* Mark images as optimized only when optimization is actually active.
*
* @param array $metadata Attachment metadata.
* @param int $attachment_id Attachment ID.
* @return array
*/
function zeitfresser_mark_new_images_optimized( $metadata, $attachment_id ) {
if ( ! wp_attachment_is_image( $attachment_id ) ) {
return $metadata;
}
$auto_enabled = get_theme_mod( 'ztfr_auto_optimize', true );
$force_enabled = ! empty( $GLOBALS['zeitfresser_force_image_optimization'] );
if ( ! $auto_enabled && ! $force_enabled ) {
return $metadata;
}
update_post_meta(
$attachment_id,
'_zeitfresser_media_optimized_version',
ZEITFRESSER_IMAGE_OPTIMIZATION_VERSION
);
return $metadata;
}
add_filter( 'wp_generate_attachment_metadata', 'zeitfresser_mark_new_images_optimized', 20, 2 );
/**
* Auto Optimize Hook
*/
add_filter(
'wp_generate_attachment_metadata',
'zeitfresser_auto_optimize_on_upload',
15,
2
);
function zeitfresser_auto_optimize_on_upload( $metadata, $attachment_id ) {
// Only images
if ( ! wp_attachment_is_image( $attachment_id ) ) {
return $metadata;
}
// Feature toggle
if ( ! get_theme_mod( 'ztfr_auto_optimize', true ) ) {
return $metadata;
}
$file = get_attached_file( $attachment_id );
if ( ! $file || ! file_exists( $file ) ) {
return $metadata;
}
// DO NOT overwrite captured original
if ( ! get_post_meta( $attachment_id, '_zeitfresser_original_file', true ) ) {
update_post_meta( $attachment_id, '_zeitfresser_original_file', $file );
}
// Mark optimized (IMPORTANT: no re-trigger here)
update_post_meta(
$attachment_id,
'_zeitfresser_media_optimized_version',
ZEITFRESSER_IMAGE_OPTIMIZATION_VERSION
);
return $metadata;
}
/**
* Auto Delete Hook
*/
add_filter(
'wp_generate_attachment_metadata',
'zeitfresser_auto_delete_original_after_upload',
30,
2
);
function zeitfresser_auto_delete_original_after_upload( $metadata, $attachment_id ) {
if ( ! wp_attachment_is_image( $attachment_id ) ) {
return $metadata;
}
$auto_enabled = get_theme_mod( 'ztfr_auto_optimize', true );
$delete_enabled = get_theme_mod( 'ztfr_auto_delete', false );
if ( ! $auto_enabled || ! $delete_enabled ) {
return $metadata;
}
$original = get_post_meta(
$attachment_id,
'_zeitfresser_original_file',
true
);
if ( ! $original ) {
return $metadata;
}
$ext = strtolower( pathinfo( $original, PATHINFO_EXTENSION ) );
// Skip modern formats
if ( in_array( $ext, [ 'webp', 'avif' ], true ) ) {
update_post_meta( $attachment_id, '_zeitfresser_original_deleted', 1 );
return $metadata;
}
// 🔥 Wenn nichts mehr existiert → fertig
if ( ! zeitfresser_original_family_exists( $attachment_id, $original ) ) {
update_post_meta( $attachment_id, '_zeitfresser_original_deleted', 1 );
return $metadata;
}
// 🔥 HIER passiert der Fix
zeitfresser_delete_original_family_files( $attachment_id, $original );
// Final check
if ( ! zeitfresser_original_family_exists( $attachment_id, $original ) ) {
update_post_meta( $attachment_id, '_zeitfresser_original_deleted', 1 );
}
return $metadata;
}
/**
* Keep generated image quality balanced for file size and visual fidelity.
*
* @param int $quality Proposed image quality.
* @param string $mime_type Image mime type.
* @return int
*/
function zeitfresser_image_quality( $quality, $mime_type = 'image/jpeg' ) {
$auto_enabled = get_theme_mod( 'ztfr_auto_optimize', true );
$force_enabled = ! empty( $GLOBALS['zeitfresser_force_image_optimization'] );
if ( ! $auto_enabled && ! $force_enabled ) {
return $quality;
}
return match ($mime_type) {
'image/avif' => 50,
'image/webp' => 75,
default => 82,
};
}
add_filter( 'wp_editor_set_quality', 'zeitfresser_image_quality', 10, 2 );
/**
* Improve responsive image sizes attribute.
*
* @param string $sizes Existing sizes attribute.
* @param array $size Requested image size.
* @return string
*/
function zeitfresser_responsive_image_sizes( $sizes, $size ) {
// Single post content
if ( is_singular() ) {
return '(max-width: 768px) 100vw, (max-width: 1200px) 720px, 720px';
}
// Archive / blog overview
if ( is_home() || is_front_page() || is_archive() || is_search() ) {
return '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 400px';
}
return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'zeitfresser_responsive_image_sizes', 10, 2 );
/** /**
* Register admin page * Register admin page
*/ */
+58 -76
View File
@@ -5,7 +5,7 @@ Author: Zeitfresser
Author URI: https://ztfr.eu/ Author URI: https://ztfr.eu/
Theme URI: https://ztfr.eu/ Theme URI: https://ztfr.eu/
Description: Zeitfresser Wordpress Theme Description: Zeitfresser Wordpress Theme
Version: 2.6 Version: 2.7
Tested up to: 6.2 Tested up to: 6.2
Requires PHP: 7.0 Requires PHP: 7.0
License: GNU General Public License v2 or later License: GNU General Public License v2 or later
@@ -315,6 +315,9 @@ textarea {
background-color: var(--footer-color); background-color: var(--footer-color);
color: var(--light-color); color: var(--light-color);
border-radius: 0;
border: 1px solid rgba(248, 248, 242, 0.08);
padding: 1rem; padding: 1rem;
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@@ -1170,33 +1173,62 @@ header.site-header .social-links svg:hover {
.widget_search .wp-block-search__inside-wrapper { .widget_search .wp-block-search__inside-wrapper {
display: grid; display: grid;
grid-template-columns: 4fr 1fr; grid-template-columns: 1fr auto;
gap: 0; gap: 0;
background: transparent;
border: none;
overflow: hidden;
} }
@media (max-width: 1200px) { .widget_search .wp-block-search__input,
.widget_search .wp-block-search__inside-wrapper { .sidebar .wp-block-search__input {
display: block;
}
}
@media (max-width: 900px) {
.widget_search .wp-block-search__inside-wrapper {
display: grid;
}
}
.widget_search input[type="search"] {
width: 100%; width: 100%;
height: 100%; height: 36px;
padding: 1rem 1.5rem; padding: 0 12px;
border-radius: 0;
background-color: rgba(255,255,255,0.04) !important;
color: var(--light-color);
border: 1px solid rgba(255,255,255,0.1) !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none !important;
transition: border-color 0.2s ease, background-color 0.2s ease;
appearance: none;
}
.widget_search .wp-block-search__input:focus,
.sidebar .wp-block-search__input:focus {
border-color: var(--hover-color) !important;
outline: none !important;
box-shadow: none !important;
}
.widget_search .wp-block-search__input::placeholder,
.sidebar .wp-block-search__input::placeholder {
color: rgba(248,248,242,0.5);
} }
.widget_search input[type="submit"],
.widget_search .wp-block-search__button { .widget_search .wp-block-search__button {
width: 100%; height: 36px;
padding: 1rem 2rem; padding: 0 14px;
border: none;
border-radius: 0;
background-color: var(--footer-color);
color: var(--light-color);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
}
.widget_search .wp-block-search__button:hover {
background-color: var(--hover-color);
color: var(--dark-color);
} }
/* Empty State (404 + Search) */ /* Empty State (404 + Search) */
@@ -1215,9 +1247,12 @@ header.site-header .social-links svg:hover {
.error-404 .page-content, .error-404 .page-content,
.search-no-results .page-content { .search-no-results .page-content {
background-color: var(--footer-color); background-color: var(--footer-color);
border-radius: 0;
border: 1px solid rgba(248, 248, 242, 0.08);
padding: 2rem; padding: 2rem;
margin: 1.5rem auto 0; margin: 1.5rem auto 0;
border-radius: 6px;
max-width: 500px; max-width: 500px;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
@@ -1285,44 +1320,6 @@ header.site-header .social-links svg:hover {
} }
} }
/* Sidebar Search */
.widget_search form {
display: flex;
align-items: center;
height: 32px;
border: 1px solid #4a4d61;
border-radius: 4px;
background-color: #383a4a;
overflow: hidden;
}
.widget_search input[type="search"] {
flex: 1;
padding: 0 10px;
background: transparent;
border: none;
color: var(--light-color);
}
.widget_search button[type="submit"] {
display: flex;
align-items: center;
padding: 0 12px;
height: 100%;
border: none;
background-color: var(--hover-color);
color: var(--dark-color);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
}
.widget_search form:focus-within {
border-color: var(--hover-color);
}
/* Posts and Pages */ /* Posts and Pages */
.sticky { .sticky {
@@ -1661,21 +1658,6 @@ header.page-header h1 {
color: var(--light-color); color: var(--light-color);
} }
/* Readmore KANN WEG? */
.readmore {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-family: var(--primary-font);
}
.readmore svg {
height: 1.2em;
fill: currentColor;
}
/* Header / Footer Meta */ /* Header / Footer Meta */
.info.ihead, .info.ihead,
@@ -1831,7 +1813,7 @@ header.page-header h1 {
} }
.site-footer a { .site-footer a {
color: inherit; /* inherits light-color */ color: inherit;
border-bottom: 1px solid rgba(255,255,255,0.2); border-bottom: 1px solid rgba(255,255,255,0.2);
} }