Avif Bilder nutzen und Schrift kommt später

[ad_1]

Hi!

Erstmal vielen Dank für die vielen Tipps!

Hier findet ihr den aktuellen Zwischenbericht:

"

wp-core

version: 6.2.2
site_language: de_DE
user_language: de_DE
timezone: +00:00
permalink: /%postname%/
https_status: false
multisite: false
user_registration: 0
blog_public: 1
default_comment_status: open
environment_type: production
user_count: 1
dotorg_communication: true wp-paths-sizes wordpress_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app
wordpress_size: 184,34 MB (193292405 bytes)
uploads_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app/wp-content/uploads
uploads_size: 215,25 MB (225710277 bytes)
themes_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app/wp-content/themes
themes_size: 27,39 MB (28717856 bytes)
plugins_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app/wp-content/plugins
plugins_size: 113,92 MB (119457281 bytes)
database_size: 37,48 MB (39305216 bytes)
total_size: 578,39 MB (606483035 bytes) wp-dropins (1) advanced-cache.php: true wp-active-theme name: OceanWP Child Theme (oceanwp-child-theme-master)
version: 1.0
author: OceanWP
author_website:
parent_theme: OceanWP (oceanwp)
theme_features: core-block-patterns, widgets-block-editor, align-wide, wp-block-styles, responsive-embeds, editor-styles, editor-style, menus, post-formats, title-tag, automatic-feed-links, post-thumbnails, custom-header, custom-logo, html5, woocommerce, wc-product-gallery-zoom, wc-product-gallery-lightbox, wc-product-gallery-slider, customize-selective-refresh-widgets, widgets
theme_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app/wp-content/themes/oceanwp-child-theme-master
auto_update: Aktiviert wp-parent-theme name: OceanWP (oceanwp)
version: 3.4.3
author: OceanWP
author_website:
theme_path: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app/wp-content/themes/oceanwp
auto_update: Aktiviert wp-themes-inactive (2) Twenty Twenty-Three: version: 1.1, author: Das WordPress-Team, Automatische Aktualisierungen aktiviert
Twenty Twenty-Two: version: 1.4, author: Das WordPress-Team, Automatische Aktualisierungen aktiviert wp-mu-plugins (1) WordPressSecureMode.php: author: (undefined), version: (undefined) wp-plugins-active (16) Antispam Bee: version: 2.11.3, author: pluginkollektiv, Automatische Aktualisierungen aktiviert
Autoptimize: version: 3.1.7, author: Frank Goossens (futtta), Automatische Aktualisierungen aktiviert
Contact Form 7: version: 5.7.6, author: Takayuki Miyoshi, Automatische Aktualisierungen aktiviert
Custom links in Elementor Image Carousel: version: 1.1.1, author: Charlie Etienne, Automatische Aktualisierungen aktiviert
Disable & Remove Google Fonts: version: 1.5.4, author: Fonts Plugin, Automatische Aktualisierungen aktiviert
Elementor: version: 3.13.2, author: Elementor.com, Automatische Aktualisierungen aktiviert
Limit Login Attempts Reloaded: version: 2.25.16, author: Limit Login Attempts Reloaded, Automatische Aktualisierungen aktiviert
Ocean Extra: version: 2.1.6, author: OceanWP, Automatische Aktualisierungen aktiviert
Ocean Stick Anything: version: 2.0.5, author: OceanWP, Automatische Aktualisierungen aktiviert
Real Cookie Banner (Free): version: 3.6.10, author: devowl.io (latest version: 3.6.11), Automatische Aktualisierungen aktiviert
Strato Assistant: version: 7.3.0, author: Strato, Automatische Aktualisierungen aktiviert
TranslatePress - Multilingual: version: 2.5.3, author: Cozmoslabs, Razvan Mocanu, Madalin Ungureanu, Cristophor Hurduban, Automatische Aktualisierungen aktiviert
UpdraftPlus - Backup/Restore: version: 1.23.4, author: UpdraftPlus.Com, DavidAnderson, Automatische Aktualisierungen aktiviert
WP Super Cache: version: 1.9.4, author: Automattic, Automatische Aktualisierungen aktiviert
Yoast Duplicate Post: version: 4.5, author: Enrico Battocchi & Team Yoast, Automatische Aktualisierungen aktiviert
Yoast SEO: version: 20.7, author: Team Yoast, Automatische Aktualisierungen aktiviert wp-media image_editor: WP_Image_Editor_Imagick
imagick_module_version: 1692
imagemagick_version: ImageMagick 6.9.12-60 Q16 x86_64 17403
imagick_version: 3.5.1
file_uploads: File uploads is turned off
post_max_size: 128M
upload_max_filesize: 128M
max_effective_size: 128 MB
max_file_uploads: 20
imagick_limits:
imagick::RESOURCETYPE_AREA: 4 GB
imagick::RESOURCETYPE_DISK: 9.2233720368548E+18
imagick::RESOURCETYPE_FILE: 192
imagick::RESOURCETYPE_MAP: 4 GB
imagick::RESOURCETYPE_MEMORY: 2 GB
imagick::RESOURCETYPE_THREAD: 1
imagick::RESOURCETYPE_TIME: 9.2233720368548E+18
imagemagick_file_formats: 3FR, 3G2, 3GP, A, AAI, AI, APNG, ART, ARW, AVI, AVS, B, BGR, BGRA, BGRO, BMP, BMP2, BMP3, BRF, C, CAL, CALS, CANVAS, CAPTION, CIN, CIP, CLIP, CMYK, CMYKA, CR2, CR3, CRW, CUR, CUT, DATA, DCM, DCR, DCX, DDS, DFONT, DNG, DPX, DXT1, DXT5, EPDF, EPI, EPS, EPS2, EPS3, EPSF, EPSI, EPT, EPT2, EPT3, ERF, FAX, FILE, FITS, FRACTAL, FTP, FTS, G, G3, G4, GIF, GIF87, GRADIENT, GRAY, GRAYA, GROUP4, H, HALD, HDR, HISTOGRAM, HRZ, HTM, HTML, HTTP, HTTPS, ICB, ICO, ICON, IIQ, INFO, INLINE, IPL, ISOBRL, ISOBRL6, JNG, JNX, JPE, JPEG, JPG, JPS, JSON, K, K25, KDC, LABEL, M, M2V, M4V, MAC, MAGICK, MAP, MASK, MAT, MATTE, MEF, MIFF, MKV, MNG, MONO, MOV, MP4, MPC, MPEG, MPG, MRW, MSL, MSVG, MTV, MVG, NEF, NRW, NULL, O, ORF, OTB, OTF, PAL, PALM, PAM, PANGO, PATTERN, PBM, PCD, PCDS, PCL, PCT, PCX, PDB, PDF, PDFA, PEF, PES, PFA, PFB, PFM, PGM, PGX, PICON, PICT, PIX, PJPEG, PLASMA, PNG, PNG00, PNG24, PNG32, PNG48, PNG64, PNG8, PNM, POCKETMOD, PPM, PS, PS2, PS3, PSB, PSD, PTIF, PWP, R, RADIAL-GRADIENT, RAF, RAS, RAW, RGB, RGBA, RGBO, RGF, RLA, RLE, RMF, RW2, SCR, SCREENSHOT, SCT, SFW, SGI, SHTML, SIX, SIXEL, SPARSE-COLOR, SR2, SRF, STEGANO, SUN, SVG, SVGZ, TEXT, TGA, THUMBNAIL, TIFF, TIFF64, TILE, TIM, TTC, TTF, TXT, UBRL, UBRL6, UIL, UYVY, VDA, VICAR, VID, VIDEO, VIFF, VIPS, VST, WBMP, WEBM, WEBP, WMV, WPG, X3F, XBM, XC, XCF, XPM, XPS, XV, Y, YCbCr, YCbCrA, YUV
gd_version: bundled (2.1.0 compatible)
gd_formats: GIF, JPEG, PNG, WebP, BMP
ghostscript_version: not available wp-server server_architecture: Linux localhost 3.10.0-1160.83.1.el7.x86_64 #1 SMP Linux localhost 3.10.0-1160.83.1.el7.x86_64 #1 SMP Linux localhost 3.10.0-1160.83.1.el7.x86_64 #1 SMP
httpd_software: Apache/2.4.57 (Unix)
php_version: 8.0.28 64bit
php_sapi: cgi-fcgi
max_input_variables: 4000
time_limit: 240
memory_limit: 512M
max_input_time: 60
upload_max_filesize: 128M
php_post_max_size: 128M
curl_version: 7.88.1 OpenSSL/1.1.1t
suhosin: false
imagick_availability: true
pretty_permalinks: true
htaccess_extra_rules: true wp-database extension: mysqli
server_version: 5.7.41-log
client_version: mysqlnd 8.0.28
max_allowed_packet: 67108864
max_connections: 3000 wp-constants WP_HOME: undefined
WP_SITEURL: undefined
WP_CONTENT_DIR: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app/wp-content
WP_PLUGIN_DIR: /mnt/web104/a1/28/511055428/htdocs/STRATO-apps/wordpress_03/app/wp-content/plugins
WP_MEMORY_LIMIT: 40M
WP_MAX_MEMORY_LIMIT: 512M
WP_DEBUG: false
WP_DEBUG_DISPLAY: true
WP_DEBUG_LOG: false
SCRIPT_DEBUG: false
WP_CACHE: true
CONCATENATE_SCRIPTS: undefined
COMPRESS_SCRIPTS: undefined
COMPRESS_CSS: undefined
WP_ENVIRONMENT_TYPE: Nicht definiert
DB_CHARSET: utf8
DB_COLLATE: undefined wp-filesystem wordpress: writable
wp-content: writable
uploads: writable
plugins: writable
themes: writable
mu-plugins: writable "

