Nach ein paar Jahren (oder sogar Monaten) der Gestaltung und Entwicklung von WordPress-Themes, insbesondere für Kunden, werden Sie feststellen, dass ein großer Teil der Funktionalität standardisiert oder zu einem "Starter-Thema oder Kit" destilliert werden kann. Dies hilft, den Entwicklungsprozess zu beginnen und sich schnell zu entwickeln.
Der beste erste Schritt, um dies zu tun, ist, dass ich die meisten der gebräuchlichen Funktionen festnagele und sie in die functions.php . Dies functions.php Die Datei muss erweitert werden, um den speziellen Bedürfnissen des Themas gerecht zu werden, wenn neue Projekte entstehen, aber es wird einen mehr als genialen Ausgangspunkt für die Entwicklung bieten.
Es gibt ungefähr 13 Schlüsselfunktionen, mit denen ich gerne anfange und die ich nach Bedarf ergänzen werde ...
Die in WordPress 3.0 eingeführte Navigationsmenüfunktion ermöglicht die intuitive Erstellung und Pflege von Navigationsmenüs in Themen.
Zumindest benötigt ein Standardthema ein Hauptnavigationsmenü, möglicherweise in der Kopfzeile und einem sekundären Navigationsmenü in der Fußzeile. Dazu registrieren wir diese beiden Menüs "Hauptmenü" und "Zweites Menü"
Obwohl dies kein besonders neues Feature ist, ist es immer noch schön, es in ein if function_exists() nur für den Fall, dass der Benutzer in einer vor 3.0 Installation feststeckt:
In dem functions.php Datei, schließen Sie folgendes ein:
if ( function_exists( 'register_nav_menus' ) ) {register_nav_menus(array('main_menu' => __( 'Main Menu', 'cake' ),'secondary_menu' => __( 'Secondary Menu', 'cake' ),));} Jetzt, da die Menüs registriert sind, müssen wir dem Thema mitteilen, wo sie ausgegeben werden sollen. Wir möchten, dass das Hauptmenü in unserer Kopfzeile erscheint. Also, in unserem header.php Datei enthalten wir den folgenden Code:
'main_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Zuerst prüfen wir, ob wir ein Menü mit dem Namen 'main_menu' definiert haben und wenn wir dies tun, fügen wir seinen Inhalt hier ein, ansonsten werden wir auf den Standard zurückgesetzt wp_list_pages() die wir weiter anpassen können, um die Links so anzuzeigen, wie wir sie benötigen.
Wenn Sie das Menü noch weiter anpassen möchten, finden Sie unter WordPress Codex Seite auf wp_nav_menu() Funktion.
Wir wollen, dass das sekundäre Menü in der Fußzeile erscheint, also öffnen wir das footer.php und fügen Sie den folgenden Code ein:
'secondary_menu','menu' => '','container' => false,'echo' => true,'fallback_cb' => false,'items_wrap' => ' %3$s
','depth' => 0 );wp_nav_menu( $defaults );?>
Mit dieser Funktion können Sie benutzerdefiniertes CSS verwenden, um den WordPress TinyMCE Visual Editor zu formatieren.
Erstellen Sie eine CSS-Datei mit dem Namen editor-style.css und fügen Sie Ihre Stile ein. Als Platzhalter beginne ich gerne mit Stilen im editor-style.css Datei des Twenty Twelve-Themas.
In dem functions.php füge folgendes hinzu:
add_editor_style();Wenn Sie den Namen "editor-style" nicht für Ihre CSS-Datei verwenden möchten und die Datei auch anderswo verschieben möchten, z. B. in einem css-Verzeichnis, dann ändern Sie die Funktion.
Zum Beispiel möchte ich meine Datei benennen tiny-mce-styles.css und ich möchte es in meinem CSS-Verzeichnis; also wird meine Funktion so aussehen:
add_editor_style('/css/editor-style.css'); Wenn wir schon dabei sind, können wir den Editor auch für Sprachen von rechts nach links gestalten. Erstellen Sie im Themenverzeichnis eine CSS-Datei namens editor-style-rtl.css und schliesse mindestens Folgendes ein:
html .mceContentBody {direction: rtl;unicode-bidi: embed;}li {margin: 0 24px 0 0;margin: 0 1.714285714rem 0 0;}dl {margin: 0 24px;margin: 0 1.714285714rem;}tr th {text-align: right;}td {padding: 6px 0 6px 10px;text-align: right;}.wp-caption {text-align: right;}Wiederum, als Platzhalter, stammen die obigen Stile aus dem Zwanzig-Zwölf-Thema. Restyle und verlängern, wie gebraucht.
Die meisten Leute, die online Blogs kommentieren, haben einen Avatar. Wenn dies jedoch nicht der Fall ist und Ihnen die standardmäßigen Avatar-Optionen von WordPress nicht besonders gefallen, können Sie Ihre eigenen definieren.
Fügen Sie dazu den folgenden Code in Ihr Konto ein functions.php :
if ( !function_exists('cake_addgravatar') ) {function cake_addgravatar( $avatar_defaults ) {$myavatar = get_template_directory_uri() . '/images/avatar.png';$avatar_defaults[$myavatar] = 'avatar';return $avatar_defaults;} add_filter ('avatar_defaults', 'cake_addgravatar');} Was wir hier zuerst tun, überprüft, ob die Funktion existiert. Wenn dies der Fall ist, fügen wir einen Filter hinzu, der WordPress anweist, unseren benutzerdefinierten Avatar als Standard zu verwenden.
Wir sagen WordPress, diesen Avatar in unserem "images" -Verzeichnis innerhalb des Themenverzeichnisses zu finden. Der nächste Schritt besteht natürlich darin, das Bild selbst zu erstellen und es in den Ordner "images" hochzuladen.
Mit der Funktion "Post-Formate" können Sie Stil und Präsentation von Posts anpassen. Zum jetzigen Zeitpunkt gibt es 9 standardisierte Post-Formate, aus denen Benutzer auswählen können: neben, Galerie, Link, Bild, Zitat, Status, Video, Audio und Chat. Darüber hinaus gibt das standardmäßige Postformat "Standard" an, dass für den jeweiligen Post kein Postformat angegeben ist.
Um diese Funktionalität zu Ihrem Design hinzuzufügen, fügen Sie den folgenden Code in Ihren ein functions.php Geben Sie die Post-Formate an, die Sie nutzen möchten. Wenn Sie beispielsweise nur die Post-, Image-, Link-, Zitat- und Statuspostformate möchten, sollte Ihr Code wie folgt aussehen:
add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status' ) );Die vorgestellte Bildfunktion, wie der Kodex erklärt, ermöglicht es dem Autor, ein repräsentatives Bild für Posts, Seiten oder benutzerdefinierte Beitragstypen auszuwählen.
Fügen Sie den folgenden Code in Ihrem ein, um diese Funktionalität zu aktivieren functions.php :
add_theme_support( 'post-thumbnails' );Wir könnten damit aufhören und es WordPress überlassen, die Größe der Vorschaubilder zu definieren, oder wir könnten die Kontrolle übernehmen und sie selbst definieren. Wir werden das letztere natürlich tun!
Nehmen wir an, wir betreiben eine Zeitschriftenseite, auf der das vorgestellte Bild in mindestens drei verschiedenen Größen erscheint. Vielleicht ein großes Bild, wenn der Beitrag vorgestellt wird oder das neueste, ein mittelgroßes Bild, wenn es nur ein Post unter den anderen ist und eine normale Größe, die vielleicht woanders erscheint.
Wir nutzen die add_image_size() Funktion, die WordPress anweist, eine Kopie unseres vorgestellten Bildes in unseren definierten Größen zu erstellen.
Um dies zu tun, fügen wir Folgendes zu den functions.php :
// regular sizeadd_image_size( 'regular', 400, 350, true );// medium sizeadd_image_size( 'medium', 650, 500, true );// large thumbnailsadd_image_size( 'large', 960, '' ); Sehen Sie, wie Sie mit dem add_image_size() Funktionieren Sie entweder weich oder beschneiden Sie Ihre Bilder auf dem Wordpress-Codex-Seite.
Sobald wir die oben genannten Bildgrößen (normal, mittel und groß) definiert haben - und da WordPress dies standardmäßig nicht für uns tut -, werden wir die Möglichkeit haben, diese Bildgrößen über die Schnittstelle für die Einstellungen der Anlagenanzeige auszuwählen.
Es wäre schön, wenn Sie beim Schreiben eines Beitrags das Bild in der gewünschten Größe einfügen könnten, indem Sie es aus dem Dropdown-Menü auswählen, wie Sie es normalerweise für die WordPress-Standardgrößen tun würden.
Um dies zu tun, fügen wir folgendes unseren hinzu functions.php :
// show custom image sizes on when inserting mediafunction cake_show_image_sizes($sizes) {$sizes['regular'] = __( 'Our Regular Size', 'cake' );$sizes['medium'] = __( 'Our Medium Size', 'cake' );$sizes['large'] = __( 'Our Large Size', 'cake' );return $sizes;} add_filter ('image_size_names_choose', 'cake_show_image_sizes'); Damit können wir unsere Bildgrößen auswählen.
Dieser ist einfach. Wenn Sie WordPress-Themes für eine Weile erstellen, werden Sie sich an die Tage erinnern, an denen Sie Code manuell eingeben mussten, um den RSS-Feed direkt in der header.php auszugeben. Dieser Ansatz ist sauberer und stützt sich auf die wp_head() Aktions-Hook, um den notwendigen Code auszugeben.
In dem functions.php Datei, schließen Sie folgendes ein:
// Adds RSS feed links to for posts and comments.add_theme_support( 'automatic-feed-links' ); Stellen Sie sicher, dass Sie haben it in the , right before end of header.php it in the , right before end of &rgt;/head&lgt;
Mit dieser Funktion machen Sie den ersten Schritt, um Ihr Thema für die Übersetzung verfügbar zu machen.
Es ist am besten, diese Funktion innerhalb der after_setup_theme() Aktionshaken, dh nachdem die Setup-, Registrierungs- und Initialisierungsaktionen Ihres Themes ausgeführt wurden.
add_action('after_setup_theme', 'my_theme_setup');function my_theme_setup(){load_theme_textdomain('my_theme', get_template_directory() . '/languages');} Fügen Sie jetzt ein Verzeichnis namens ' languages 'in Ihrem Themenverzeichnis.
Sie können mehr über die Funktion load_theme_textdomain () auf der Wordpress-Codex-Seite .
Die Inhaltsbreite ist eine Funktion in Designs, mit der Sie die maximal zulässige Breite für Videos, Bilder und andere eingebettete Inhalte in einem Design festlegen können.
Das heißt, wenn Sie diese YouTube-URL in den Editor einfügen und WordPress automatisch das tatsächliche Video am Frontend anzeigt, überschreitet dieses Video nicht die Breite, die Sie mit der Option festgelegt haben $content_width Variable.
if ( ! isset( $content_width ) )$content_width = 600;WordPress empfiehlt auch das Hinzufügen des folgenden CSS:
.size-auto,.size-full,.size-large,.size-medium,.size-thumbnail {max-width: 100%;height: auto;} Während das nützlich ist, ist es ein bisschen schwer angeschlagen. Es definiert die Inhaltsbreite für alle Inhalte. Was wäre, wenn Sie Videos mit einer größeren Breite auf Seiten als in Posts und eine noch größere in einem benutzerdefinierten Post-Typ möchten? Derzeit gibt es keine Möglichkeit, dies zu definieren. Es gibt jedoch ein Featureanfrage vorschlägt die Einbeziehung der $content_width Variable in das eingebaute add_theme_support() .
Ihr typisches Thema wird mindestens eine Seitenleiste haben. Der Code zum Definieren der Seitenleiste ist ziemlich einfach.
Fügen Sie Ihrem functions.php :
if(function_exists('register_sidebar')){register_sidebar(array('name' => 'Main Sidebar','before_widget' => '','after_widget' => '','before_title' => '','after_title' => '
',));} Dies registriert und definiert eine Sidebar namens "Main Sidebar" und deren HTML-Markup.
Sie können mehr über das lernen register_sidebar() Funktion auf der Wordpress-Codex-Seite.
Sie werden routinemäßig die Notwendigkeit finden, mehr als diese eine Seitenleiste zu haben, so dass Sie einfach den obigen Code kopieren und einfügen und den Namen ändern können.
Da ist auch ein register_sidebars() Funktion, die es Ihnen ermöglicht, mehrere Seitenleisten gleichzeitig zu registrieren und zu definieren, aber es gibt Ihnen nicht die Flexibilität, jeder neuen Seitenleiste einen eindeutigen Namen zu geben.
Wenn Sie Auszüge Ihrer Beiträge auf einer Blog-Indexseite anzeigen, wird WordPress standardmäßig angezeigt [...] um anzuzeigen, dass es mehr "nach dem Sprung" gibt.
Sie werden wahrscheinlich einen "mehr Link" hinzufügen und definieren, wie das aussieht.
Um dies zu tun, müssen wir den folgenden Code hinzufügen functions.php :
function new_excerpt_more($more) {global $post;return '...
function cake_content_nav( $nav_id ) {global $wp_query;if ( $wp_query->max_num_pages > 1 ) : ?>Wenn Sie spezielle Anweisungen in Ihrem Thema haben, z. Auf der Seite mit den Themenoptionen, die der Nutzer sehen soll, wenn er das Design zum ersten Mal aktiviert, können Sie die folgende Funktion verwenden, um sie dorthin zu leiten:
if (is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")wp_redirect('themes.php?page=themeoptions'); Achten Sie besonders auf die wp_redirect() Funktion. Stellen Sie sicher, dass Sie die themes.php?page=themeoptions 'mit der URL Ihrer Seite.
Während der Entwicklung finde ich manchmal, dass die WordPress Admin (Tool) Leiste ziemlich störend ist.
Es befindet sich in einer festen Position am oberen Rand des Fensters und kann abhängig von meinem Layout einige Elemente des Headers abdecken.
Während ich noch entwerfe und entwickle, verstecke ich gerne die Admin-Leiste mit dieser praktischen Funktion.
show_admin_bar( false );Hast du irgendwelche Lieblingsfunktionen für den Start der WordPress Template Entwicklung? Welche Funktionen möchten Sie sehen? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Multi-Tool-Bild über Shutterstock.