Π£Ρ€ΠΎΠΊ 70. Π‘ΠΊΡ€ΠΈΠΏΡ‚ для оформлСния Pinterest-постов

Π‘ΠΊΡ€ΠΈΠΏΡ‚ для оформлСния Pinterest-постовНачиная с вСрсии WordPress 3.5, Π² состав основных Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊ Π±Ρ‹Π» Π²ΠΊΠ»ΡŽΡ‡Π΅Π½ скрипт jQueri Masonry, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠΉ с Π»Π΅Π³ΠΊΠΎΡΡ‚ΡŒΡŽ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄ постов Π½Π° Π³Π»Π°Π²Π½Ρ‹ΠΉ экран. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС Ρ€Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Π² Π²ΠΈΠ΄Π΅ «стСны ΠΈΠ· ΠΊΠΈΡ€ΠΏΠΈΡ‡ΠΈΠΊΠΎΠ²Β», ΠΏΡ€ΠΈΡ‡Π΅ΠΌ Π΄Π»ΠΈΠ½Π° постов ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈΡ… ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ значСния Π½Π΅ ΠΈΠ³Ρ€Π°ΡŽΡ‚: всС ΠΊΠΈΡ€ΠΏΠΈΡ‡ΠΈΠΊΠΈ ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Π½Ρ‹ Π΄Ρ€ΡƒΠ³ ΠΊ Π΄Ρ€ΡƒΠ³Ρƒ, заполняя всС ΠΎΡ‚Π²Π΅Π΄Π΅Π½Π½ΠΎΠ΅ пространство, ΠΈ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎ-ΠΏΡ€ΠΈΡ‚ΡΠ³Π°Ρ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ. Π§Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ½ΡΡ‚ΡŒ, ΠΎ Ρ‡Π΅ΠΌ Ρ€Π΅Ρ‡ΡŒ, стоит ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊ популярному сСрвису Pinterest.

ΠŸΡ€Π΅ΠΈΠΌΡƒΡ‰Π΅ΡΡ‚Π²Π° jQueri Masonry

Β«ΠšΠΈΡ€ΠΏΠΈΡ‡Π½Ρ‹ΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Β» прСдусматриваСт ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ рядов ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠŸΡ€ΠΈ этом особая Ρ€ΠΎΠ»ΡŒ удСляСтся Π½Π΅ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠΌΡƒ, Π° Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠΌΡƒ ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΠ²Π°Π½ΠΈΡŽ. Но Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π΄Π»ΠΈΠ½Π° постов ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΡ‚Π»ΠΈΡ‡Π°Ρ‚ΡŒΡΡ, Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Π² Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… рядах ΠΌΠΎΠ³ΡƒΡ‚ ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ выглядят Π½Π° страницС ΠΊΠ°ΠΊ Π±Π΅Π»Ρ‹Π΅ пятна. Π’Π°ΠΊΠΎΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ извСстСн, ΠΊΠ°ΠΊ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΉ CSS, Π½ΠΎ ΠΊΠ°ΠΊ ΡƒΠΆΠ΅ ΠΎΡ‚ΠΌΠ΅Ρ‡Π°Π»ΠΎΡΡŒ Π²Ρ‹ΡˆΠ΅, ΠΏΡ€ΠΎΠ±Π΅Π»Ρ‹ ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒΡΡ ΠΈ всС Β«ΠΊΠΈΡ€ΠΏΠΈΡ‡ΠΈΠΊΠΈΒ» Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Π½Ρ‹ Π΄Ρ€ΡƒΠ³ ΠΊ Π΄Ρ€ΡƒΠ³Ρƒ. И это ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ jQueri Masonry.

Π’Ρ‹Π²ΠΎΠ΄ Π² ΠΊΠΈΡ€ΠΏΠΈΡ‡Π½ΠΎΠΌ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅

Π§Ρ‚ΠΎΠ±Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΡƒ, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ wp_enqueu_script, для этого Π² functions.php Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ скрипт:

function mason_script() {

wp_enqueue_script( β€˜jquery-masonry’ );

}

add_action( β€˜wp_enqueue_scripts’, β€˜mason_script’ );

Π”Π°Π»Π΅Π΅ Π½ΡƒΠΆΠ½ΠΎ Π½Π°ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ сСтку. Для основной вСрстки Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΊΠΎΠ΄ HTML Π² Ρ†ΠΈΠΊΠ» ΠΈΠ»ΠΈ Ρ‡Π°ΡΡ‚ΡŒ шаблона, Π³Π΄Π΅ планируСтся использованиС ΠΊΠΈΡ€ΠΏΠΈΡ‡Π½ΠΎΠΉ стСны. Π‘Π½Π°Ρ‡Π°Π»Π° настраиваСм ΠΎΠ±Ρ‰ΠΈΠΉ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ для всСх постов, Π·Π°Ρ‚Π΅ΠΌ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ Π΄Π°Π½Π½Ρ‹ΠΉ Ρ‚ΠΈΠΏ для отобраТСния ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ поста:

Β 

НастраиваСм CSS: ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅ΠΌ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€-Π±Π»ΠΎΠΊΠ°, Π° Ρ‚Π°ΠΊΠΆΠ΅ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ поста, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡ…Ρ€Π°Π½ΠΈΡ‚ΡŒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ ΠΊΠ°ΠΊ Π² Pinterest Π²ΠΈΠ΄. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°Ρ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ полосы 960 px ΠΈ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ 4 ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ с ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 240 px Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΌ постС. Π—Π°ΠΏΠΎΠΌΠ½ΠΈΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ ΠΈ настроим Π²Ρ‹Π²ΠΎΠ΄ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ стилСй:

#container {

width:Β Β Β Β Β  960px; // width of the entire container for the wall

}

.brick {

width:Β Β Β Β Β  220px; // width of each brick less the padding inbetween

padding:Β Β Β  0px 10px 15px 10px;

}

Π’Π΅ΠΏΠ΅Ρ€ΡŒ настроим Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ, которая Π±ΡƒΠ΄Π΅Ρ‚ ΡΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ вмСстС всС div-ΠΊΠΎΡ‚Π΅ΠΉΠ½Π΅Ρ€Ρ‹:

jQuery( document ).ready( function( $ ) {

$( β€˜#container’ ).masonry( { columnWidth: 220 } );

} );

Π’ΠΎΠΎΠ±Ρ‰Π΅ стоит ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Masonry поставляСтся с большим количСством встроСнных возмоТностСй. Для оТивлСния постов, ΠΊ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ эффСкты Π°Π½ΠΈΠΌΠ°Ρ†ΠΈΠΈ, Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ настройки Π½Π° стСну ΠΈΠ»ΠΈ ΡƒΠΏΠΎΡ€ΡΠ΄ΠΎΡ‡ΠΈΠ²Π°Ρ‚ΡŒ Π²Ρ‹Π²ΠΎΠ΄ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π° Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ порядкС. Ну, Π° Ссли Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ сайт с ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΌ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΎΠ½Π°Π»ΠΎΠΌ, Π½ΠΎ Π½Π΅ Π³ΠΎΡ‚ΠΎΠ²Ρ‹ Π²Π½ΠΎΡΠΈΡ‚ΡŒ ΠΏΡ€Π°Π²ΠΊΠΈ ΠΊΠΎΠ΄Π°, Π²Ρ‹ всСгда ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΊΠ°Π·Π°Ρ‚ΡŒ сайт Ρƒ нас.

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

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

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