Erstellen Sie ein reaktionsschnelles WordPress-Portfolio

Die Webentwicklung mag sich schnell ändern, aber zwei Dinge, die hier bleiben werden, sind WordPress und Responsive Design. Es ist ein Muss zu wissen, wie man reaktionsschnelle WordPress-Themes und Plug-Ins erstellt. In diesem Tutorial werden wir uns mit dem Erstellen eines WordPress-Plug-Ins und einer Theme-Vorlage für ein responsives Portfolio befassen.

Wir werden mit zwei nachgebildeten Vorlagen arbeiten: einer Archivseite, auf der alle aktuellen Projekte aufgelistet sind, und einer einzelnen Seite, auf der ein bestimmtes Projekt angezeigt wird. Die Archivseite für das Portfolio ist ziemlich einfach mit einer Kopfzeile und drei Spalten mit Projekten in voller Breite. Dies wird auf zwei Spalten und dann auf eine Spalte verkleinert, wenn der Bildschirm kleiner wird. Das HTML und CSS ist erhältlich bei GitHub . Jedes Projekt auf der Seite hat diese Struktur.



Sehen Sie sich einen exklusiven Screencast dieses Tutorials an:

Dies ist der HTML-Code, der von der WordPress-Schleife generiert wird:

Name of Site

Short description and a link read more...

Die einzelne Seite hat ein ähnliches Layout und verpackt den gesamten Text in einen Container namens .Projekt statt .Karte . Das CSS wird auch ziemlich leicht und skaliert sein. Möglicherweise stellen Sie in den Site-Dateien auch fest, dass es eine gibt style.scss Datei. Ich habe das gesamte CSS mit Sass entwickelt, aber keine Angst: das generierte style.css ist lesbar kompiliert.

Erstellen eines neuen benutzerdefinierten Beitragstyps

Ein benutzerdefinierter Beitragstyp ist ein Objekt in WordPress, mit dem wir dem WordPress-Editor beliebige Arten von Inhalten hinzufügen können, die genauso behandelt werden wie Beiträge. In einer neuen WordPress-Installation gibt es Menüoptionen für Beiträge und Seiten. Diese beiden werden als Beitragstypen betrachtet, die den Inhalt unterschiedlich behandeln. Mit benutzerdefinierten Beitragstypen können wir dem WordPress-Administratormenü Optionen zum Erstellen neuer Inhaltstypen hinzufügen. Wir erstellen einen benutzerdefinierten Beitragstyp namens Portfolio.

Wir werden diesen benutzerdefinierten Beitragstyp als Teil eines größeren WordPress-Plug-Ins für Portfolio-Projekte entwickeln. Obwohl wir die Funktionalität zum Thema hinzufügen könnten, ist dies eine schlechte Praxis, da unser Inhalt dann an unser Design gebunden ist: Wenn wir das Thema ändern, verlieren wir das Portfolio. Wir werden die Anzeige mit zwei Methoden behandeln: Vorlagen / Vorlagen-Tags und Shortcodes, die über den Editor verwendet werden können.

Benötige ich eine Grafikkarte für die Videobearbeitung?

Der erste Schritt besteht darin, das Plug-In zu definieren. Erstellen Sie einen Ordner in / wp-content / plugins / und nenne es wie du willst. Ich habe meine benannt / jlc-projects / . Erstellen Sie in diesem Ordner eine gleichnamige Datei (z. B. jlc-projects.php ) und fügen Sie diesen Code hinzu:

Hier sind ein paar Dinge los. Die erste ist die Standard-Plug-In-Definition für ein WordPress-Plug-In. Die nächsten Zeilen erstellen Konstanten und enthalten dann die Dateien, die der Rest des Plug-Ins benötigt. Zu diesem Zeitpunkt gibt es nur eine weitere Datei: jlc-project-cpt.php .

