WordPress Website: Style Guides & Linksammlung

Derzeit nur eine Link Sammlung

Farben auswählen

Bei deiner Konkurrenzanalyse lässt Du Dich am besten hinsichtlich der Farben inspirieren. Wenn Du Dich auf eine Farbe / Farbkombination festgelegt hast kannst Du an der Palette arbeiten. Die Website https://coolors.co/ ↗ kann Dir dabei helfen.

Style Guides und Design Systems

Creating A Style Guide From Scratch (Real Example): https://youtu.be/1GsWDRe2TMI ↗

How To Create a Complete Web Design Style Guide + Template: https://elementor.com/blog/web-design-style-guide/ ↗

Design System Page | Templates | 5Four Digital: https://www.5fourdigital.com/templates/brand-design-system-page-template ↗

Design system: https://design-system-guildelines.webflow.io/#mark ↗

Ganze Webpages in Elementor

Responsive Landing Page Design in 2023 Using Elementor Flexbox (WordPress & Elementor For Beginners): https://youtu.be/zcWnk5I0gBQ ↗

How to Create a Landing Page in WordPress — Proven to Convert!: https://youtu.be/zK25pjjatD4 ↗

Einzelne Bereiche in Elementor

Digital Business Card

https://www.youtube.com/watch?v=d_JX0OsZDIM&list=PLU8kYmlri_r0ZWSE_AmPCXrfIPZ7-Hurj ↗

https://www.youtube.com/watch?v=tqf-d3DoRDE&list=PLU8kYmlri_r0ZWSE_AmPCXrfIPZ7-Hurj&index=3&t=883s ↗

Facebook Ads

Wording for facebook ads: https://youtu.be/UEAeRbhqCLc ↗

Wie schreibe ich einen Blogbeitrag

Ein Blopgbeitrag soltle aus folgenden Elementen bestehen

Überschrift,

Einleitung

Inhaltsverzeichnis

Hauptteil (1500 Wörter+)

VISUELLE Elemente (? Beitragsbild, Bilder im Hauptteil)

Call to Action

Optional: Autorenbox

https://vertus.co/aufbau-blogbeitrag/ ↗

End-To-End Webdesign einer guten webseite mit Elementor

Ferdy erklärt im Jänner 2023 sehr gut (incl. Branding Colors and Fonts) – leider nicht mit dem Hello Elementor Theme und leider anstelle von Elementor Pro verwendet er zusätzliche Plugins: How To Make A WordPress Website 2023 ↗

Code Snippets für das functions.php im Child-Theme

Gewisse Authoren aus der internen WordPress Suche entfernen

Finde zunächst die User IDs (gehe im Admin Panel auf Users und hovere über den entsprechenden Benutzer – ausser dem Admin natürlich – dort bekommst Du die user_id) und füge diese dann in das folgende Skript ein:

<?php
function aal_user_search_filter( $query ) {
  if ( $query->is_search && !is_admin() )
    $query->set( 'author','2, 3, 4' );
  return $query;
}
add_filter( 'pre_get_posts', 'aal_user_search_filter' ); ?>

In diesem Skript sind es dei Benutzer 2, 3 und 4, deren Artikel nicht mehr in der Suche erscheinen sollen.

Gewisse Seiten und Beiträge aus der internen WordPress Suche entfernen

Du solltest dies machen, damit Du administrative Seiten aus dem Suchergebnis entfernen kannst. Dies sind z.B.:

• Newsletterbestätigung

Um alle Seiten zu entfernen musst Du folgendes Script nutzen:

function aal_exclude_pages_from_search_results( $query ) {
    if ( $query->is_main_query() && $query->is_search() && ! is_admin() ) {
        $query->set( 'post_type', array( 'post' ) );
    }    
}
add_action( 'pre_get_posts', 'aal_exclude_pages_from_search_results' );

Wenn Du nur einzelne Seiten aus der Suche raushalten willst musst Du folgendes Script nutzen:

function aal_search_filter( $query ) {
  if ( ! $query->is_admin && $query->is_search && $query->is_main_query() ) {
    $query->set( 'post__not_in', array( 10000,10001,10002) );
  }
}
add_action( 'pre_get_posts', 'aal_search_filter' );

In diesem snippet können die Seiten 10000,10001 und 10002 nicht mehr gefunden werden. Um herauszufinden welche ID ein Post hat musst Du nur den Post bearbeiten und erkennst in der URL die Id.

Erlaube SVG Uploads

Damit muss man vorsichtig umgehen, da mit SVGs auch brute-force oder cross site scripting Attacken gefahren werden können.

Somit: Nur für selbst erstellte SVGs verwenden.

/////////////////////////////////////////////////////////////
// Permit SVG upload
/////////////////////////////////////////////////////////////
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
  $filetype = wp_check_filetype( $filename, $mimes );
  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

function aal_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'aal_mime_types' );

function aal_fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'aal_fix_svg' );

Nützliche Plugins

Duplicate Post (Von Copy Delete Posts)