Deppenlink entfernen

25.01.2009 in: Markup, PHP, Trickkiste, Webdesign und WordPress • 24 Kommentare
Letzte Änderung: 05.06.2010, 18:38 Uhr.

Richtige Links führen auf eine neue Seite. Ein Deppenlink auf die alte. Der Klick bewirkt schlicht ein Neuladen; er irritiert den Leser, verlängert die Liste des Zurück-Buttons und trägt zum allgemeinen Informationsrauschen auf der Seite bei. Ganz mieses Interaktionsdesign.

Viele aktuelle Blogs und Content-Management-System produzieren solche Deppenlinks, und nur wenige Autoren machen sich die Mühe, diese wieder zu entfernen. Schade.

Dabei läßt sich das Problem ganz einfach lösen: Der Autor weiß, wie sein Quellcode vor der Ausgabe aussieht, und welche Seite gerade aufgerufen wird. Jetzt muß er nur noch die passenden Stellen im Code ersetzen – und schon ist er kein Depp mehr. Und seine Leser müssen eine Entscheidung weniger treffen.

In meinen WordPress-Themes benutze ich ein PHP-Script, das die gesamte Ausgabe des HTML-Codes abfängt, aufräumt und dann sauber ausliefert. Darin findet sich diese Funktion:

/**
 * Entfernt Deppenlinks.
 *
 * @author Thomas Scholz <http://toscho.de>
 * @param string $str Zu filternder String
 * @return string
 */
function remove_self_links($str)
{
    $_SERVER['REQUEST_URI'] = strip_tags($_SERVER['REQUEST_URI']);

    /* Absolute URLs zu absoluten Pfaden.
     * Zweimal str_replace() ist schneller als einmal preg_replace().
     */
    $str    = str_replace(
        'href="http://'. $_SERVER['SERVER_NAME'], 'href="', $str);
    $str    = str_replace(
        "href='http://". $_SERVER['SERVER_NAME'], "href='", $str);

    /* Links auf die Startseite sind jetzt leer, müssen gefüllt werden. */
    $str    = str_replace(array("href=''", 'href=""'), "href='/'", $str);

    /* Links auf die aktuelle Seite entfernen. Nur bei GET. */
    if ( 'GET' != $_SERVER['REQUEST_METHOD'] )
    {
        return $str;
    }

    $str    = preg_replace('~<a\s*([^>]*)href\s*=\s*(["|\'])'
        . $_SERVER['REQUEST_URI'] . '\\2([^>]*)>(.*)</a>~Umis',
        '<span title="Hier befinden Sie sich gerade." class="current">'
        . "\\4" . '</span>',
        $str);

    return $str;
}

In WordPress kann man sich diese Funktion entweder in die eigenen Scripte einbauen, oder man schreibt sie in die eigene functions.php und setzt ganz oben in die header.php folgende Zeile:

ob_start('remove_self_links');

Das reicht schon. Damit erwischt man nicht nur Links in der Navigation, sondern auch beispielsweise in der Übersicht einer Kategorie.

Anhand der Klasse current kann man diese Nicht-Links jetzt auch mit CSS ansprechen:

.current {
    color:      #777;
    background: #fff;
}

Natürlich funktioniert das nicht nur in WordPress, sondern mit jeder Seite, die mit PHP generiert wird. Da kann man entweder mit dem generellen ob_start() für alles arbeiten oder so:

<?php
/* Puffer starten. */
ob_start();
?>
<!-- normaler HTML-Code, beispielsweise die Navigation -->
<?php
/* Puffer abfangen. */
$clean = ob_get_contents();
/* Puffer leeren. */
ob_end_clean();
/* Aufräumen. */
$clean = remove_self_links($clean);
/* Ausgeben. */
echo $clean;
/* Fertig. */
?>

Löst ihr dieses Problem anders? Wie? Oder gar nicht? Warum?

Artikel twittern

24 Kommentare

