- Εμφάνιση της ημερομηνίας και της ώρας ενημέρωσης στις αναρτήσεις δίπλα στην ημερομηνία δημοσίευσης
- Κινούμενοι υπογραμμισμένοι σύνδεσμοι
- Αφαίρεση των κομμάτων μεταξύ των ετικετών
- Προσθήκη χρώματος φόντου σε κατηγορίες και ετικέτες
- Εμφάνιση διαφορετικού χρώματος φόντου για κάθε κατηγορία ή ετικέτα
- Εμφάνιση μόνο των ετών στο widget αρχείου
- Απλή μπάρα προόδου ανάγνωσης χωρίς πρόσθετο
- Αλλαγή του λογότυπου μόνο σε μια συγκεκριμένη σελίδα
- Απόκρυψη της μπάρας στην έκδοση για κινητά τηλέφωνα
- Εμφάνιση των εμφανιζόμενων εικόνων στον αριστερό και δεξιό βρόχο
- Προσαρμογή του κουμπιού "Διαβάστε περισσότερα"
- Διαμόρφωση σελιδοποίησης δημοσιεύσεων
- Κεντράρισμα του πλαισίου αναζήτησης
- Μέγεθος κειμένου των κατηγοριών και των ετικετών
Ακολουθούν ορισμένα χρήσιμα αποσπάσματα κώδικα. Πρόκειται για συναρτήσεις, φίλτρα και CSS που χρησιμοποιώ ή χρειάστηκα σε κάποιο σημείο για το πρότυπο GeneratePresstemplate, το οποίο χρησιμοποιώ και προτείνω.
Κάποια από αυτά έχουν βγει από το φόρουμ υποστήριξηςφόρουμ, μια ανεξάντλητη πηγή λύσεων, από το δικό σας τεκμηρίωση και άλλες από ερωτήματα και αναζητήσεις υποστήριξης.
Εμφάνιση της ημερομηνίας και της ώρας ενημέρωσης στις αναρτήσεις δίπλα στην ημερομηνία δημοσίευσης
Αυτό το φίλτρο εμφανίζει την ημερομηνία και την ώρα ενημέρωσης στις δημοσιεύσεις του GeneratePress. Εξαρτάται από τον τρόπο με τον οποίο έχετε ρυθμίσει την ημερομηνία στις Ρυθμίσεις/Γενικά/Μορφή ημερομηνίας/Προσαρμοσμένη. Στην περίπτωση που χρησιμοποιείται εδώ φαίνεται ως εξής: 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 );Κινούμενοι υπογραμμισμένοι σύνδεσμοι
CSS για να δημιουργήσετε ένα κινούμενο εφέ για τους συνδέσμους κειμένου σας, όπως αυτό που βλέπετε στο παρακάτω gif:
/* 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%;
}Στα background-image και border-bottom μπορείτε να αλλάξετε τα χρώματα.
Θα πρέπει να παρατηρήσετε τη συμπεριφορά σε παραγράφους, κουμπιά και άλλα στοιχεία που περιλαμβάνουν συνδέσμους για να την προσαρμόσετε ώστε να μην φαίνεται παράταιρη.
Ο κώδικας προέρχεται από τον Kyle Van Deusen, ο οποίος, εκτός από το The Admin Bar, έχει ένα ενδιαφέρον blog με τίτλο Generatetweaks όπου δημοσιεύει διάφορα περίεργα κομμάτια κώδικα και πρότυπα για το GeneratePress και το GenerateBloks, όπως αυτό το dark mode για το GP και το GB.
Αφαίρεση των κομμάτων μεταξύ των ετικετών
Αυτά είναι όλα όσα πρέπει να γίνουν.
Αν δεν θέλετε κόμματα μεταξύ των ετικετών, αυτό το φίλτρο δεν θα τα εμφανίζει.
Είναι πολύ χρήσιμο αν αποφασίσετε να χρωματίσετε τις ετικέτες ή να χρησιμοποιήσετε κάποιο άλλο σύμβολο για να τις διαχωρίσετε.
/* QUITA LAS COMAS EN LAS ETIQUETAS */
add_filter('generate_term_separator', function($separator, $tags){
return " ";
}, 10, 2);Προσθήκη χρώματος φόντου σε κατηγορίες και ετικέτες
Με αυτό το CSS μπορείτε να προσθέσετε όποιο χρώμα θέλετε σε όλες τις κατηγορίες ή/και όλες τις ετικέτες.
Το παράδειγμα CSS θα τις εμφάνιζε ως εξής:
/* 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;
}Εμφάνιση διαφορετικού χρώματος φόντου για κάθε κατηγορία ή ετικέτα
Με αυτό το CSS μπορείτε να δώσετε διαφορετικό χρώμα σε κάθε κατηγορία. Για να το κάνετε αυτό θα πρέπει να γράψετε ένα κομμάτι όπως αυτό για κάθε κατηγορία ή ετικέτα που θέλετε να τροποποιήσετε. Στο πρώτο παράδειγμα χρησιμοποιούμε την κατηγορία"wordpress" στην οποία προσθέτουμε μπλε φόντο και λευκό κείμενο. Στο δεύτερο παράδειγμα χρησιμοποιούμε την ετικέτα"blog" στην οποία προσθέτουμε πορτοκαλί φόντο και λευκό κείμενο.
Και αυτό είναι το αποτέλεσμα..:
/* 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;
}Εμφάνιση μόνο των ετών στο widget αρχείου
Αυτή η λειτουργία θα κάνει το αναπτυσσόμενο widget αρχείου να εμφανίζει μόνο τα έτη αντί για τους μήνες. Λειτουργεί για οποιοδήποτε πρότυπο, καθώς ενεργεί σε ένα εγγενές widget του WordPress. Χρήσιμη αν το ιστολόγιό σας είναι πολύ παλιό και το dropdown των μηνών είναι ήδη πολύ μεγάλο. Στο παράδειγμα εμφανίζεται με τον αριθμό των δημοσιευμένων αναρτήσεων.
/* MOSTRAR SOLO AÑOS EN ARCHIVO WIDGET */
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' );
Απλή μπάρα προόδου ανάγνωσης χωρίς πρόσθετο
Υπάρχουν αρκετά πρόσθετα για να προσθέσετε μια μπάρα προόδου ανάγνωσης στο WordPress και επίσης πρόσθετα για Elementorαλλά με λίγο κώδικα και ένα φίλτρο GeneratePress Elements μπορεί εύκολα να γίνει πολύ πιο ελαφρύ. Αυτός ο κώδικας είναι από Somnath Sahu.
*Για αυτό το παράδειγμα χρησιμοποιούμε την έκδοση GeneratePress Premium .
Αρχικά δημιουργούμε ένα φίλτρο με στοιχεία με αυτόν τον κώδικα.
<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>Το διαμορφώνουμε με τη θέση wp_head και ότι εμφανίζεται στο Entries / All entries.
/*** Barra de progreso de lectura - Progress bar **/
.progress-container {
width: 100%;
height: 8px;
background: #ccc; /** Change Progress bar background color **/
}
.progress-bar {
height: 8px;
background: #a70404; /** Change Progress bar color **/
width: 0%;
position:fixed;
z-index:999;
}Και κάπως έτσι εμφανίζεται αυτός ο κώδικας μετά την αλλαγή του χρώματος σε πράσινο.
Η μπάρα προόδου θα εμφανίζεται στο πάνω μέρος, θα μας συνοδεύει κατά τη διάρκεια της ανάγνωσης και θα μεγαλώνει όσο κάνουμε κύλιση προς τα κάτω και θα μικραίνει αν κάνουμε κύλιση προς τα πάνω.
Αλλαγή του λογότυπου μόνο σε μια συγκεκριμένη σελίδα
Το χρειάστηκα αυτό μια φορά και το βρήκα μια φορά στη σελίδα του David Lanau.
Το φίλτρο εμφανίζει ένα διαφορετικό λογότυπο μόνο στη σελίδα που καθορίζετε.
Το χρησιμοποίησα για να βάλω ένα διαφορετικό λογότυπο σε μια σελίδα κατηγορίας που ομαδοποιούσε τα περιεχόμενα ενός συγκεκριμένου θέματος.
add_filter( 'generate_logo','tu_custom_about_logo' );
function tu_custom_about_logo( $logo )
{
// Si 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;
}Απόκρυψη της μπάρας στην έκδοση για κινητά τηλέφωνα
Αν είστε από εκείνους που εξακολουθούν να χρησιμοποιούν την πλαϊνή μπάρα και έχετε απαλλαγεί από την aMP σελίδεςσελίδες, οπότε χρησιμοποιείτε την εγγενή έκδοση του GeneratePress για κινητά με sidebar, με αυτό το CSS μπορείτε να την αποκρύψετε μόνο για την έκδοση για κινητά.
Σε αυτή την περίπτωση μπορείτε να το προσθέσετε στο φύλλο στυλ στο θέμα παιδί σας ή από το Custom / Additional CSS.
Απόκρυψη της δεξιάς πλευρικής μπάρας
@media(max-width: 768px) {
#right-sidebar {
display: none;
}
}Απόκρυψη αριστερής πλευρικής μπάρας
@media(max-width: 768px) {
#left-sidebar {
display: none;
}
}Απόκρυψη και των δύο
Απόκρυψη και των δύο πλευρικών γραμμών.
@media(max-width: 768px) {
#right-sidebar, #left-sidebar {
display: none;
}
}Εμφάνιση των εμφανιζόμενων εικόνων στον αριστερό και δεξιό βρόχο
Εάν χρησιμοποιείτε ένα πρότυπο πρότυπο όπως το Marketer ή παρόμοιο, με αυτόν τον κώδικα μπορείτε να εμφανίζετε την προβαλλόμενη εικόνα εναλλάξ αριστερά και δεξιά στο βρόχο.
.post-image-aligned-left .type-post:nth-child(even) .inside-article .post-image {
margin-left: 2em;
float: right;
text-align: right;
}Βρήκα αυτόν τον κώδικα στο aquigeneratepress.com όπου μπορείτε να βρείτε και άλλα χρήσιμα κόλπα. Και εδώ είναι το αποτέλεσμα:
Προσαρμογή του κουμπιού "Διαβάστε περισσότερα"
Όπως και παραπάνω, αυτό το CSS είναι για το κουμπί "Διαβάστε περισσότερα". Είναι αυτό που χρησιμοποιώ εδώ και το τοποθετεί δεξιά κάτω από το απόσπασμα στην πρώτη σελίδα.
a.read-more {
display: inline-block;
color: white !important;
padding: 10px;
border-radius: 10px;
float:right
}Διαμόρφωση σελιδοποίησης δημοσιεύσεων
Ένα φίλτρο και λίγο CSS για να αποκτήσετε αυτή την εμφάνιση για τη σελιδοποίηση των αναρτήσεων στην πρώτη σελίδα. Από εδώ και πέρα, μπορείτε να το προσαρμόσετε κατά βούληση.
Το πρώτο πράγμα που πρέπει να κάνετε είναι να αντικαταστήσετε τις λέξεις Previous και Next με τα σύμβολα << και >> με αυτό το φίλτρο που μπορείτε να προσθέσετε στο functions.php του child theme σας ή με το Code Snippet.
/* Cambia ANTERIOR y SIGUIENTE por << y >> en navegación */
add_filter( 'generate_previous_link_text', function() {
return '<<';
} );
add_filter( 'generate_next_link_text', function() {
return '>>';
} );Και στη συνέχεια το CSS, που προστίθεται με τον ίδιο τρόπο όπως και στις προηγούμενες περιπτώσεις
/* Paginacion entradas */
#nav-below {
text-align: center;
}
.paging-navigation .nav-links>* {
font-size: 20px;
padding: 7px 10px;
background-color: #870000;
color: white;
border-radius: 4px;
}
.paging-navigation .nav-links span.page-numbers.current {
background: red;
color: #ffffff;
}
a.next.page-numbers > span {
display: none;
}Κεντράρισμα του πλαισίου αναζήτησης
Η εγγενής μηχανή αναζήτησης του GeneratePress είναι λίγο κουτσή, εδώ λίγο CSS για να την προσαρμόσετε στις συσκευές και να την κεντράρετε.
/* 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 in here for mobile only */
form.search-form.navigation-search.nav-search-active {
width:100%;
left:50%;
transform:translateX(-50%)
}
}
@media (min-width: 769px) and (max-width: 1024px) {
/* CSS in here for tablet only */
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 in here for desktop only */
form.search-form.navigation-search.nav-search-active {
width:40%;
left:50%;
transform:translateX(-50%)
}
}
Μέγεθος κειμένου των κατηγοριών και των ετικετών
Αν εμφανίζετε τις κατηγορίες και τις ετικέτες κάτω από τις δημοσιεύσεις, προσθέτοντας αυτό το CSS μπορείτε να αλλάξετε το μέγεθος και να συνεχίσετε να προσθέτετε CSS για να τις διαμορφώσετε όπως θέλετε. Όλες τις κλάσεις για να τις τροποποιήσετε μπορείτε να τις βρείτε στην τεκμηρίωση ή στο ίδιο το CSS, αλλά αν δεν θέλετε να το περιπλέξετε και θέλετε απλά να αλλάξετε το μέγεθος εδώ το αφήνω.
.entry-meta .cat-links a {
padding: 3px 5px;
font-size: 20px;
}
.entry-meta .tags-links a {
padding: 3px 1px;
font-size: 20px;
}
