Jak vložit fotografii do profilu uživatele ve WordPress

K dnešnímu článku mne inspiroval komentář, který se zde nedávno objevil. Protože jsem v tu chvíli neměl čas vymýšlet řešení, jak do profilu uživatele přidat možnost vložit fotografii, doporučil jsem plugin. Vzhledem k tomu, že nejsem příznivcem bezhlavého používání pluginů, ukáži vám v tomto návodu, jak vložit do profilu pole pro url adresu fotografie uživatele. 

První věc, kterou musíme udělat, je nahrát fotografii na web a znát její url. Pokud budete nahrávat fotografii větší, než je velikost, v které se bude zobrazovat, nezapomeňte ji pomocí stylů zmenšit. Nyní již k samotné úpravě.

Otevřeme si soubor functions.php a do něj vložíme následující kód:

add_action( 'show_user_profile', 'my_photo_fields' );
add_action( 'edit_user_profile', 'my_photo_fields' );
 
function my_photo_fields( $user ) { ?>
<table class="form-table">
<tr>
<th><label for="pic">Profile Image</label></th>
<td>
<img src="<?php echo esc_attr( get_the_author_meta( 'pic', $user->ID ) ); ?>" width="80" />
</td>
<tr>
<th></th>
<td>
<input type="text" name="pic" id="pic" value="
<?php echo esc_attr( get_the_author_meta( 'pic', $user->ID ) ); ?>" class="regular-text" />
<span class="description">Insert url your image</span>
</td>
</tr>
</table>
<?php }

V profilu uživatele se nám objeví pole pro url fotografie, po uložení se nám zobrazí vložené foto

Pro zobrazení profilu uživatele vložíme, nebo upravíme kód v single.php, či v content.php takto:

<div class="author-info">
<div class="author-avatar">
<img src="<?php echo the_author_meta('pic'); ?>" 
alt="<?php the_author_meta('nickname'); ?>" width="68" />
</div><!-- .author-avatar -->
<div class="author-description">
<h2><?php printf( __( 'About %s', 'twentytwelve' ), get_the_author() ); ?></h2>
<p><?php the_author_meta( 'description' ); ?></p>
<div class="author-link">
<a href="<?php echo esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ); ?>" 
rel="author">
<?php printf( __( 'View all posts by %s <span class="meta-nav">&rarr;</span>', 'twentytwelve' )
, get_the_author() ); ?>
</a>
</div><!-- .author-link	-->
</div><!-- .author-description -->
</div><!-- .author-info -->

Tato úprava je pro šablonu twentytwelve, kterou používám na testovacím webu a výsledek můžete vidět zde

Jak vidíte, úprava je jednoduchá a nemusíte kvůli tomu používat plugin.

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Související články

7 Comments

  1. Dotaz

    Hloupý dotaz: kde najdu výše uvedené soubory? Zejména tedy functions.php. Ve které složce?

    Odpověď
    1. Musilda

      Jsou to soubory ve složce aktuální šablony wp-content/themet/twentytwelve, functions.php ve složce wp-includes je jádro WordPressu, tu neupravovat, při aktualizaci WordPressu se všechny úpravy smažou.

      Odpověď
      1. Dotaz

        Warning: Cannot modify header information – headers already sent by (output started at /data/web/virtuals/46060/virtual/www/domains/xxxxxxxxxxxxxxx.cz/wp-content/themes/gridly/functions.php:205) in /data/web/virtuals/46060/virtual/www/domains/xxxxxxxxxxxxxxxxxxx.cz/wp-includes/pluggable.php on line 876

        Raději použiji plugin.

        Odpověď
        1. Musilda

          Toto by nemělo mít souvislost se samotnou funkcí, většinou se to stává, když je na začátku souboru prázdný znak.

          Odpověď
  2. Vojtěch Ž

    Zdravím,
    rád bych se zeptal, jestli by bylo možné upravit kód pro šablonu „blogcentral“. V administraci se nyní sice zobrazuje možnost přidání linku na avatar, ale po přidání a uložení se nic neděje, jako bych nikam nic nenahrál.
    Při vložení druhé části kódu do „content.php“ a „single.php“ se už celé stránky zobrazují buď bez textu, nebo vůbec.
    Děkuji

    Odpověď

Přidejte komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *