Како додати нумеричку страницу са својим ВордПресс темом

Недавно нас је један од наших читалаца питао како да додамо нумеричку страницу са ВПБегиннер страницом блога. Подразумеване теме за ВордПресс и многе друге теме приказују линкове за страницу за додавање страница додавањем веза Старији постови и Новији постови на дну ваших страница ВордПресс архиве. Међутим, постоје многи ВордПресс сајтови који користе нумеричку страницу са страницама, попут ВПБегиннер. Из нашег искуства, нумеричка страница је прилагођена корисницима, привлачнија и за СЕО једноставнија. Најнапреднији оквири за ВордПресс теме попут Генесис долазе са уграђеном функционалношћу за додавање нумеричке странице. У овом чланку ћемо вам показати како у своју ВордПресс тему додати нумеричку страницу. Циљ је заменити задате старије и новије странице за страницу за дно архивирања на дну страница архива једноставним за навигацију бројевима страница.


Разлика између подразумеване навигације ВордПресс-ом и нумеричке странице

Постоје две методе за додавање нумеричке странице у вашу ВордПресс тему. Прва метода је ручно додавање нумеричке странице са ослањањем без ослањања на додатак треће стране. Будући да је овај чланак у категорији тема и намењен новим дизајнерима тема, прво ћемо показати мануалну методу. Други начин је употреба постојећег додатка треће стране за додавање нумеричке странице. Препоручили бисмо ову методу свим нашим ДИИ корисницима.

Ручно додавање нумеричке странице у своје ВордПресс теме

Прво ћемо вам показати како да ручно додате нумеричку страницу са својим ВордПресс темама. То ће користити нашим напредним корисницима и корисницима који уче да развијају теме или желе да то ураде без ослањања на додатак треће стране. Започнимо додавањем следећег кода у датотеку фунцтион.пхп теме.

Напомена: Овај код потиче из оквира Генесис који користимо на нашој веб локацији. Ако користите Генесис, не треба вам овај код или додатак.

функција впбегиннер_нумериц_постс_нав () {

иф (ис_сингулар ())
повратак;

глобални $ вп_куери;

/ ** Зауставите извршење ако постоји само 1 страница * /
иф ($ вп_куери)->мак_нум_пагес <= 1)
повратак;

$ пагед = гет_куери_вар (‘пагед’)? абсинт (гет_куери_вар (‘страница на страници’)): 1;
$ мак = интвал ($ вп_куери)->мак_нум_пагес);

/ ** Додај тренутну страницу у низ * * /
иф (страница на страници) >= 1)
$ линкс [] = $ пагед;

/ ** Додајте странице око тренутне странице у низ *
иф (страница на страници) >= 3) {
$ линкс [] = $ пагед – 1;
$ линкс [] = $ пагед – 2;
}

иф ((стр. $ + 2) <= $ мак) {
$ линкс [] = $ пагед + 2;
$ линкс [] = $ пагед + 1;
}

одјек ‘

    ‘ . "\ н";

    / ** Претходни линк везе * /
    иф (гет_превиоус_постс_линк ())
    принтф (‘

  • % с
  • ‘ . "\ н", гет_превиоус_постс_линк ());

    / ** Линк до прве странице, плус елипсе ако је потребно * /
    иф (! ин_арраи (1, $ линкови)) {
    $ цласс = 1 == $ пагед? ‘цласс ="активан"’:’ ‘;

    принтф (‘% с)

    ‘ . "\ н", $ цласс, есц_урл (гет_пагенум_линк (1)), ‘1’);

    иф (! ин_арраи (2, $ везе))
    одјек ‘

  • ‘;
    }

    / ** Линк до тренутне странице, плус 2 странице у било којем смеру ако је потребно * /
    сортирај ($ линкови);
    фореацх ((низ) $ линкови као $ линк) {
    $ цласс = $ пагед == $ линк? ‘цласс ="активан"’:’ ‘;
    принтф (‘% с)

    ‘ . "\ н", $ цласс, есц_урл (гет_пагенум_линк ($ линк)), $ линк);
    }

    / ** Линк до последње странице, плус елипсе ако је потребно * /
    иф (! ин_арраи ($ мак, $ линкови)) {
    иф (! ин_арраи ($ мак – 1, $ линкови))
    одјек ‘

  • ‘ . "\ н";

    $ цласс = $ пагед == $ мак? ‘цласс ="активан"’:’ ‘;
    принтф (‘% с)

    ‘ . "\ н", $ цласс, есц_урл (гет_пагенум_линк ($ мак)), $ мак);
    }

    / ** Следећа веза * /
    иф (гет_нект_постс_линк ())
    принтф (‘

  • % с
  • ‘ . "\ н", гет_нект_постс_линк ());

    одјек ‘

‘ . "\ н";

}

На ВПБегиннер исти тај код користимо за нумеричку страницу са страницама архиве (на пример наш блог или страницу са категоријама туторијала за ВордПресс). Оно што овај код чини јесте да проналази број страница и припрема листу са нумерисаним везама. Да бисте то додали у своје шаблоне, мораћете да додате следећу ознаку предлошка у индекс.пхп теме, архива.пхп, категорија.пхп и било који други шаблон странице архиве странице..

<?пхп впбегиннер_нумериц_постс_нав (); ?>

Сада када смо добили нашу листу нумерисаних страница, морамо да је сложимо. Желимо да се листа прикаже у линијском блоку, где је активна страница истакнута другом бојом позадине. Да бисте то постигли, идемо напред и додајте следеће у датотеку стиле.цсс теме:

.навигација а,
.навигација ли: лебдите,
.навигација ли.ацтиве а,
.навигација ли.дисаблед {
боја: #ффф;
уређење текста: ниједно;
}

.навигација ли {
дисплеј: редни;
}

.навигација а,
.навигација ли: лебдите,
.навигација ли.ацтиве а,
.навигација ли.дисаблед {
позадинска боја: # 6ФБ7Е9;
обруб границе: 3пк;
показивач: показивач;
паддинг: 12пк;
паддинг: 0.75рем;
}

.навигација ли: лебдите,
.навигација ли.ацтиве а {
позадинска боја: # 3Ц8ДЦ5;
}

То је то. Имамо листу нумеричке странице са овом темом која изгледа одлично.

Ручно додавање нумеричке странице на ВордПресс теме без додатка

Додавање нумеричке странице у ВордПресс помоћу ВП-ПагеНави

Сада погледајмо како додати ВордПресс тему нумеричке странице са помоћу постојећег додатка ВП-ПагеНави. Прво што требате да урадите је да инсталирате и активирате ВП-ПагеНави додатак. Након активирања додатка идите на Подешавања »ПагеНави да бисте конфигурисали подешавања додатка.

Конфигурисање поставки ВП-ПагеНави

На страници поставки додатка можете заменити подразумевана подешавања текста и нумеричке странице за страницу ако желите. Међутим, подразумевана подешавања требало би да раде на већини веб локација.

У следећем кораку морате да додате ознаку шаблона у своју ВордПресс тему. Идите у директоријум са темама и пронађите линије за старије и новије странице у обрасцима архивске странице: индек.пхп, арцхиве.пхп и свим другим датотекама архивског шаблона. Додајте следећу ознаку шаблона да замените старе претходне ознаке_постс_линк и нект_постс_линк.

<?пхп вп_пагенави (); ?>

Једном када додате исечак вп_пагенави, овако би изгледала нумеричка страница.

Подразумевани приказ нумеричке странице са вп-пагенави-јем

Ако желите да промените како изгледају боје и стил нумеричке странице у вп-пагенави-ју, онда бисте морали да одете на Подешавања »ПагеНави. Поништите опцију да бисте користили Усе пагенави-цсс.цсс и сачували промене. Сада иди на Додаци »Едитор. У падајућем менију Селецт плугин за уређивање изаберите ВП-ПагеНави и кликните на дугме Селецт. Уредник ће учитати додатке на десној бочној траци. Кликните на пагенави-цсс.цсс да бисте га отворили у уређивачу, а затим копирајте садржај датотеке.

Копирајте садржај датотеке пагенави-цсс

Затим треба да одете Изглед »Едитор и залепите садржај пагенави-цсс.цсс у датотеку стиле.цсс ваше теме. Сада можете модификовати шему боја и стилове одавде. Разлог зашто смо копирали садржај цсс-а додатка у листу стилова теме је да спречимо губитак промена стила уколико ажурирате додатак. Ево мало модификоване верзије нумеричке странице, слободно је користите и модификујте у својој теми.

.вп-пагенави {
јасно: обоје;
}

.вп-пагенави а, .вп-пагенави спан {
боја: #ФФФ;
уређење текста: ниједно;
позадинска боја: # 6ФБ7Е9;
обруб: 1пк чврста материја # Б2Д1Е5;
паддинг: 5пк 5пк;
маргина: 2пк;
}

.вп-пагенави: ховер, .вп-пагенави спан.цуррент {
боја обруба: # Е9Ф2Ф9;
позадинска боја: # 6ФБ7Е9;
}

.вп-пагенави спан.цуррент {
фонт-веигхт: болд;
позадинска боја: # 3Ц8ДЦ5;
}

Ево како би то изгледало:

Прилагођени ПагеНави ЦСС

Као и увек, требало би да експериментишете са ЦСС-ом. Циљ би требао бити да се нумеричка страница претвори у изглед и изглед боја ваше веб странице, тако да се лијепо стапају и не изгледају као необично постављена ставка.

Надамо се да вам је овај чланак помогао да додате и прикажете нумеричку страницу са својим ВордПресс темом. Коју методу најрадије користите? Да ли вам се свиђа нумеричка страница, или више волите уграђену претходну / следећу навигацију? Јавите нам у коментарима испод.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map