- Aktualisierungsdatum und -zeit in Beiträgen neben dem Veröffentlichungsdatum anzeigen
- Kommas zwischen Tags entfernen
- Hintergrundfarbe für Kategorien und Tags hinzufügen
- Zeigen Sie für jede Kategorie eine andere Hintergrundfarbe an oder Tag
- Zeigen Sie nur die Jahre im Archiv-Widget an
- Einfacher Lesefortschrittsbalken ohne Plugin
- Ändern Sie das Logo nur auf einer bestimmten Seite
- Ausblenden der Nebenleiste in der mobilen Version
- Bilder in der Schleife links und rechts anzeigen
- Die Schaltfläche "Mehr lesen" anpassen
- Gestaltung der Paginierung von Einträgen
- Zentrieren der Browserbox
- Textgröße für Kategorien und Tags
- Animierte unterstrichene Links
Hier finden Sie einige nützliche Codeschnipsel. Es handelt sich um Funktionen, Filter und CSS, die ich für die Vorlage verwende oder irgendwann einmal benötigt habe GeneratePressdie ich verwende und ich empfehle
Einige von ihnen sind aus Ihrem Hause gekommen support-Forum, eine unerschöpfliche Quelle von Lösungen, von seinem dokumentation und andere aus Supportanfragen und Suchen.
Aktualisierungsdatum und -zeit in Beiträgen neben dem Veröffentlichungsdatum anzeigen
Dieser Filter zeigt Datum und Uhrzeit der Aktualisierung von GeneratePress-Einträgen an. Das hängt davon ab, wie Sie das Datum unter Einstellungen/Allgemein/Datumsformat/Anpassen konfiguriert haben. In dem hier verwendeten Fall sieht es so aus: d/m/Y : H:i
/* Fecha y Hora de PUBLICADO Y ACTUALIZADO EN META POST */
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
if ( get_the_date() !== get_the_modified_date() ) {
$time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">Publicado: %2$s</time> | <time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">Actualizado: %4$s | </time>';
}
$time_string = sprintf( $time_string,
esc_attr( get_the_date( 'c' ) ),
esc_html( get_the_date() ),
esc_attr( get_the_modified_date( 'c' ) ),
esc_html( get_the_modified_date() )
);
return sprintf( '<span class="posted-on">%s</span> ',
$time_string
);
}, 10, 2 );Kommas zwischen Tags entfernen
Mehr gibt es nicht zu sagen.
Wenn Sie nicht möchten, dass Kommas zwischen Tags angezeigt werden, zeigt dieser Filter sie nicht an.
Es ist sehr nützlich, wenn Sie die Tags einfärben oder ein anderes Symbol zur Trennung verwenden möchten.
/* QUITA LAS COMAS EN LAS ETIQUETAS */
add_filter('generate_term_separator', function($separator, $tags){
return " ";
}, 10, 2);Hintergrundfarbe für Kategorien und Tags hinzufügen
Mit diesem CSS können Sie allen Kategorien und/oder allen Tags eine beliebige Farbe zuweisen.
Das CSS-Beispiel würde sie folgendermaßen anzeigen:
/* Categorías y colores */
.entry-meta .cat-links a {
padding: 3px 5px;
font-size: 17px;
background-color: #B50000;
border-radius: 5px;
color: #FFF
}
/* Etiquetas y colores */
.entry-meta .tags-links a {
padding: 3px 5px;
font-size: 17px;
background-color: #006a05;
border-radius: 5px;
color: #FFFF
}
/* Espacio entre línea de categorías y etiquetas */
.cat-links {
margin-bottom: 10px;
}Zeigen Sie für jede Kategorie eine andere Hintergrundfarbe an oder Tag
Mit diesem CSS können Sie jeder Kategorie eine andere Farbe zuweisen. Dazu müssen Sie für jede Kategorie oder jedes Etikett, das Sie ändern möchten, einen Artikel wie diesen schreiben. Im ersten Beispiel verwenden wir die Kategorie"wordpress", der wir einen blauen Hintergrund und weißen Text hinzufügen. Im zweiten Beispiel verwenden wir den Tag"blog", dem wir einen orangefarbenen Hintergrund und weißen Text hinzufügen.
Und das ist das Ergebnis..:
/* Mostrar un color diferente para cada categoría o etiqueta */
#main span.cat-links a[href*="wordpress"] {
background-color: #005ca5;
color: white;
}
#main span.tags-links a[href*="blog"] {
background-color: #d47e00;
color: white;
}Zeigen Sie nur die Jahre im Archiv-Widget an
Diese Funktion sorgt dafür, dass im Archiv-Widget nur die Jahre statt der Monate angezeigt werden. Es funktioniert für jede Vorlage, da es sich um ein natives WordPress-Widget handelt. Nützlich, wenn Ihr Blog sehr alt ist und das Dropdown-Menü für die Monate bereits zu lang ist. Im Beispiel wird sie mit der Anzahl der veröffentlichten Beiträge angezeigt.
function my_limit_archives( $args ) {
$args['type'] = 'yearly';
return $args;
}
add_filter( 'widget_archives_args', 'my_limit_archives' );
add_filter( 'widget_archives_dropdown_args', 'my_limit_archives' );
Einfacher Lesefortschrittsbalken ohne Plugin
Es gibt mehrere Plugins zum Hinzufügen einer Lesefortschrittsleiste in WordPress sowie Addons für Elementoraber mit ein bisschen Code und einem Filter von GeneratePress Elements kann es ganz einfach viel leichter gemacht werden. Dieser Code ist von Somnath Sahu
*Für dieses Beispiel müssen Sie die GeneratePress Premium-Version verwenden.
Zuerst erstellen wir eine filter mit Elementen mit diesem Code.
<div class="progress-container">
<div class="progress-bar" id="myProgressBar"></div>
</div>
<script>
window.onscroll = function() {myFunction()};
function myFunction() {
var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
var scrolled = (winScroll / height) * 100;
document.getElementById("myProgressBar").style.width = scrolled + "%";
}
</script>Wir setzen es mit der Position wp_head und lassen es in Posts / All Posts anzeigen.
/* Barra de progreso de lectura */
.progress-container {
width: 100%;
height: 8px; /* Ancho del contenedor de la barra de progreso */
background: #ccc; /* Color del contenedor sobre el que se mueve la barra de progreso */
}
.progress-bar {
height: 8px; /* Ancho de la barra de progreso */
background: #a70404; /* Color de la barra de progreso */
width: 0%;
position:fixed;
z-index:999;
}Und so wird dieser Code angezeigt, nachdem Sie die Farbe auf grün geändert haben
Der Fortschrittsbalken erscheint oben, er begleitet uns während des Lesens und wird größer, wenn wir nach unten scrollen und kleiner, wenn wir nach oben scrollen.
Ändern Sie das Logo nur auf einer bestimmten Seite
Ich brauchte das einmal und fand es damals auf der Seite von David Lanau. Der Filter zeigt ein anderes Logo nur auf der von Ihnen angegebenen Seite an. Ich habe ihn verwendet, um ein anderes Logo auf einer Kategorieseite zu platzieren, die Inhalte eines bestimmten Themas gruppiert.
add_filter( 'generate_logo','tu_custom_about_logo' );
function tu_custom_about_logo( $logo )
{
// Si por ejemplo estamos en la página servicios, vamos a poner nuestro logo personalizado para esta página
if ( is_page( 'servicios' ) )
return 'PON LA URL DEL LOGO AQUÍ';
// Y SI NO, PON EL LOGO GENERAL
return $logo;
}Ausblenden der Nebenleiste in der mobilen Version
Wenn Sie zu denjenigen gehören, die noch die Seitenleiste verwenden und auf die aMP-Seitenwenn Sie die native mobile Version von GeneratePress mit Seitenleiste verwenden, können Sie diese mit diesem CSS nur für die mobile Version ausblenden.
In diesem Fall können Sie es zum Stylesheet in Ihrem Child-Theme oder über Benutzerdefiniert/Zusätzliches CSS hinzufügen.
Rechte Seitenleiste ausblenden
@media(max-width: 768px) {
#right-sidebar {
display: none;
}
}
Linke Seitenleiste ausblenden
@media(max-width: 768px) {
#left-sidebar {
display: none;
}
}Beides ausblenden
@media(max-width: 768px) {
#right-sidebar, #left-sidebar {
display: none;
}
}
Bilder in der Schleife links und rechts anzeigen
Wenn Sie eine vorlage traditionellen GeneratePress wie Marketer oder ähnlichem, können Sie mit diesem Code das angezeigte Bild abwechselnd links oder rechts in der Schleife anzeigen
.post-image-aligned-left .type-post:nth-child(even) .inside-article .post-image {
margin-left: 2em;
float: right;
text-align: right;
}Ich habe diesen Code gefunden bei aquigeneratepress.com wo Sie weitere nützliche Tricks finden können. Und hier ist das Ergebnis
Die Schaltfläche "Mehr lesen" anpassen
Wie oben, ist dieses CSS für die Schaltfläche "Mehr lesen". Es ist das, was ich hier verwende und platziert es rechts unter dem Auszug auf der Startseite.
a.read-more {
display: inline-block;
color: white !important;
padding: 10px;
border-radius: 10px;
float:right
}Gestaltung der Paginierung von Einträgen
Ein Filter und ein bisschen CSS, um diesen Look für die Paginierung der Beiträge auf der Startseite zu erhalten. Von hier aus können Sie die Einstellungen nach Herzenslust verändern.
Als erstes müssen wir die Wörter Previous und Next durch die Symbole << und >> mit diesem Filter ersetzen, den Sie in der functions.php Ihres Child-Themes oder mit Code Snippet hinzufügen können.
add_filter( 'generate_next_link_text', function() {
return '>>';
} );
add_filter( 'generate_previous_link_text', function() {
return '<<';
} );Und dann das CSS, das auf dieselbe Weise wie in den vorherigen Fällen hinzugefügt wird
#nav-below {
text-align: center;
.paging-navigation .nav-links>* {
schriftgröße: 20px;
padding: 7px 10px;
hintergrundfarbe: #b50707;
farbe: Weiß;
border-radius: 4px;
}
.paging-navigation .nav-links span.page-numbers.current {
hintergrund: rot;
farbe: #ffffffff;
}
a.next.page-numbers > span {
anzeige: keine;
}#nav-below {
text-align: center;
.paging-navigation .nav-links>* {
font-size: 20px;
padding: 7px 10px;
background-color: #b50707;
color: white;
border-radius: 4px;
}
.paging-navigation .nav-links span.page-numbers.current {
background: red;
color: #ffffff;
}
a.next.page-numbers > span {
display: none;
}Zentrieren der Browserbox
Das native GeneratePress-Suchfeld ist ein wenig lahm, hier ist ein bisschen CSS, um es an Geräte anzupassen und zu zentrieren.
/* Centrar caja de búsqueda en menú principal */
form.search-form.navigation-search.nav-search-active {
width:50%;
left:50%;
transform:translateX(-50%)
}
/* Responsive caja de búsqueda en móvil - tablet y PC */
@media (max-width: 768px) {
/* CSS para móvil */
form.search-form.navigation-search.nav-search-active {
width:100%;
left:50%;
transform:translateX(-50%)
}
}
@media (min-width: 769px) and (max-width: 1024px) {
/* CSS para tablet */
form.search-form.navigation-search.nav-search-active {
width:100%;
left:50%;
transform:translateX(-50%)
}
.inside-navigation {
align-items: flex-end !important;
flex-direction:column-reverse;
}
}
@media (min-width: 1025px) {
/* CSS para PC */
form.search-form.navigation-search.nav-search-active {
width:40%;
left:50%;
transform:translateX(-50%)
}
}
Textgröße für Kategorien und Tags
Wenn Sie die Kategorien und Tags unter den Beiträgen anzeigen, können Sie durch Hinzufügen dieses CSS die Größe ändern und weitere CSS hinzufügen, um sie nach Ihren Wünschen zu gestalten. Alle Klassen, um sie zu ändern, finden Sie in der Dokumentation oder im CSS selbst, aber wenn Sie es nicht kompliziert machen wollen und nur die Größe ändern möchten, hier ist es.
.entry-meta .cat-links a {
padding: 3px 5px;
font-size: 20px;
}
.entry-meta .tags-links a {
padding: 3px 1px;
font-size: 20px;
}Animierte unterstrichene Links
CSS, um einen animierten Effekt für Ihre Textlinks zu erstellen, wie Sie ihn im folgenden Bild sehen:
/* Subrayado de enlace animado con color de fondo */
p a{
font-weight: bold;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fdede7), to(#fdede7));
background-image: linear-gradient(to bottom, #fdede7 0%, #fdede7 100%);
background-repeat: no-repeat;
background-size: 100% 00%;
background-position: 0 111%;
-webkit-transition: background-size .25s ease-in;
transition: background-size .25s ease-in;
padding-left: 2px;
padding-right: 2px;
border-bottom: 2px solid #ec4911;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
p a:hover{
background-size: 100% 100%;
}In background-image und border-bottom können Sie die Farben ändern.
Sie müssen das Verhalten in Absätzen, Schaltflächen und anderen Elementen, die Links enthalten, beobachten, um es so anzupassen, dass nichts fehl am Platz ist.
Der Code lautet Kyle Van Deusen die zusätzlich zu den The Admin Bar, hat einen interessanten Blog namens Generatetweaks wo er einige kuriose Codes und Vorlagen für GeneratePress und GenerateBloks veröffentlicht, wie zum Beispiel diese Dunkelmodus für GP und GB.
