Π£Ρ€ΠΎΠΊ 93.1. Π Π°Π±ΠΎΡ‚Π° с изобраТСниями Π½Π° WordPress

Π Π°Π±ΠΎΡ‚Π° с изобраТСниями Π½Π° WordPressΠ‘ Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ΠΌ вордпрСссовской ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΡ‹ Π² Π·Π°Π³Ρ€ΡƒΠ·Ρ‡ΠΈΠΊΠ΅ ΠΌΠ΅Π΄ΠΈΠ°Ρ„Π°ΠΉΠ»ΠΎΠ² Π·Π° послСдниС нСсколько Π»Π΅Ρ‚ Π±Ρ‹Π»ΠΎ Π½Π΅ΠΌΠ°Π»ΠΎ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹Ρ… ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΠΉ. ΠŸΠΎΠΆΠ°Π»ΡƒΠΉ, самоС Π³Π»Π°Π²Π½ΠΎΠ΅ – появлСниС Π³Π°Π»Π΅Ρ€Π΅ΠΉ ΠΈ инструмСнтов для управлСния  изобраТСниями: Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ нСпосрСдствСнно ΠΈΠ· Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ.

Π§Ρ‚ΠΎ ΠΆ, рассмотрим Π±Π°Π·ΠΎΠ²Ρ‹Π΅ основы, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с изобраТСниями Π² Π΄Π°Π½Π½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ: ΠΊΠ°ΠΊ ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΅Π΅, ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ для ускорСния Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ для Π½ΠΈΡ… ΠΊΠ°Ρ€ΡƒΡΠ΅Π»ΡŒ. НС ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ, Ρ‡Ρ‚ΠΎ ΠΊ ΠΌΠΎΠΌΠ΅Π½Ρ‚Ρƒ прочтСния руководства Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΈ ΡƒΡΠΎΠ²Π΅Ρ€ΡˆΠ΅Π½ΡΡ‚Π²ΡƒΡŽΡ‚ инструмСнты Π΅Ρ‰Π΅ Π»ΡƒΡ‡ΡˆΠ΅ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ станСт ΠΏΡ€ΠΎΡ‰Π΅ ΠΈ ΡƒΠ΄ΠΎΠ±Π½Π΅Π΅, Π½ΠΎ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ основы всС Ρ€Π°Π²Π½ΠΎ ΠΏΠΎΠΌΠΎΠ³ΡƒΡ‚ Π²Π°ΠΌ ΡΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π² Π΄Π°Π½Π½ΠΎΠΉ ΠΏΠ»Π°Ρ‚Ρ„ΠΎΡ€ΠΌΠ΅.

Как ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

МногиС ΠΌΠΎΠ³Π»ΠΈ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ прСдусматирваСт Π² настройках Π²Ρ‹Π±ΠΎΡ€ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°: это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ большой Ρ€Π°Π·ΠΌΠ΅Ρ€, срСдний ΠΈΠ»ΠΈ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π°. Π‘ΠΎΠ»Π΅Π΅ точная ΡˆΠΈΡ€ΠΈΠ½Π° ΠΈ высота ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Π·Π°Π΄Π°Π½Π° Π² настройках – ΠΌΠ΅Π΄ΠΈΠ°Ρ„Π°ΠΉΠ»Ρ‹. Если ΠΆΠ΅ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹ Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½, ΠΎΠ½ сгСнСрируСтся автоматичСски.

Ну Π° для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π½Π΅ ΠΈΡ‰Π΅Ρ‚ Π»Π΅Π³ΠΊΠΈΡ… ΠΏΡƒΡ‚Π΅ΠΉ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΠ°Π·Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ ΠΈ functions.php ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠΉ Ρ‚Π΅ΠΌΡ‹:

add_theme_support( β€˜post-thumbnails’ );

set_post_thumbnail_size( 150, 150 );

Π’Π°ΠΊ, Π² прописанном Π²Ρ‹ΡˆΠ΅ ΠΊΠΎΠ΄Π΅ ΡƒΠΊΠ°Π·Π°Π½ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€ Π² 150Ρ…150 пиксСлСй. ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎ воспользовавшись Π΄Π°Π½Π½Ρ‹ΠΌ ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΎΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Π½Π½Ρ‹Π΅ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π² настройках ΠΌΠ΅Π΄ΠΈΠ°Ρ„Π°ΠΉΠ»ΠΎΠ².

Π•ΡΡ‚ΡŒ Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° функция с трСмя Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π°ΠΌΠΈ:

ΠŸΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ ΠΏΡ€Π΅Π΄Π»Π°Π³Π°Π΅Ρ‚ ΠΎΠ±Ρ€Π΅Π·ΠΊΡƒ изобраТСния, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π°ΠΊΡ‚ΠΈΠ²ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ false Π½Π° true, ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΎΠ±Ρ€Π΅Π·ΠΊΠ° изобраТСния ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π°.

Π Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ для Ρ€Π°Π·Π½Ρ‹Ρ… шаблонов

Π˜Π½Ρ‚Π΅Ρ€Π΅ΡΠ½ΠΎ, Ρ‡Ρ‚ΠΎ Π² functions.php ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌΠΈ изобраТСниями для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ страницы. Π’Π°ΠΊ, Π½Π° ΡΡ‚Π°Ρ€Ρ‚ΠΎΠ²ΡƒΡŽ страницу ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρƒ, Π° Π² ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ – ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ срСднСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. Π Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΏΡ€ΠΈ этом Π²Ρ‹Π±ΠΈΡ€Π°ΡŽΡ‚ΡΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ add_image_size():

add_image_size( β€˜tag-thumb’, 200,200 );

add_image_size( β€˜homepage-thumb’, 220, 180 );

Для отобраТСния этих ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΉ Π² Ρ„Π°ΠΉΠ»Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ шаблона Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ нСбольшой ΠΊΠΎΠ΄. Π’ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ ΡƒΠΊΠ°Π·Π°Π½Ρ‹ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€, ΠΎΠ΄ΠΈΠ½ для тэгов, Π²Ρ‚ΠΎΡ€ΠΎΠΉ – для стартовой страницы. ΠœΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Π° Вэг отобразится, Ссли Π² tags.php Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄:

if ( has_post_thumbnail() ) {

the_post_thumbnail( β€˜category-thumb’ );

} ?>

Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

WordPress ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΡ…Π²Π°ΡΡ‚Π°Ρ‚ΡŒΡΡ Π½Π΅ΠΏΠ»ΠΎΡ…ΠΈΠΌ встроСнным Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π³Π΄Π΅ ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Ρ€Π΅Π·Π°Ρ‚ΡŒ, ΠΏΠΎΠ²ΠΎΡ€Π°Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ ΠΌΠ΅Π½ΡΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€. Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π΄Π°Π½Π½Ρ‹ΠΌ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€ΠΎΠΌ, Π΅ΡΡ‚ΡŒ Π΄Π²Π° способа. ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ – Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈΠ»ΠΈ Edit Image, пСрСйдя ΠΏΠΎ ссылкС послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π²Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. Π’Ρ‚ΠΎΡ€ΠΎΠΉ способ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ, Ссли Π²Ρ‹ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎ Π·Π°Ρ…ΠΎΠ΄ΠΈΡ‚Π΅ Π² ΠœΠ΅Π΄ΠΈΠ°Ρ„Π°ΠΉΠ»Ρ‹ ΠΈΠ· Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ Π°Π΄ΠΌΠΈΠ½ΠΊΠΈ. Для этого достаточно Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² спискС, навСсти курсор Π½Π° Π΄Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΈ Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ Π Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ (ΠΈΠ»ΠΈ Edit). Π—Π΄Π΅ΡΡŒ Ρ‚Π°ΠΊΠΆΠ΅ доступно ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅, Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ alt-тСкста, описания ΠΈΠ»ΠΈ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°.

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π½Π° этом особСнности рСдактирования Π½Π΅ Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°ΡŽΡ‚ΡΡ. Но ΠΎΠ± этом ΠΌΡ‹ ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΠΌ Π² ΡƒΡ€ΠΎΠΊΠ΅ 93.2.

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *

Π“Π»Π°Π²Π½ΠΎΠ΅ мСню