Während ich mein Premium-Theme fertigstellte, um es zur Überprüfung bei ThemeForest einzureichen, führte ich meine letzten Tests durch und dachte, ich könnte genauso gut einen Beitrag über einige der wichtigsten und allgemeinsten Überprüfungen schreiben, die man vor der Veröffentlichung des Themes durchführen sollte. Ich bin mir sicher, dass es eine Menge Dinge zu überprüfen gibt, aber im Folgenden sind 20 der meiner Meinung nach wichtigsten Überprüfungen aufgeführt, bevor Sie Ihr Theme starten.
Fügen Sie wp_footer und wp_head ein
Das ist etwas ganz Grundlegendes, aber sehr Wichtiges. Stellen Sie sicher, dass Sie den wp_head-Hook in die Datei header.php und Ihren wp_footer-Hook in die Datei footer.php eingefügt haben. Diese Hooks sind sehr wichtig, damit Plugins mit Ihrem Theme funktionieren. Wenn Sie Funktionen hinzufügen, die diese Hooks ergänzen, benötigen Sie diese natürlich auch.
Machen Sie Ihren Screenshot.png
Oft möchte ich mein Design veröffentlichen und vergesse dabei, die grundlegende Datei „screenshot.png“ in das Design einzubinden. Dies ist das Bild, das in Ihrem WP-Adminbereich unter Ihrem Aussehen-Tag angezeigt wird.
Machen Sie im Grunde einen Screenshot Ihres Themes, schneiden Sie ihn auf etwa 300 x 225 Pixel zu, speichern Sie ihn als PNG und nennen Sie ihn „Screenshot“. Legen Sie das Baby dann direkt im Stammverzeichnis Ihres Theme-Ordners ab.
Aktivieren Sie die Kompatibilität mit dem Haupt-WordPress-Theme
Es gibt viele erstaunliche Funktionen in WordPress, die nicht standardmäßig aktiviert sind und mit der Funktion add_theme_support in Ihrem Theme aktiviert werden müssen. Zu diesen Funktionen gehören Post-Miniaturansichten, Titel-Meta-Tag, HTML5-Unterstützung, benutzerdefinierter Header, benutzerdefiniertes Logo usw. Nachfolgend finden Sie ein Beispiel für die Aktivierung dieser Funktionen (beachten Sie, dass Sie sich in den Aktions-Hook after_setup_theme einbinden müssen).
// Add theme support
function themename_add_theme_support() {
add_theme_support( 'post-formats', array( 'aside', 'video', 'image', 'gallery', 'quote' ) );
add_theme_support( 'post-thumbnails' );
add_theme_support( 'automatic-feed-links' );
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
add_theme_support( 'title-tag' );
add_theme_support( 'custom-header' );
add_theme_support( 'custom-logo' );
add_theme_support( 'customize-selective-refresh-widgets' );
}
add_action( 'after_setup_theme', 'themename_add_theme_support' );
Notiz: Im Beispielausschnitt fügen wir nur grundlegende Theme-Unterstützung hinzu, aber für die meisten Funktionen können Sie auch eine Liste von Argumenten übergeben. Für ein benutzerdefiniertes Logo können Sie beispielsweise ein Array mit Breite, Höhe, Kopfzeilentext usw. übergeben. Suchen Sie also unbedingt nach jeder Funktion und prüfen Sie, ob Sie benutzerdefinierte Argumente übergeben möchten.
Stellen Sie sicher, dass die Paginierung funktioniert
Insbesondere wenn Sie benutzerdefinierte Beitragstypen verwenden, ist es wichtig sicherzustellen, dass die Paginierung nicht nur auf Ihrer Blogseite, Kategorien und Tags funktioniert, sondern auch auf benutzerdefinierten Beitragstypdateien und benutzerdefinierten Taxonomien. Schauen Sie sich unseren Leitfaden zum Hinzufügen von Paginierung in WordPress an, wenn Sie nicht wissen, wie.
Legen Sie die WordPress-Menüreservierung fest
Eine der häufigsten Fragen, die ich von Leuten bekomme, ist neben der Frage, wie man seine Bilder einrichtet, die Frage, wie man sein Menü einrichtet. Wenn Sie das Drag-and-Drop-Menüsystem von WP verwenden, ist es immer ideal, einen Fallback für Ihr Menü mit einem Link zum Admin-Panel einzurichten, damit Benutzer sehen können, wie sie Ihr Menü einrichten. Lassen Sie Ihre Benutzer nicht raten!
Schauen Sie sich unsere Anleitung zum Hinzufügen eines Alt-Menüs in WordPress an, wenn Sie nicht wissen, wie das geht.
Warteschlangenskript für Thread-Kommentare
Wenn Benutzer Thread-Kommentare in ihrem WordPress-Adminbereich aktivieren, können andere auf ihre Kommentare in ihrem Blog antworten. Sie haben wahrscheinlich bemerkt, dass einige Themes die Seite neu laden, wenn ein Benutzer auf die Schaltfläche „Antworten“ klickt, was nicht sehr benutzerfreundlich oder professionell ist. Glücklicherweise verfügt WordPress über ein integriertes Skript, sodass Thread-Kommentare funktionieren, ohne dass die Seite neu geladen werden muss. Um es zu aktivieren, fügen Sie einfach den folgenden Code zu Ihrer Datei „functions.php“ hinzu:
Asegúrese de que Javascript se haya agregado correctamente
Es importante incluir Javascript correctamente en sus temas para que no entre en conflicto con ningún complemento. Hace un tiempo escribí una publicación que mostraba cómo agregar Javascript a través de su archivo functions.php. Si aún está agregando su JS en el archivo header.php, asegúrese de leer nuestra publicación sobre Cómo agregar Javascript a WordPress de la manera correcta.
Pruebe su tema en todos los navegadores "principales"
Desafortunadamente, la gente todavía usa navegadores más antiguos como Internet Explorer 10. Si está desarrollando temas de WordPress, es muy importante probarlo en todos los navegadores principales y asegurarse de que se vea bien. Si su sitio se ve mal en Firefox, Safari o IE (no solo verifique en Chrome), es posible que las personas no lo descarguen ni lo compren y, si lo hacen, es posible que obtenga muchos tickets de soporte pidiéndole que arregle el tema y lo haga funcionar . Echa un vistazo a algunos de los mejores sitios de prueba de navegadores a continuación:
Incluir un archivo 404.php
Esto es muy fácil de hacer y también muy importante. Si no incluye un archivo 404.php en su tema cuando un usuario navega por el sitio y termina en una página de error 404, puede mostrar el contenido de su archivo index.php o mostrar una página 404 generada por el servidor que no lo hace. coincidir con el diseño de su sitio o proporcionar enlaces útiles al visitante. Esto puede ser malo para el SEO, pero también es muy poco amigable para el usuario. Personalmente me gusta incluir un título, una lista de páginas y tal vez incluso mi formulario de búsqueda. Realmente depende de usted lo que incluya, pero asegúrese de tener el archivo.
Cree páginas individuales para sus tipos de publicaciones
Si tiene algún tipo de publicación en su tema, debe crear páginas individuales para cada una, de lo contrario, se usará el archivo single.php predeterminado. y todos los tipos de publicaciones se verán como un blog. Por ejemplo, si tiene un tipo de publicación personalizada de cartera, debe tener un archivo single-portfolio.php para mostrar las publicaciones de cartera única.
Si tiene tipos de publicaciones personalizadas para las que no necesariamente desea publicaciones individuales (como un control deslizante o un tipo de publicación específica de la página de inicio), debe tener estos tipos de publicaciones definidos con el parámetro público establecido en falso y el parámetro show_ui establecido en verdadero ( consulte la función register_post_type para obtener más información),
Incluir detalles del tema en la hoja de estilo
¡No olvide incluir los detalles del tema en su tema! No solo necesita un nombre para que el tema aparezca en la pestaña Apariencia, sino que también querrá mostrar a los usuarios qué versión del tema están usando y darse algo de crédito por el tema. A continuación se muestra una muestra de los detalles del tema de mi tema Total de WordPress.
/* Theme Name: Total Version: 4.6 Description: Premium WordPress theme by WPExplorer Author: WPExplorer Theme URI: https://themeforest.net/item/total-responsive-multipurpose-wordpress-theme/6339019 Author URI: https://themeforest.net/user/wpexplorer License: Custom license License URI: http://themeforest.net/licenses/terms/regular Text Domain: total Tags: custom-colors, accessibility-ready, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, theme-options, threaded-comments, translation-readyStil-Standardausrichtungen/Bildstile
Vergessen Sie nicht, die standardmäßigen Bildausrichtungen und Bildstile in WordPress festzulegen. Wie Sie wissen, können Sie Bilder in Ihrem Post-Editor links, rechts oder in der Mitte ausrichten, aber Sie müssen die entsprechenden Stile in Ihr Theme einbinden, damit es wirklich funktioniert. Nachfolgend finden Sie nur das grundlegende CSS für das Bild, Blockzitate und Textausrichtungen, Untertitel und einige Zurücksetzungen für die Smileys. Sie können es kopieren und direkt in Ihr Theme einfügen und entsprechend bearbeiten.
/*--------------------------* /* WordPress Alignments /*--------------------------*/ .aligncenter{ display:block; margin:0 auto} .alignright{ float:right; margin:10px 0 10px 10px} .alignleft{ float:left; margin:10px 10px 10px 0} .floatleft{ float:left} .floatright{ float:right} .textcenter{ text-align:center} .textright{ text-align:right} .textleft{ text-align:left}Standard-Widget-Stil
WordPress enthält viele integrierte Widgets. Wenn Sie ein Thema erstellen, sollten Sie es so gestalten, dass es zu Ihrer Website passt und besser aussieht. Nachfolgend finden Sie eine Liste aller verschiedenen Widgets, die Sie entwerfen möchten.
/*--------------------------* /* WordPress Widget Styles /*--------------------------*/ .widget {} /* links widget */ .widget_links {} .widget_links ul {} .widget_links ul li {} .widget_links ul li a {} /* meta widget */ .widget_meta {} .widget_meta ul {} .widget_meta ul li {} .widget_meta ul li a {} /* pages widget */ .widget_pages {} .widget_pages ul {} .widget_pages ul li {} .widget_pages ul li a {} /* recent-posts widget */ .widget_recent_entries {} .widget_recent_entries ul {} .widget_recent_entries ul li {} .widget_recent_entries ul li a {} /* archives widget */ .widget_archive {} .widget_archive ul {} .widget_archive ul li {} .widget_archive ul li a {} .widget_archive select {} .widget_archive option {} /* tag-cloud widget */ .widget_links {} .widget_links li:after {} .widget_links li:before {} .widget_tag_cloud {} .widget_tag_cloud a {} .widget_tag_cloud a:after {} .widget_tag_cloud a:before {} /* calendar widget */ .widget_calendar {} #calendar_wrap {} #calendar_wrap th {} #calendar_wrap td {} #wp-calendar tr td {} #wp-calendar caption {} #wp-calendar a {} #wp-calendar #today {} #wp-calendar #prev {} #wp-calendar #next {} #wp-calendar #next a {} #wp-calendar #prev a {} /* category widget */ .widget_categories {} .widget_categories ul {} .widget_categories ul li {} .widget_categories ul ul.children {} .widget_categories a {} .widget_categories select{} .widget_categories select#cat {} .widget_categories select.postform {} .widget_categories option {} .widget_categories .level-0 {} .widget_categories .level-1 {} .widget_categories .level-2 {} .widget_categories .level-3 {} /* recent-comments widget */ .recentcomments {} #recentcomments {} #recentcomments li {} #recentcomments li a {} .widget_recent_comments {} /* search widget */ #searchform {} .widget_search {} .screen-reader-text {} /* text widget */ .textwidget {} .widget_text {}Ausgehende Links anzeigen
Dies gilt nicht unbedingt für Premium-Themes, da Sie keine Links in Ihr Theme einfügen sollten (außer vielleicht einen Link zu den Dokumenten oder zum Änderungsprotokoll), aber für diejenigen, die kostenlose Themes erstellen, stellen Sie sicher, dass Sie die Links im Admin-Bereich bereitstellen und was noch wichtiger ist: Die Fußzeile der Website geht tatsächlich irgendwohin. Und bitte verlinken Sie nicht auf Spam-Seiten und fügen Sie keine gesponserten Links in Ihre Themen ein. Wenn Sie wirklich ein kostenloses Theme erstellen möchten, tun Sie dies, um der Community etwas zurückzugeben oder Ihre Bekanntheit zu erhöhen. Sie sollten Themen nicht nur zu dem Zweck erstellen, Backlinks zu erhalten oder zu verkaufen.
Stellen Sie sicher, dass Ihr Suchformular eingerichtet ist
Obwohl Ihr Theme möglicherweise keine Suchleiste enthält, die irgendwo in das Theme integriert ist, möchten die Leute vielleicht eine zu ihrer Seitenleiste oder einem anderen Widget-Bereich über das Suchleisten-Widget hinzufügen. Stellen Sie daher sicher, dass Sie Ihre searchform.php-Datei in Ihr Theme eingebunden haben. Nachfolgend finden Sie ein Beispiel dafür, wie der Code in Ihrer Datei searchform.php aussehen könnte:
Testen Sie alle Ihre Theme-Optionen
Wenn Sie ein benutzerdefiniertes Theme-Panel für Ihr Theme erstellt oder benutzerdefinierte Optionen über den WordPress Customizer hinzugefügt haben, ist es sehr wichtig, sicherzustellen, dass alle Ihre Optionen korrekt funktionieren. Es wäre sehr frustrierend für einen Benutzer, der versucht, eine Option festzulegen, diese aber nicht zum Laufen bringt. Überprüfen Sie daher jede Option/Einstellung und stellen Sie sicher, dass sie ordnungsgemäß funktioniert.
Verschönern Sie die CSS-Dateien Ihres Themes
Eine andere Sache, die ich gerne mache, bevor ich mit meinem Theme fertig bin, ist, mein CSS durch einen „CSS-Generator“ laufen zu lassen, um sicherzustellen, dass alle meine Einrückungen perfekt sind und keine Fehler vorliegen. Manchmal komprimiere ich mein CSS auch gerne, abhängig vom Schwerpunkt des Themes. Ich persönlich habe eine Mac-App namens „Procssor“ gekauft, die ich verwende, aber Sie können nach „pretty css“ oder „css beautifier“ googeln und es gibt viele Online-Tools dafür.
Überprüfen Sie die Validierung auf w3.org
Natürlich möchten Sie, dass Ihr Theme frei von Codesyntaxfehlern ist. Nicht nur, damit Sie stolz auf Ihre Arbeit sein können, sondern auch, weil die Leute Ihr Theme möglicherweise nicht kaufen, wenn sie zu viele Fehler finden. Ein gültiges Theme zeugt von Professionalität und Erfahrung. Führen Sie daher unbedingt einige einfache Validierungen durch, um sicherzustellen, dass es umweltfreundlich aussieht. Gehen Sie zum W3 Online Validator und geben Sie die URL Ihrer Theme-Demo ein, um nach Fehlern zu suchen. Stellen Sie sicher, dass Sie alle Hauptseiten überprüfen (Startseite, Archive, Suche, einzelne Beiträge, einzelne Beitragstypen, 404 usw.).
Probieren Sie den „Theme Unit Test“ von WordPress.org aus
Obwohl dies einer der wichtigsten Schritte ist, habe ich ihn am Ende hinzugefügt, da viele Entwickler während des Entwicklungsprozesses Unit-Tests verwenden. Grundsätzlich verfügt WordPress über eine XML-Datei, die Sie mit verschiedenen „Tests“ in Ihre Website importieren können, um Formatierung, Widgets, Ausrichtungen, Bilder, Beitragsformate, Paginierung usw. zu überprüfen. Es ist immer wichtig, Ihr Theme mit Theme Unit Testing zu überprüfen, um sicherzustellen, dass es für die Veröffentlichung bereit ist und keine Probleme mit den Kernfunktionen und -stilen von WordPress aufweist.