Sie werden auch feststellen, dass ich für alles das Präfix JLC_ (oder jlc-) verwende. Sie sollten Ihr eigenes Präfix auswählen. Durch das Präfixieren von Variablen und Funktionsnamen wird die Wahrscheinlichkeit verringert, dass Ihr Plug-In mit anderen Themen oder Plug-Ins in Konflikt steht.

Die Administrationsseite zum Hinzufügen eines neuen Projekts. Beachten Sie den Abschnitt Projektverknüpfung

Die Administrationsseite zum Hinzufügen eines neuen Projekts. Beachten Sie den Abschnitt Projektverknüpfung

Bevor wir hineinspringen jlc-project-cpt.php Ich möchte noch ein bisschen Code hinzufügen jlc-projects.php . Der folgende Code erstellt eine neue Bildgröße, die wir mit unserem benutzerdefinierten Beitragstyp verwenden:

if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); add_image_size('jlc_project', 1100, 640, true); }

Jetzt ist es Zeit zu erstellen jlc-project-cpt.php . Ich werde hier nur den wichtigen Code diskutieren, aber den vollständigen Code finden Sie im GitHub-Repo. Zuerst (nach der Eröffnung Tag) definieren wir den benutzerdefinierten Beitragstyp:

add_action('init', 'jlc_projects_register'); function jlc_projects_register() { $args = array( 'label' => __('Portfolio'), 'singular_label' => __('Project'), 'public' => true, 'show_ui' => true, 'capability_type' => 'post', 'hierarchical' => true, 'has_archive' => true, 'supports' => array('title', 'editor', 'thumbnail') , 'rewrite' => array('slug' => 'portfolio', 'with_front' => false) ); register_post_type( 'portfolio' , $args ); register_taxonomy('jlc-project-type', array('portfolio'), array('hierarchical' => true, 'label' => 'Project Type', 'singular_label' => 'Project Type', 'rewrite' => true)); }

Dies ist Ihre Standarddefinitionsfunktion für benutzerdefinierte Beitragstypen. Wir fügen eine Aktion hinzu, um sie bei init aufzurufen, und senden dann unsere Liste der Argumente an register_post_type () , zusammen mit der Schnecke des Typs, die 'Portfolio' sein wird. Nach der Registrierung des Beitragstyps registrieren wir die benutzerdefinierte Taxonomie, die dem Beitragstyp entspricht. Es ist wichtig, diese beiden Funktionen zusammenzuhalten. Wenn Sie dies nicht tun und die Taxonomie irgendwie zuerst registriert wird, gibt WordPress einen Fehler aus.

Nachdem der benutzerdefinierte Beitragstyp definiert wurde, ist es Zeit, die benutzerdefinierten Metadaten hinzuzufügen, die wir verwenden möchten. Unser benutzerdefinierter Beitragstyp unterstützt einen Titel, den Editor (der als Haupttext dient) und eine Miniaturansicht, in die das ausgewählte Bild verschoben wird. Es gibt noch eine Sache, die ich meinen Portfolio-Stücken hinzufügen möchte: eine URL zu der Website, die ich präsentiere. Zuerst erstellen wir die Funktion, mit der dieses Feld im Administrator hinzugefügt wird:

add_action('admin_init', 'jlc_projects_admin_init'); function jlc_projects_admin_init(){ add_meta_box('jlc-projects-meta', __('Project Link'), 'jlc_projects_options', 'portfolio', 'side', 'low'); } function jlc_projects_options(){ global $post; if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ) return $post_id; $custom = get_post_custom($post->ID); $link = $custom['jlc_projects_link'][0]; ?>

Diese Funktionen sind ziemlich einfach. Wenn der Administrator initiiert (dh geladen) wird, rufen wir eine aufgerufene Funktion auf jlc_projects_admin_init () Dadurch wird eine neue Meta-Box für Portfolio-Elemente erstellt. Um diese Box zu generieren, wird eine neue Funktion, jlc_projects_options () , wird genannt.