Also die Schriften habe ich eigentlich so eingebunden wie in der Anleitung. Das Childtheme musste ich nicht mal selbst bauen, das gab es bereits von OceanWP. In diesem Ordner habe ich den Ordner „fonts“ erstellt und die Schriftarten als eot, otf, ttf, woff, woff2 hochgeladen.

Darüber hinaus habe ich im Childtheme Ordner eine style.css und function.php Datei erstellt:

Die style.css:

"

/*
Theme Name: OceanWP Child Theme
Theme URI: 
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: 
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */
@font-face {
font-family: 'roboto-regular';
src: url('fonts/roboto-regular.woff2') format('woff2'),
url('fonts/roboto-regular.woff') format('woff'),
url('fonts/roboto-regular.ttf') format('truetype'),
url('fonts/roboto-regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'opensans-regular';
src: url('fonts/opensans-regular.woff2') format('woff2'),
url('fonts/opensans-regular.woff') format('woff'),
url('fonts/opensans-regular.ttf') format('truetype'),
url('fonts/opensans-regular.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'opensans-light';
src: url('fonts/opensans-light.woff2') format('woff2'),
url('fonts/opensans-light.woff') format('woff'),
url('fonts/opensans-light.ttf') format('truetype'),
url('fonts/opensans-light.eot') format('embedded-opentype');
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'AGaramondPro-BoldItalic';
src: url(./AGaramondPro-BoldItalic.eot);
src: url(./AGaramondPro-BoldItalic.eot?#iefix) format('embedded-opentype'),
url(./AGaramondPro-BoldItalic.ttf) format('truetype'),
url(./AGaramondPro-BoldItalic.woff) format('woff'),
url(./AGaramondPro-BoldItalic.woff2) format('woff2');
font-display: swap;
}

@font-face {
font-family: 'GaramondPremrPro-It';
src: url(./GaramondPremrPro-It.eot);
src: url(./GaramondPremrPro-It.eot?#iefix) format('embedded-opentype'),
url(./GaramondPremrPro-It.ttf) format('truetype'),
url(./GaramondPremrPro-It.woff) format('woff'),
url(./GaramondPremrPro-It.woff2) format('woff2');
font-display: swap;
}
@font-face {
font-family: 'AGaramondPro-Regular';
src: url(./AGaramondPro-Regular.eot);
src: url(./AGaramondPro-Regular.eot?#iefix) format('embedded-opentype'),
url(./AGaramondPro-Regular.ttf) format('truetype'),
url(./AGaramondPro-Regular.woff) format('woff'),
url(./AGaramondPro-Regular.woff2) format('woff2');
font-display: swap;
}
@font-face {
font-family: 'garamondpremrpro-meditcapt';
src: url(./garamondpremrpro-meditcapt.eot);
src: url(./garamondpremrpro-meditcapt.eot?#iefix) format('embedded-opentype'),
url(./garamondpremrpro-meditcapt.ttf) format('truetype'),
url(./garamondpremrpro-meditcapt.woff) format('woff'),
url(./garamondpremrpro-meditcapt.woff2) format('woff2');
font-display: swap;
}
"

(Das „font-display: swap;“ hab ich neu da rein, hab gelesen, dass dann erstmal Systemschriften angezeigt werden, bis die eigentliche Schrift kommt)

Die function.php:

"

<?php

/**

 * OceanWP Child Theme Functions

 *

 * When running a child theme (see 

 * and , you can override certain

 * functions (those wrapped in a function_exists() call) by defining them first

 * in your child theme's functions.php file. The child theme's functions.php

 * file is included before the parent theme's file, so the child theme

 * functions will be used.

 *

 * Text Domain: oceanwp

 * @link 

 *

 */

/**

 * Load the parent style.css file

 *

 * @link 

 */

function oceanwp_child_enqueue_parent_style() {

// Dynamically get version number of the parent stylesheet (lets browsers re-cache your stylesheet when you update the theme).

$theme   = wp_get_theme( 'OceanWP' );

$version = $theme->get( 'Version' );

// Load the stylesheet.

wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'oceanwp-style' ), $version );

}

add_action( 'wp_enqueue_scripts', 'oceanwp_child_enqueue_parent_style' );

// Add custom font to font settings

function ocean_add_custom_fonts() {

return array( 'roboto-regular', 'opensans-regular','opensans-light', 'AGaramondPro-BoldItalic', 'GaramondPremrPro-It', 'AGaramondPro-Regular', 'Garamondpremrpro-medicapt' ); // You can add more then 1 font to the array!

}
"

Seltsam ist, dass bei der Konsole steht: „[Error] Failed to load resource: the server responded with a status of 404 (Not Found) (AGaramondPro-Regular.ttf, line 0)“ und die Schrift allerdings schon angezeigt wird, nur etwas später (also ich glaube „font-display: swap;“ hat schon geholfen).

Lighthouse habe ich gefunden und werde das mal durchgehen. Sobald die Seite zu Ihrer eigenen Domaine umzieht, bekommt das http noch ein s.

Vielen Dank!

  • Diese Antwort wurde geändert vor 6 Stunden, 47 Minuten von melojezzed.
[ad_2]

 

This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer