In der Welt der WordPress-Entwicklung können die richtigen Tools den entscheidenden Unterschied machen. Aus diesem Grund freuen wir uns, die Einführung der neuen Code-App von Assistant bekannt zu geben – einem vielseitigen und leistungsstarken Tool, das Ihren Codierungs-Workflow rationalisiert und die Verwaltung von Code-Snippets in WordPress vereinfacht.

Die Code-App befindet sich im Assistant-Plugin und ermöglicht Ihnen das Erstellen, Bearbeiten und Verwalten von CSS- und JavaScript-Code-Snippets für Ihre Website. Mit der Code-App können Sie ganz einfach neue Snippets hinzufügen, sie bestimmten Abschnitten zuweisen und ihren Aktivierungsstatus steuern. Zu den Funktionen gehören das Duplizieren, Exportieren und Speichern von Snippets in einer Bibliothek (mit Assistant Pro). Die intuitive Benutzeroberfläche gewährleistet ein schnelles Umschalten zwischen aktivierten und deaktivierten Snippets und optimiert so den Anpassungsprozess Ihrer Website.

Lassen Sie uns eintauchen und einige seiner innovativen Funktionen und Fähigkeiten erkunden:

Was ist die Assistant Code App?

Möglicherweise wissen Sie bereits, dass Sie Codefragmente in Assistant Pro-Bibliotheken speichern können. Mit der Hinzufügung der Code-App können Sie jetzt die Code-Snippets Ihrer WordPress-Site ganz einfach im Assistant-Plugin hinzufügen, bearbeiten und verwalten:

Die Code-App macht mehrere Plugins überflüssig und steigert Ihre Produktivität, indem sie alle Code-Snippets Ihrer Website an einem leicht zugänglichen Ort speichert.

• Einfache Code-Snippet-Verwaltung: Verwalten Sie den CSS- und JavaScript-Code Ihrer Website direkt in der Code-App. Kein Jonglieren mit mehreren Tools und Plattformen mehr, alles, was Sie brauchen, ist direkt zur Hand.
• Speichern Sie Codeausschnitte in der Assistant Pro Cloud: Die Assistant Code App lässt sich nahtlos in Ihr Assistant Pro-Konto integrieren, sodass Sie Ihre Codeausschnitte in Cloud-Bibliotheken speichern und organisieren können. Optimieren Sie Ihren Workflow, indem Sie Codefragmente problemlos in mehreren Website-Projekten wiederverwenden und so wertvolle Zeit sparen.
• Arbeiten Sie mit Ihrem Team zusammen: Zusammenarbeit ist der Schlüssel und unsere Code-App macht es einfacher als je zuvor, mit Ihrem Team zusammenzuarbeiten. Mit der Echtzeitbearbeitung können Sie in Echtzeit an Ihrer WordPress-Site zusammenarbeiten und mit Ihrem Team synchron bleiben, egal wo Sie sich befinden.

Zusätzlich zu diesen Funktionen bietet die Code-App von Assistant auch eine elegante und intuitive Benutzeroberfläche, die speziell für Entwickler entwickelt wurde. Ganz gleich, ob Sie ein erfahrener Profi sind oder gerade erst anfangen: Wir glauben, dass die Navigation in unserer Code-App für Sie einfach und die Bedienung ein Kinderspiel ist.

So fügen Sie ein Code-Snippet in WordPress hinzu

Die Assistant Code App bietet eine nahtlose Möglichkeit, Ihre Website mit benutzerdefinierten CSS- und JavaScript-Snippets zu verbessern. Der Einstieg ist einfach:

Schritt 1: Öffnen Sie die Code-App im Assistenten

Wenn Sie es noch nicht getan haben, installieren und aktivieren Sie das Assistant-Plugin. Klicken Sie nach der Installation auf das Stiftsymbol, um die Assistant-Seitenleiste zu öffnen. Navigieren Sie zu Apps & Einstellungen und klicken Sie dann in der Liste der Apps auf Code :

Beachten Sie, dass Sie die Apps neu anordnen können, wenn Sie möchten, dass das Code-App-Symbol in der Seitenleiste angezeigt wird, indem Sie die Code-App in der Liste nach oben ziehen:

Schritt 2: Erstellen Sie mit der Code-App ein Snippet

Jetzt sind wir bereit, unser erstes Code-Snippet zu erstellen. In diesem Beispiel erstellen wir eine CSS-Datei, indem wir zunächst sicherstellen, dass die Registerkarte „CSS“ ausgewählt ist, dann einen Titel eingeben und auf die Schaltfläche „Zurück“ klicken:

Auf dem nächsten Bildschirm sehen Sie, dass die Code-App Folgendes akzeptiert:

• Titel: Dies ist der eindeutige Name für Ihr Code-Snippet.
• Beschreibung: Erklären Sie, wofür der Code verwendet wird, oder geben Sie andere wichtige Informationen an, die Sie oder Ihr Team im Gedächtnis behalten sollten:

• Code-Snippet : Geben Sie Ihren Code-Snippet in den Codeblock ein:

Scrollen Sie nach unten zum Abschnitt „Standort“ und weisen Sie Ihrem Snippet den Status und die Regeln zu:

• Status : Schalten Sie den Status des Code-Snippets um, um ihn zu aktivieren oder zu deaktivieren.
• Regeln : Wählen Sie aus, wo dieses Snippet geladen werden soll. Dies ähnelt den Themer-Standortregeln. Klicken Sie auf Regel hinzufügen, um zusätzliche Regeln zu aktivieren.

Schritt 3: Klicken Sie auf „Aktualisieren“, um Ihre Änderungen zu speichern

Wenn Sie mit dem Hinzufügen Ihres Code-Snippets in der Assistant Code App fertig sind, klicken Sie auf die Schaltfläche „Aktualisieren“ in der oberen rechten Ecke, um Ihre Änderungen zu speichern:

Aktualisieren Sie als Nächstes Ihre Seite, damit Ihre Änderungen wirksam werden.

Codefragmente duplizieren, in der Bibliothek speichern, exportieren oder löschen

Nachdem wir Ihr erstes Code-Snippet mit der Code-App hinzugefügt haben, erkunden wir einige zusätzliche Funktionen. Scrollen Sie nach unten über den Abschnitt „Standort“ hinaus, um Optionen im Abschnitt „Aktionen“ zu finden:

Hier können Sie Snippet-Einstellungen wie das Aktivieren, Duplizieren, Exportieren oder Speichern in Ihrer Bibliothek mit Assistant Pro verwalten und so mehr Kontrolle und Flexibilität bei den Anpassungen Ihrer Website erhalten.

• Duplizieren: Erstellen Sie eine exakte Kopie des aktuellen Code-Snippets. Sie können auch auf das Duplikatsymbol klicken, wenn Sie die Listenansicht eines Codetyps in der Code-App anzeigen.
• In Bibliothek speichern: Zum Speichern in einer Cloud-Bibliothek ist eine Assistant Pro-Verbindung erforderlich. Wenn Sie ein Snippet in einer Bibliothek speichern, wird es nicht an dem Ort gespeichert, den Sie dem Snippet zugewiesen haben. Wenn Sie ein Snippet aus einer Bibliothek importieren, müssen Sie das Snippet anschließend einem Speicherort zuweisen.
• Exportieren: Exportieren Sie die Code-Snippet-Datei als TXT-Datei.
• Löschen: Dadurch wird das Code-Snippet dauerhaft aus Assistant gelöscht. Sie sehen eine Bestätigungsmeldung, um sicherzustellen, dass Sie das Snippet löschen möchten. Diese Aktion kann nicht rückgängig gemacht werden.

Wenn Sie nun auf das Code-App-Symbol klicken, werden alle Ihre Codefragmente in der Listenansicht und an einem Ort angezeigt:

Beachten Sie, dass Sie in der Listenansicht die Möglichkeit haben, einzelne Snippets ein- und auszuschalten, ohne jedes einzelne einzeln bearbeiten zu müssen, was Ihnen Zeit und Mühe spart. Wenn ein Snippet deaktiviert ist, wird „Deaktiviert“ angezeigt. Wenn es aktiviert ist, wird „Aktiviert“ mit einem grünen Punkt angezeigt. Sie können es schnell umschalten, indem Sie auf diesen Indikator klicken.

Beispiele für WordPress-Codefragmente

Es gibt viele CSS- und JavaScript- Code-Snippets für WordPress, die häufig verwendet werden, um die Funktionalität zu verbessern, Elemente zu gestalten oder Websites Interaktivität zu verleihen. Hier sind einige beliebte Beispiele:

CSS-Code-Snippets

• Benutzerdefinierte Schriftarten: Implementieren Sie benutzerdefinierte Schriftarten mithilfe von CSS, entweder von Google Fonts oder anderen Quellen.
• Formulare gestalten: Passen Sie das Erscheinungsbild von Formularen auf Ihrer WordPress-Site an.
• Elemente ausblenden: CSS-Code zum Ausblenden bestimmter Elemente oder Abschnitte Ihrer Website.
• Animationen: CSS-Animationen oder Übergänge, um Elementen visuelle Effekte hinzuzufügen.
• Hover-Effekte: Fügen Sie Hover-Effekte zu Schaltflächen, Links, Bildern usw. hinzu.
• Anpassen von Navigationsmenüs: Gestalten Sie Navigationsmenüs so, dass sie zum Design und Layout Ihrer Website passen.
• Einklebende Kopf-/Fußzeilen: Sorgen Sie dafür, dass Kopf- oder Fußzeilen am oberen oder unteren Rand der Seite haften bleiben, wenn Benutzer scrollen.
• Dunkler Modus: Implementieren Sie mithilfe von CSS ein Dark-Mode-Theme für Ihre Website.

JavaScript-Codeausschnitte

• Reibungsloser Bildlauf: JavaScript-Code, um einen reibungslosen Bildlauf zu ermöglichen, wenn Benutzer auf interne Links klicken.
• Lazy Loading von Bildern: Implementieren Sie Lazy Loading, um die Seitenladezeiten zu verkürzen, indem Bilder nur dann geladen werden, wenn sie benötigt werden.
• Modale Fenster: Erstellen Sie modale Fenster oder Popups zur Anzeige zusätzlicher Inhalte oder Nachrichten.
• Akkordeon-/zusammenklappbare Abschnitte: JavaScript-Code zum Erstellen von Abschnitten im Akkordeon-Stil, die sich beim Klicken erweitern oder reduzieren lassen.
• Sichtbarkeit umschalten: JavaScript-Code zum Umschalten der Sichtbarkeit von Elementen auf der Seite.
• Unendliches Scrollen: Laden Sie mehr Inhalte, während Benutzer auf der Seite nach unten scrollen, ohne dass sie auf Paginierungslinks klicken müssen.
• Dropdown-Menüs: Erweitern Sie Navigationsmenüs mit Dropdown-Funktionalität mithilfe von JavaScript.
• Slider/Karussell: Erstellen Sie Bild-Slider oder Karussells, um Inhalte optisch ansprechend zu präsentieren.
• Ajax Load More: Laden Sie zusätzliche Inhalte dynamisch, ohne die gesamte Seite neu zu laden, nützlich für Blogs oder Portfolios.

Dies sind nur einige Beispiele, und es gibt unzählige weitere CSS- und JavaScript-Snippets, mit denen Sie Ihre WordPress-Site anpassen und verbessern können. Erstellen Sie wie immer unbedingt eine Sicherungskopie Ihrer Website, bevor Sie beginnen, und stellen Sie sicher, dass der von Ihnen hinzugefügte Code ordnungsgemäß getestet wurde und nicht mit Ihrem vorhandenen Design oder Ihren Plugins in Konflikt steht.

Abschluss

Sind Sie bereit, Ihren Webdesign-Workflow auf die nächste Stufe zu heben? Dann ist die neueste Ergänzung unseres Assistant-Plugins, die Code-App , genau das Richtige für Sie. Egal, ob Sie an Ihrem nächsten WordPress-Projekt arbeiten oder eine Codierungsherausforderung beheben, dieses Tool wurde entwickelt, um Ihren Arbeitsablauf zu optimieren und die Produktivität zu steigern.

Aber das ist noch nicht alles – mit einem kostenlosen Assistant Pro-Konto schalten Sie noch mehr Funktionen frei, um Ihren Entwicklungsprozess zu beschleunigen. Gewinnen Sie gemeinsam mit anderen Webentwicklern wertvolle Zeit und organisieren Sie Ihre Projekte mühelos. Warten Sie nicht länger – melden Sie sich noch heute an und erleben Sie den Unterschied selbst!