Einmal in der Optionen Funktion greifen wir einfach die Verknüpfung Wert, den wir genannt haben jlc_projects_link und drucken Sie es aus. Aber zuerst möchten wir sicherstellen, dass keine automatische Speicherung durchgeführt wird. Wenn ja, werden wir wahrscheinlich Daten verlieren. Danach müssen wir die Metadaten tatsächlich speichern, wenn der Beitrag gespeichert wird:

add_action('save_post', 'jlc_projects_save'); function jlc_projects_save(){ global $post; if ( defined('DOING_AUTOSAVE') && DOING_AUTOSAVE ){ return $post_id; }else{ update_post_meta($post->ID, 'jlc_projects_link', $_POST['jlc_projects_link']); } }

Nachdem der Admin-Bereich für unsere benutzerdefinierten Beitragstypen erstellt wurde, ist es an der Zeit, einige Frontend-Funktionen hinzuzufügen, mit denen unsere Projekte den Besuchern angezeigt werden können. Dies besteht aus einer Archivvorlage, einer einzelnen Seitenvorlage und einem Shortcode (in diesem Lernprogramm nicht behandelt). Aber bevor wir das tun, gibt es noch eine andere Funktion, die wir zum Anzeigen von Bildern erstellen werden: picturefill.js .

Dieses Stück JavaScript (Sie finden das GitHub-Repo Hier ) ermöglicht es Ihnen, eine Reihe von Medienabfragen zu definieren, um ein Bild auf eine Version umzustellen, die der Größe des Bildschirms entspricht, auf dem es angezeigt wird. Dies hat auch Auswirkungen auf die Ladezeit, da Sie wahrscheinlich davon ausgehen können, dass ein kleinerer Bildschirm ein mobiles Gerät bedeutet, das 4G, 3G oder sogar EDGE verwendet. Ich weiß, dass das nicht immer der Fall ist, aber es ist besser als nichts.

Die hier verwendete HTML-Vorlage in voller Breite. Es

Die hier verwendete HTML-Vorlage in voller Breite. Es ist eine einfache Kopfzeile mit drei Projektspalten

Sie können das Markup-Muster für ein Standard-Picturefill-Element auf dem GitHub-Repo sehen. Wir können eine unbegrenzte Anzahl von haben Elemente für jede Größe des Bildes, das wir haben. Es gibt auch einen Fallback für Benutzer ohne JavaScript. Wie Sie sich vorstellen können, eignet sich WordPress gut für picturefill.js, da es mehrere Versionen jedes Bildes erstellt, das wir mit dem Media Uploader hochladen. Als erstes sollten wir das Skript laden, das sich in der befindet / js / Ordner im Verzeichnis unseres Plug-Ins. Wir fügen den folgenden Code hinzu jlc-projects.php ::

function jlc_projects_scripts() { wp_enqueue_script( 'picturefill', JLCP_PATH.'js/ picturefill.js', array()); } add_action( 'wp_enqueue_scripts', 'jlc_projects_scripts' );

Dadurch wird unser JavaScript mit den Skripten geladen, die von anderen Plug-Ins geladen werden. Dadurch wird auch sichergestellt, dass picturefill.js nicht mehr als einmal geladen wird.

Da unsere Projekte den Abschnitt mit den vorgestellten Bildern verwenden, um den Screenshot anzuzeigen, können wir das Standard-Markup für vorgestellte Bilder mithilfe von ersetzen post_thumbnail_html Filter. Beachten Sie, dass diese Funktion tatsächlich alle vorgestellten Bildabschnitte auf der Site ersetzt. Wenn dies zu einem Konflikt führen kann (dies wird wahrscheinlich der Fall sein), sollten Sie Ihrem Plug-In einige Bedingungen hinzufügen, um sicherzustellen, dass dieser Filter nur auf Portfolio-Seiten verwendet wird.

Unterschied zwischen Art Director und Creative Director
add_filter( 'post_thumbnail_html', 'jlc_projects_get_featured_image'); function jlc_projects_get_featured_image($html, $aid=false){ $sizes= array(‚'thumbnail', 'medium', 'large', 'jlc_project', 'full'); $img= ''; $ct= 0; $aid= (!$aid) ? get_post_thumbnail_id() : $aid; foreach($sizes as $size){ $url= wp_get_attachment_image_src($aid, $size); $width= ($ct < sizeof($sizes)-1) ? ($url[1]*0.66) : ($width/0.66)+25; $img.= ' 0) ? ' data-media='(min-width: '.$width .'px)'>' :'>'; $ct++; } $url= wp_get_attachment_image_src( $aid, $sizes[1]); $img.= ' '; return $img; }

Hier sind ein paar Dinge los. Das erste ist, dass die Funktion ein Array aller Bildgrößen in WordPress hat, die wir verwenden möchten. Wenn Sie Ihre eigenen Größen definiert haben, müssen Sie diese hier hinzufügen. Auf diese Weise wird das Bildfüllelement genau ausgefüllt. Nach einigen Einstellungen (Definieren der Bildgrößen, Öffnen des Bildfüllungselements, Initialisieren eines Zählers) bewegt es sich durch die $ Größen Drucken eines Bildeintrags für jeden.

Für jeden Eintrag wp_get_attachment_image_src () wird aufgerufen, um die URL des Bildes basierend auf der ID des Bildes abzurufen (welche get_post_thumbnail_id () Rückgabe basierend auf der Post-ID) und der Größe. wp_get_attachment_ image_src () Gibt ein Array zurück, das das Bild, die Breite, die Höhe und die Beschneidung enthält. Hier wird auch ein bisschen Mathe gemacht, um zu berechnen, wann die Haltepunkte zu bestimmen sind und wie mit dem Miniaturbild umzugehen ist. Ich werde hier nicht im Detail darauf eingehen, aber es ist erwähnenswert, dass dies ein wichtiges Problem ist, das gelöst werden muss und für das sich die Lösungen schnell weiterentwickeln.

Jedes Mal, wenn wir das Miniaturbild des Beitrags erhalten, wird der zurückgegebene HTML-Code von unserer Funktion stammen.

Archivseite erstellen

Als Nächstes erstellen wir die Archivvorlage für den neuen benutzerdefinierten Beitragstyp. Dies wird standardmäßig angezeigt und dient als Hauptportfolioseite.

Ein Teil der Archivvorlage wird auf einem Bildschirm in Mobilgröße angezeigt. Die Karten werden mit zentrierten Bildern auf eine Spalte verkleinert

Ein Teil der Archivvorlage wird auf einem Bildschirm in Mobilgröße angezeigt. Die Karten werden mit zentrierten Bildern auf eine Spalte verkleinert

(Hinweis: In diesem Lernprogramm wird die Homepage der Site nicht erstellt. Dazu ist jedoch entweder ein Vorlagen-Tag oder ein Shortcode erforderlich, mit dem eine benutzerdefinierte Schleife ausgeführt wird WP_Query .)

Erstellen Sie eine neue Datei in dem von Ihnen verwendeten Themenverzeichnis und rufen Sie sie auf archive-Portfolio.php . Die Vorlagenhierarchie von WordPress ist intelligent genug, um zu wissen, dass ein Benutzer auf der Portfolio-Seite den Inhalt mithilfe dieser Vorlage anzeigen sollte. Meine Empfehlung an dieser Stelle ist, die zu kopieren page.php Vorlage für diese Vorlage. Wir werden einfach den Loop-Teil ersetzen.

Ich empfehle, dass Sie eine Vorlage ohne Seitenleiste oder eine einspaltige Vorlage verwenden. Das CSS, auf das hier verwiesen wird, funktioniert etwas besser. So sieht unser Loop aus:

Point and Shoot Kamera Bewertung 2014

read more...

Dies sollte ziemlich einfach sein. Weil wir den Standard-HTML-Code für ersetzen the_post_thumbnail () Das Argument, welches Bild verwendet werden soll, spielt keine Rolle, da alle Größen mit dem Markup picturefill.js zurückgegeben werden. Ich habe mich für die Verwendung entschieden get_the_excerpt () um eventuelle Markups von auszuschließen der Auszug() .

Wenn Sie ein Plug-In entwerfen, das etwas CSS enthält, ist es wichtig, es so minimal wie möglich zu gestalten, damit es nicht mit dem CSS des Themas in Konflikt gerät oder dem Benutzer die Möglichkeit gibt, Ihr CSS vollständig auszuschließen. Da wir Vorlagen innerhalb des Themas erstellen, haben wir etwas mehr Spielraum. Hier ist ein Teil des (von Sass generierten) CSS, das ich jedem Projekt auf der Archivseite hinzugefügt habe:

.card img { display: block; margin: 0 auto; } @media screen and (min-width: 45.88em) { .card { display: inline-block; width: 40%; } } @media screen and (min-width: 54.62em) { .card { width: 44%; } } @media screen and (min-width: 76.38em) { .card { width: 29%; } } @media screen and (min-width: 99.4em) { .card { width: 30%; }

Ich habe festgestellt, welche Haltepunkte am besten geeignet sind, um die Projektkarten nebeneinander zu platzieren. Ich habe auch das vorgestellte Bildercenter automatisch erstellt.

Erstellen der einzelnen Seite

Jetzt erstellen wir die einzelne Vorlage für Portfolio-Projekte. Wenn ein Benutzer die Seite eines einzelnen Projekts besucht, wird dies angezeigt. Erstellen Sie eine neue Datei in Ihrem Thema, nennen Sie es single-portal.php und kopieren Sie eine andere Vorlage, um sie dort einzufügen (ich würde empfehlen, was auch immer Sie verwendet haben archive-Portfolio.php ). Dieses Mal werden wir die Schleife durch diesen Code ersetzen:

ID); if($jlc_link){ ?> Visit the Site

Dies sieht ähnlich aus wie die Archivvorlage, aber wir rufen hier eine zusätzliche Funktion auf: jlc_projects_get_link () . Wir werden dies zu unserem Plug-In hinzufügen und die URL für das aktuelle Projekt zurückgeben.

Die einzelne Projektansicht. Das Projekt wird mit zunehmender Seite kleiner, damit der Text gut lesbar bleibt

Die einzelne Projektansicht. Das Projekt wird mit zunehmender Seite kleiner, damit der Text gut lesbar bleibt

Falls keine URL vorhanden ist, sollte false zurückgegeben werden und es wird keine Schaltfläche angezeigt. Hier ist die Funktion (befindet sich in jlc-projects.php ) sieht aus wie:

function jlc_projects_get_link($id){ $url= get_post_custom_values('jlc_projects_link', $pid); return ($url[0] != '') ? $url[0] : false; }

Das CSS für diese Seite hängt weitgehend vom Thema ab: Ich habe CSS verwendet, um eine nette Schaltfläche zu generieren. Stellen Sie sicher, dass das von Ihnen selbst erstellte CSS das Hauptthema nicht beeinträchtigt.

Abschließend

Inzwischen haben wir ein Plug-In erstellt, um einen neuen benutzerdefinierten Beitragstyp für Portfolios hinzuzufügen, picturefill.js integriert, um Bilder besser zu verarbeiten, und zwei Themenvorlagen erstellt, um die Informationen anzuzeigen.

Das GitHub-Repo für das Tutorial enthält den gesamten hier gezeigten Code sowie das von mir verwendete Thema, einen Shortcode und ein Template-Tag.

Wörter :: Joe Casabona

Dieser Artikel erschien ursprünglich in Netzmagazin Ausgabe 254.