Trick # 492 | Dieser Beitrag beinhaltet 1076 Wörter. – Geschätzte Lesezeit: ca. 6 Minuten.
Das Portfolio-Modul des Divi-Themes zeigt eine Übersicht über ihre Projektposts. Es bietet hübsche Möglichkeiten und doch ist es nicht perfekt. So lassen sich etwa keine Read-More-Buttons anzeigen und auch Auszugstexte verwehrt das Portfolio-Modul. Zeit, um nachzubessern. Ist sogar recht einfach.
OK: Auf den ersten Blick sieht das nach einem Monster-Code aus, den wir Ihnen da zumuten. Wagen Sie sich dennoch daran: Es ist nämlich nicht gar so wild.
«Out of the box» werden die einzelnen Project-Posts im Portfolio-Modul eher karg dargestellt. Etwa so wie nebenan:
Es gibt zwar einige Einstellmöglichkeiten, Auszüge oder Read-More-Links lassen sich aber partout nicht anzeigen.
Ausser: Sie helfen etwas nach.
Dafür benötigen Sie das folgende Script. Fügen Sie es der Datei functions.php Ihrer Website hinzu. Die Datei können Sie unter Design/Theme-Datei-Editor bearbeiten:
if (!function_exists('code_misc_filter_portfolio_output')):
function code_misc_filter_portfolio_output($output, $render_slug, $module)
{
if (function_exists('et_fb_is_enabled') && et_fb_is_enabled()) {
return $output;
}
if (function_exists('et_builder_bfb_enabled') && et_builder_bfb_enabled()) {
return $output;
}
if (is_admin() || wp_doing_ajax() || is_array($output)) {
return $output;
}
if ('et_pb_portfolio' !== $render_slug && 'et_pb_filterable_portfolio' !== $render_slug) {
return $output;
}
if (empty($output)) {
return $output;
}
// Textauszug anzeigen (true/false)
$show_excerpts = true;
// Auszugslänge (Anzahl Wörter) definieren
$excerpt_limit = 20;
// Zeichenfolge bei gekürzten Auszügen definieren
$excerpt_more = ' ...';
// Weiterlesen-Button anzeigen (true/false)
$show_readmore_button = true;
// Text des Weiterlesen-Buttons
$readmore_button_text = 'Mehr erfahren';
$dom = new DOMDocument('1.0', 'UTF-8');
if (function_exists('mb_convert_encoding')) {
$dom->loadHTML(mb_convert_encoding($output, 'HTML-ENTITIES', 'UTF-8'), LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$dom->encoding = 'utf-8';
} else {
$dom->loadHTML('<?xml version="1.0" encoding="UTF-8"?>'."\n".$output, LIBXML_NOERROR | LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
}
$dom_xpath = new DOMXPath($dom);
$nodes = $dom_xpath->query('//div[contains(@id,"post-")]');
if (isset($nodes->length) && 0 !== $nodes->length) {
foreach ($nodes as $node) {
$node_id = $node->getAttribute('id');
$parent_ele = $dom->getElementById($node_id);
$poject_id = str_replace('post-', '', $node_id);
$excerpt = wp_strip_all_tags(get_the_excerpt($poject_id));
$link = get_the_permalink($poject_id);
if (!empty($excerpt) && $show_excerpts) {
$excerpt = wp_trim_words($excerpt, $excerpt_limit, $excerpt_more);
$p_ele = $dom->createElement('p', $excerpt);
$p_ele->setAttribute('class', 'et_pb_portfolio_excerpt');
$parent_ele->appendChild($p_ele);
$output = $dom->saveHTML();
}
if ($show_readmore_button) {
$button_ele = $dom->createElement('a', $readmore_button_text);
$button_ele->setAttribute('href', $link);
$button_ele->setAttribute('class', 'et_pb_portfolio_link');
$parent_ele->appendChild($button_ele);
$output = $dom->saveHTML();
}
}
}
return $output;
}
add_filter('et_module_shortcode_output', 'code_misc_filter_portfolio_output', 10, 3);
endif;Einstellungsmöglichkeiten (und die Erklärungen dazu) finden Sie auf den Zeilen 19 bis 28. Dort können Sie nach Ihren Wünschen Änderungen vornehmen. Den Rest des Codes sollten Sie unverändert belassen.
Des Weiteren benötigen Sie noch etwas CSS-Code, um den neuen Auszug und den Button zu stylen. Fügen Sie ihn in das CSS-Stylesheet Ihrer Website ein – unter Design/Customizer/Zusätzliches CSS:
/* Porfolio-Auszug-Text stylen */
.et_pb_portfolio_excerpt {
color: #000000;
font-size: 18px;
}
/* Weiterlesen-Link als Button stylen */
.et_pb_portfolio_link {
color: #ffffff;
background: #293280;
border: 2px solid #293280;
padding: .7em 1.3em;
margin-top: 20px;
border-radius: 10px;
text-transform: capitalize;
display: inline-block;
transition: all 0.3s ease-in-out;
}
/* Weiterlesen-Link beim Hovern stylen */
.et_pb_portfolio_link:hover {
background: transparent;
color: #293280;
border: 2px solid #293280;
transition: all 0.3s ease-in-out;
}Auch diese Codes können Sie natürlich nach Ihren Gestaltungsbedürfnissen und gemäss Ihrem Webdesign anpassen.
Das Portfolio-Modul von oben wird nun mit dem Textauszug und mit dem Read-More-Button ergänzt und zeigt sich so wie nebenan:
Werbung
Werbung
