Bootstrap Tabellen automatisch responsiv in WordPress einfügen

Responsive Tabellen sind von Haus aus im Bootstrap Framework enthalten. Mit einem kleinen Codeschnipsel kannst du automatisch alle Tabellen um die benötigten Klassen erweitern.

Dieses Snippet funktioniert sowohl für Bootstrap 3, als auch für Bootstrap 4.

table-responsive Wrapper um WordPress Tabellen legen

Das Snippet passt zwei Eigenschaften der Tabellen Konstrukte innerhalb deiner WordPress Seiten und Beiträge an. Die Umsetzung in PHP erfolgt mit einem regulären Ausdruck.

Zum einen wirst du Tabellen auf deinem Smartphone horizontal mit dem Finger scrollen können, zum anderen wird die Darstellung der Tabelle auf Bootstrap Standard gesetzt. Somit entfällt die händische Erweiterung deines HTML Codes um Bootstrap Tabellen Klassen vollständig.

<!-- 1. HTML table -->
<table>
    <tbody>
        <tr>
            <td>A</td>
            <td>B</td>
        </tr>
        <tr>
            <td>C</td>
            <td>D</td>
        </tr>
    </tbody>
</table>

<!-- 2. Bootstrap classes -->
<div class="table-responsive">
    <table class="table table-hover">
        <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
            </tr>
            <tr>
                <td>C</td>
                <td>D</td>
            </tr>
        </tbody>
    </table>
</div>

Zuerst wird ein div mit der Klasse table-responsive um deine Tabelle gelegt.
Danach werden zwei Bootstrap Klassen in das öffnende table Tag eingefügt.

Responsive Bootstrap Tabellen

Dieser Filter überschreibt nur Tabellen innerhalb des the_content Bereichs. Hast du einer Tabelle bereits eigene Klassen zugewiesen, überspringt der Filter diese.

function wps_bootstrap_add_custom_table_class( $content )
{
    $pattern = '/(<table>)((.|\n)*?)(<\/table>)/';
    $prefix  = '<div class="table-responsive"><table class="table table-hover">';
    $suffix  = '</table></div>';

    /*
     * 1. Get table content
     * 2. Add custom tags
     */
    $content = preg_replace(
        $pattern,
        $prefix . '$2' . $suffix,
        $content
    );

    return $content;
}

add_filter(
    'the_content',
    'wps_bootstrap_add_custom_table_class'
);

Kopiere dieses Snippet einfach in deine functions.php Datei und passe die Klassen bei Bedarf an.