Dennis Frank am 30.01.2009 18:31:
Und wenn es mal schnell gehen muss oder man den HTML-Code nicht ändern kann, reicht manchmal auch ein bisschen CSS-Kosmetik um den Link vor normalen Benutzern zu tarnen:
```
a.current,
a.current:hover {
   cursor: default;
   text-decoration: none;
   color: #000;
   }
```
(Die nötigen Properties sind natürlich individuell unterschiedlich.)
GwenDragon am 02.02.2009 19:52:
Ich bin immer noch ein Pseudo-Depp im Blog. ;)
Bevor der Deppenlink schwindet, muss ich erst die Plugins für Kategorien, Tags und Breadcrumbs umprogrammieren.
Demnächst, eben.

Derzeit sind die aktuellen Links anwählbar, um schneller in der Navigation zurück zu kommen, aber wenigstens fett ausgezeichnet.

Nicht sehr toll als USability. Aber es geht noch.
Ich muss mal die Navigation des Blogs überdenken.
Thomas Scholz am 02.02.2009 20:52:
Dein Blog ist bestimmt in Perl geschrieben, oder? Da kannst du doch auch Outputbuffering verwenden.

Hier im Blog fasse ich zum Entfernen der Deppenlinks kein einziges Plugin an; ich sorge einfach dafür, daß die Reparatur zuletzt arbeitet. Das spart das ganze Gefrickel.
Dieter am 05.02.2009 14:19:
Also ich habe das Problem bisher leider nicht gelöst, sondern nur etwas abmildern können.
Ich setze das WordPress-Plugin Breadcrumb NavXT ein. Dort sowie beim aktivem Menüpunkt meiner Hauptnavigation habe ich für die aktuelle Seite den Link nicht nur mit Fettdruck gestaltet, sondern auch noch mit der Standardfarbe schwarz versehen und den Mauszeiger an normalen Text angepasst.

Dein PHP-Skript bekam ich leider nicht umgesetzt. Dafür fehlt es mir (noch?) an den entsprechenden PHP-Kenntnissen. Leider!
Thomas Scholz am 05.02.2009 14:29:
Schreibe die Funktion (den ersten großen Quelltext) in die Datei functions.php deines aktuellen Themes.
In die header.php des Themes schreibst du ganz oben, direkt nach dem <?php den zweiten Code:
```
ob_start('remove_self_links');
```
Das sollte in jedem WordPress funktionieren, und Programmierwissen brauchst du dazu nicht.
Dieter am 05.02.2009 16:38:
Danke für den Hinweis, dass man den Code jeweils noch in php und ?> setzen muss.
Damit funktionierte es! Super!

Leider zerhaute es mir dafür dann das Layout.

Konkret: Tabreiter der aktiven Seite war weg und der Linktext oberhalb und bei Blogbeiträgen verschwand (verständlicherweise) das als CSS-Image eingefügte Icon dafür, so dass der "Nichtlink" einen unschönen Einzug bekam.
Ich gehe davon aus, dass sich das über entsprechende CSS-Festlegungen für Nichtlinks in den Navigationsbereichen beheben lässt. Allerdings ist meine CSS-Datei viel zu groß. Da muss ich noch einmal in mich gehen, ob ich dafür einen so großen Aufwand betreiben sollte.
Thomas Scholz am 05.02.2009 16:58:
Ersetze einfach das #nav_main ul li.current_page_item a in der green_2col_right.css durch #nav_main ul li .current. Das war’s schon.
Dieter am 05.02.2009 17:18:
Herzlichen Dank für Deine Hilfe.

Das war es aber leider nicht schon. Der Tab mit dem "Nichtlink" springt hoch und die Startseite lässt sich dann nicht mehr über die Hauptnavigation aufrufen. Und das ist nur das, was mir direkt auffiel. Das ist mir ein zu hoher Anpassungsaufwand. Habe noch bedeutsamere Baustellen.
Klaus am 01.04.2009 15:40:
Hallo Thomas,

ich wollte mich ausdrücklich für dein Script zum "Deppenlink" entfernen bedanken.
Meine PHP-Kenntnisse sind äußerst rudimentär, mit WordPress fange ich gerade an und trotzdem hat es einwandfrei geklappt.

Bis dann im XHTML-Forum.
Gruß
Klaus
k am 19.05.2009 11:44:
Servus Toscho,

so ganz hab ich die Problematik noch immer nicht verstanden. Du versuchst hier was genau? Bitte um Erklärung.
Thomas Scholz am 19.05.2009 12:38:
@k: Ich entferne den Link auf die Startseite, wenn du auf der Startseite bist, und den auf auf die Kontaktseite, wenn du auf der Kontaktseite bist. Und so weiter.

d. am 04.07.2009 18:25:

idee & script klingen gut, leider bekomme ich es aber nicht in wordpress umgesetzt. ich verwende in meinem eigenen theme bisher KEINE functions.php.

wie soll ich das script denn dann einbinden?

und mein menü ist aktuell so gestaltet:

#navmenu{
text-align: left;
text-decoration: none;
list-style-type: none; list-style-image: none;}

#navmenu a:link, #navmenu a:visited{
text-decoration:none;
font-size: 16px;
font-weight: bold;
color:white;
border: 1px dashed #ffffff;
padding: 2px;}

#navmenu a:active, #navmenu a:hover{
text-decoration: none;
color: #333366;
background-color: #FFffff;
border: 1px dashed #333366;
padding: 2px;}

#navmenu ul { margin:0; padding:0; float:left; width:100%; list-style-type:none; }
#navmenu ul li { display:inline; margin-right:10px; padding:0; float:left;}
#navmenu ul li.page_item a { display:block; text-decoration:none; }

Reicht im Anschluss Dein...

.current {
    color:      #777;
    background: #fff;
}

? oder muss ich das in meine #navmenu einbinden?

danke für hilfe!

Thomas Scholz am 04.07.2009 19:04:
@d.: Du kannst den Code auch ganz oben in die header.php schreiben, vor die erste HTML-Ausgabe.

Ob du nur .current {} schreibst oder #navmenu .current {} hängt davon ab, wie die aktuelle Seite in deinem Menu aussehen soll.
mike am 06.06.2010 13:59:
Die Idee an sich finde ich sehr gut.
Ich sehe nur ein kleines Problem, wo ich mir uneinig bin, wer/was in Sachen Usability gewinnt: nämlich der sogenannte "Permanentlink".
Sicher, den kann $User sich auch aus der Adressleiste kopieren, aber für den einen oder anderen mag es bequemer sein, diesen rechtsmausig zu kopieren. (für was auch immer, in Mail einfügen etc.)

Irgendwelche Meinungen dazu?
Thomas Scholz am 06.06.2010 14:28:
@mike: Ich halte sehr wenig von diesen Links:
- Wer weiß, was der Permalink ist, der findet diese Adresse auch so. Die Adressleiste oder der Tab bieten sie ja an.
- Wer es nicht weiß, der braucht den Link erst recht nicht.
- Beim Anhören einer Seite wirkt der Link ebenso verwirrend wie jeder andere redundante Link.
- Bei der Navigation per Tastatur hat man einen unnötigen Zwischenschritt. Nicht alle Browser bieten eine räumliche Navigation an.
Insgesamt sehe ich also mehr Nach- als Vorteile.
mike am 06.06.2010 14:38:
Ok, danke, bin fast überredet ;)
Mal schauen, ob noch wer Pro-link-argumente in petto hat, ansonsten setze ich das mal zeitnah um. Bisher nie wirklich drüber nachgedacht.
Fritz am 07.06.2010 01:17:
Hallo Thomas,

du hast es vermutlich eh bemerkt, dass ich dich zitiert habe:
http://webdesign.weisshart.de/blog/2010/06/06/eine-seite-soll-nicht-auf-sich-selbst-verlinken/

Aber nun zur Pro- und Kontra-Frage:
Das geilste Argument: Google belohnt den Deppenlink!?
Davon wollte mich heute tatsächlich jemand per Twitter überzeugen.
Das Problem? Dieser Jemand rankt bei Google saumäßig gut.

Und nun?
Thomas Scholz am 07.06.2010 01:27:
@Fritz: Eine wissenschaftliche Untersuchung hat mal gemessen: In Gegenden mit vielen Störchen lag die Geburtenrate auffällig hoch. Kausalität tritt nicht dort auf, wo es einem gerade paßt. ☺

Sachlich betrachtet gibt es keinen Grund, warum eine Seite relevanter sein soll, die sich selbst verlinkt. Das halte ich für Unfug.
Heinz-Georg am 12.07.2010 21:28:
Hallo Thomas,

das, was ich Stunden gesucht hab!

Ich finde bei mir bloß nicht wo die Formatierung herkommt. Ich habe in der style.css eine Klasse .current angelegt, aber die Seite reagiert da nicht drauf.

Ich bin zwar mit der aktuellen Formatierung ganz zufrieden, wüsste aber gern wo ich das verändern kann.

Vielleicht kannst du mir kurz helfen.

Danke
Heinz-Georg
Thomas Scholz am 12.07.2010 21:46:
@Heinz-Georg: In der Seite, die du hier im Kommentar angegeben hast, funktioniert es; die Formatierung wird angewandt. Sie ist nur wenig deutlich. Wenn du mal einen anderen Hintergrund verwendest, siehst du das Ergebnis sicher besser.
Nebenbei: Das Theme Twenty Ten solltest du nicht direkt bearbeiten, sonst gehen deine Änderungen beim nächsten Update verloren. Lege lieber ein Child Theme an.
Heinz-Georg am 14.07.2010 19:08:
Hallo Thomas,
ich weiß nicht, wo er die Formatierung her hat. Ich habe in style.css folgenden code eingefügt:
.current {
color: #777;
background: #fff;
}
Also müsste die Schrift doch blau sein!?

Zu dem zweiten Punkt, das wusste ich vorher nicht, hab aber schon einiges in ein paar php Dateien und der style.css geändert. Kann ich da das Theme nicht besser ganz umbenennen?

Gruß & Danke
Heinz-Georg
Thomas Scholz am 14.07.2010 23:34:
@Heinz-Georg: #777; ist Dunkelgrau. Blau wäre beispielsweise #007.

Und ja, du kannst das Theme auch umbenennen. Dann profitierst du natürlich nicht mehr von den Verbesserungen der Updates.
Heinz-Georg am 16.07.2010 07:43:
Hej Thomas,

ich hatte mich noch nie mit der Hexadezimale Kurzform beschäftgt, was ich jetzt nachgeholt hab. Hatte die drei Zahlen in den PS Farbwähler eingegeben und der zeigte mir blau. Oh.

Die Seite ist eh fast nur statisch, das mit Chlid Theme mach ich beim nächsten Projekt.

Nochmals Danke
Heinz-Georg
Thomas am 20.07.2010 10:55:
Ausgezeichneter Guide. Ich habe dieses Umstand immer auf eine etwas kompliziertere Art und Weise realisiert.
So ist es aber um einiges eleganter!

Was sagst du dazu?

RSS-Feed für diese Kommentare · Hinweise zum Datenschutz
Nur das Textfeld ist Pflicht, der Rest … nicht.
Bitte maskiere < und > mit und , sonst werden sie gefressen.

← Mehr Bilder, Weniger Farbe Safari in CSS und Javascript ansprechen →

toscho.designRedaktion, Druck- und Webdesign aus Halle (Saale)

Deppenlink entfernen

24 Kommentare

Was sagst du dazu?

toscho.design
Redaktion, Druck- und Webdesign aus Halle (Saale)